How to Create a Popup in Divi Using Divi Supreme

Unlike Elementor and Brizy (read: Elementor vs Divi, Divi vs Brizy), Divi has no built-in feature to create a popup. If you want to create a popup on your Divi-powered WordPress website, you can install a plugin. A Divi plugin we recommend is Divi Supreme. It is one of the most popular Divi plugins, available on the Divi Marketplace. The plugin is actually released as a freemium plugin, but the popup builder is only available on the pro version so that you need to use the pro version of Divi Supreme to be able to create a popup.

The popup builder of Divi Supreme supports four popup types: layout, iFrame, video, and image. In this article, we will show you how to create a popup from a layout. This popup type requires you to create a layout of the popup first before you can call it. The popup layout can be created using the visual editor of Divi Builder.

About the trigger type, Divi Supreme supports the following trigger types:

  • On click
  • On page load
  • On exit intent
  • On page scroll

How to Create a Popup in Divi Using Divi Supreme

Before we continue, make sure you have installed Divi Supreme (the pro version) on your WordPress site.

As mentioned above, we will create the popup from a layout in this example. We will create a simple popup as follows:

It takes only two steps to create a popup using Divi Supreme.

Step 1: Create the Popup Layout/Template

On the first step, you need to create the layout of the popup. You can then call the layout from a page you want the popup to appear.

To create popup layout, go to Divi -> Divi Library on your WordPress dashboard and click the Add New button to create a new layout.

Give your layout a name on the Layout Name field. On the Layout Type field, select Layout. Click the Submit button.

On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH) and click the Start Building button.

Click the Build On The Frond End button to create the layout using Divi Builder visual editor.

Once the Divi Builder editor opens, you can prepare the layout by adding the necessary sections and rows. Once the layout is ready, you can then add the modules you want to add. You can add any module to your popup according to your need. In our case (as you can see on the GIF above), we only add the Contact Form module.

Once you are done editing the popup layout, you can click the Save button on the bottom-right corner to save the changes followed by Exit Visual Builder on the top bar to exit the Divi Builder editor.

Click the Update button to update the popup layout.

Step 2: Call the Popup Layout

Once the popup layout is ready, you can call it to show it up. You can call the popup layout on any page on your website. Be it the homepage, landing page, contact page, about page, and so on. You can even call the popup layout on a custom template (e.g., custom footer template) you created with Divi Theme Builder.

As mentioned earlier, the popup builder of Divi Supreme supports four trigger types: on click, on page load, on exit intent, and on page scroll. In this example, we will call the popup using the on click trigger.

First, edit a page (or custom template) you want to call the popup layout on using Divi Builder. Once the Divi Builder editor opens, select a module. Click the gear icon to open the settings panel.

On the settings panel, open the Visibility block under the Advanced tab. Enable the Use Popup option. On the Popup Type option, select Layout. On the Popup (Divi Library) option, select the popup layout you have just created on step one above.

You can scroll down to see more options. For instance, on the Trigger On option, you can select the trigger type to call the popup layout. And on the Close Popup Triggers option, you can select how the popup to be closed.

Here are some setting options you can select:

  • Trigger On

The method (trigger) to call the popup layout. As mentioned, there are four trigger types offered by Divi Supreme:

  1. On click: This trigger type requires a visitor to click a certain element in order for the popup layout to load. There are four element types you can use: module, button, image, and link.
  2. Page Load: This trigger type will call the popup layout based on the page load. The popup will appear once the page is fully loaded, with a certain delay according to the duration that has been set before.
  3. Page Scroll: This trigger type will call the popup layout based on the page scroll. The popup will appear when a user makes a scroll down on the page.
  4. Exit Intent: This trigger type will call the popup on exit intent. The popup will appear when a visitor is intending to exit the page by clicking the close button.

  • Close Popup Triggers

From this setting option, you can select how the popup to be closed. If you choose the Outside Popup option, the popup will be closed when a visitor clicks any area outside the popup. If you choose the Close Button option, the popup will be closed when a visitor clicks the close button.

  • Use Auto Close Popup

You can select this setting option if you want the popup to be automatically closed. You can set the auto close duration after enabling this option.

  • Timed Delay

By default, Divi Supreme displays the popup one second after the trigger condition fulfilled. You can set the custom delay from this option.

  • Cookie Expiry

By default, the popup will only appear once in 30 days to a user. You can set the custom expiry date of the popup from this setting. For instance, if you set the number to 7, the popup will appear once in 7 days to a user.

  • Entrance Animation In

You can set the entrance animation of the popup from this setting option.

  • Exit Animation out

You can set the exit animation of the popup from this setting option.

  • Popup Position

This setting option allows you to set the position of the popup.

  • Popup Position Type

This setting option allows you to set the position type of the popup. Fixed or absolute.

  • Use Fullwidth

You can enable this option if you want the popup to be displayed in the fullwidth mode.

  • Popup Max Width

You can set the maximum width of the popup from this setting option.

  • Show Overlay

If you want to show the overlay, you can simply enable this option. You can then set the overlay color on the color picker beneath it.

  • Show Close Button

If you want to show the close button, you can enable this option. If this option is enabled, you can set the icon size, icon color, and icon placement (inside or outside the popup).

Once you are done editing the page, you can publish it to apply the changes, including the popup.

How to Display the Popup on the Entire Website

The popup builder of Divi Supreme doesn’t support display conditions, but it doesn’t mean you have to edit every single page on your website to display the popup layout on the entire website. Instead, you can make use of the Divi Theme Builder feature to display the popup on the entire website. For instance, you can enable the popup on one of elements of the global header or footer.

On your WordPress dashboard, go to Divi -> Theme Builder. Add a global footer, global body, or header.

Once the Divi Builder editor opens, you can edit one of the modules. On the settings panel of the module, you can open the Visibility block on the settings panel to enable the popup as we have just covered above.

The Bottom Line

Divi Supreme can be a solution if you are looking to create a popup on your Divi-powered WordPress site. It’s a feature-rich Divi plugin. In addition to popup builder, the plugin also offers a set of modules (that consists of 59 modules in total). You can create a beautiful popup using the visual editor of Divi Builder just like when you are creating a regular page.

While the plugin is good enough to create a popup in Divi, it has some drawbacks, though. For instance, it doesn’t display conditions although you can also display the popup on the entire website with a little trick. Another drawback, it doesn’t allow you to preview the popup on the Divi Builder editor like when you are creating a popup in Elementor and Brizy. The popup can only be previewed on a live page. Meaning that you need to publish the page to see the actual popup.

How to Create a Contact Form in Elementor

Contact page is one of the crucial pages of a website. It is often used as a parameter whether a website is trusted or not. To make it easier for your visitors to reach you out, you can provide a contact form to the contact page of your website. Elementor comes with a native widget — the Form widget — to allow you to add a form to a page. This article will show you how.

The Form widget itself only available on Elementor Pro. Meaning that you need to upgrade to the pro version if you still use the free version (read: Elementor Free vs Pro). Not only you can use the Form widget to create a contact form, but you can also use it to create other form types, including email opt-in form, user registration form, file upload form, and so on.

How to Create a Contact Form in Elementor

When creating a contact form using the Form widget in Elementor, you can set where the form data to be sent to. Whether to your email account or the default form submission manager of Elementor.

If you are new to Elementor, you can read previous article to learn how to use it. In this article, we will go straight to adding the Form widget to the canvas area. Simply add the Form widget from the widget panel to the canvas area as follows:

As you can see, the Form widget automatically creates a form that consists of three fields. You can go to the settings panel to customize the form. To edit an existing field, you can simply open it. You can change the field type, replace the default label and placeholder, and set it as a required field if you want. To remove an existing field, you can simply click the X on the field you want to remove.

To add a new field, you can simply click the ADD ITEM button. The Form widget itself supports twenty field types.

Setting the Form Action

As we mentioned earlier, you can send the form data (submissions) to your email account or Elementor’s built-in form submission instead. To set the destination, you can open the Actions After Submit block under the Content tab on the settings panel. Select an action you want to set on the available field (you can add multiple actions). In this example, we select Email.

If you set the form action to Email too, you can open the Email block to set the email address to receive the form data. As you can see, you can also set the subject if you want it.

By default, Elementor will include the content of all form fields. If you want to include content from specific fields only, you can paste the shortcodes of your preferred fields to the Message field. For instance, the setting below will only send the content of the message field.

To get the shortcode of a field, you can click the ADVANCED tab on the associated field on the Form Fields block.

Setting the Messages

When the form data is successfully sent, your visitors will see a successful message beneath the form. Similarly, they will also see an error message when the form data is failed to send. You can replace these default messages, as well as two other messages, from the Additional Options block under the Content tab on the settings panel. Enable the Custom Messages to replace the default messages.

Styling Up the Form

Once you are done making the basic settings on the Content tab on the settings panel, you can switch to the Style tab to style up the form. There are five blocks you can open here.

  • Form

You can open this block to set the gap between form columns and rows, the label spacing, typography (font family, font size, font style, and so on) of the form label, and the text color of the form label.

  • Field

You can open this block to set the typography of the field text as well as the color, background color of the form fields, border size and color of the form fields, and border radius of the form fields.

  • Buttons

You can open this block to style up the submit button. You can set things like the typography of the button text as well as the color, background color, border radius, border size, border color, and text padding. To set the button size, you can do so from the Buttons block under the Content tab.

  • Messages

You can open this block to set the typography as well as the text color of the messages.

  • Steps

You can open this block only if you want to create a multi-step form. You can read our previous article to learn more about how to create a multi-step form in Elementor.

Once you are done styling up the form, as well as the page, you can publish your page.

Potential Error

One of the common errors when you set the form action to Email is the form is not sent. Instead, you will see the following message.

Elementor and most contact form plugins — including Contact Form 7 — use the default mail delivery function of WordPress called wp_mail. This function depends on the send_mail function belongs to PHP to work. Unfortunately, not all web hosting providers enable the PHP’s send_mail function. If this is the case, your form won’t be sent. Instead, you will an error message as the one above.

To fix the issue, you can install and configure a custom mail delivery service on your WordPress. Read this article to learn more. Alternatively, if it is possible, you can ask your hosting provider to enable the PHP’s send_mail function.

The Bottom Line

Elementor is the most complete page builder plugin. It comes with a bunch of design elements (called widgets) to make it easy for you to add elements to page, including a contact form via the Form widget. While you can use the Form widget to create a contact form from scratch with your own design, Elementor also offers premade form templates you can make use of. You can even create a contact page (complete with contact form, of course) from a template.

How to Add Dynamic Star Rating in Divi

Divi is a multipurpose theme. You can use it to create any type of website. One of which is a review blog — a blog dedicated to write reviews. In the context of review blog, some bloggers add star rating on each blog post they write to emphasize the review. Some WordPress themes like Newspaper by tagDiv has a bult-in feature to add dynamic star rating. Unfortunately, Divi doesn’t have one. If you use Divi and need this feature, we will show you how to add dynamic star rating in Divi.

As you know, Divi comes with a theme builder feature that allows you to create custom templates for your theme parts, including the single post. You can make use of this feature to create a custom single post template and add the star rating element to it. To add the dynamic functionality, you can use Advanced Custom Fields or the similar plugins like Pods and Meta Box.

The problem is, Divi Builder has no native module to add star rating so that you need to install a plugin. One of the Divi Plugins that has a star rating module is Divi Supreme, which we will use this example.

How to Add Dynamic Star Rating in Divi

You can follow the steps below to add dynamic star rating in Divi.

Step 1: Create a Custom Field Using Advanced Custom Fields (ACF)

On the first step, you need to create a custom field using ACF or other custom field plugins that support number field type. The number field type is used to add the star rating via the WordPress editor. To be able to create a custom field using ACF, you need to install it on your WordPress site first, of course.

Once the ACF plugin is installed and activated, go to Custom Fields -> Add New on your WordPress dashboard to create a new custom fields group. Give your custom fields group a name and click the Add Field button to add a custom field.

Give your custom field a label and name. On the Field Type option, select Number and set the minimum and maximum values on the Minimum Value and Maximum Value, respectively. Normally, the maximum value for star rating is 5.

You can add more custom fields if you need ones. Once you are done, you can switch to the Location section to assign the custom fields group. If you want to assign it to blog posts, you can use the following rule (the default rule).

Click the Publish button to publish the custom fields group.

For more detailed instructions on how to create custom fields using ACF, you can refer to this article.

Step 2: Create the Custom Template Using Theme Builder

Again, you need to install a plugin to be able to add star rating as Divi Builder has no native module to add one. Divi Supreme is one of the plugins you can install. The plugin offers about 59 modules in total, allowing you to unleash your creativity when creating a website using Divi. Divi Supreme itself is available on Divi Marketplace.

Once you are ready, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button. Select All Posts (or other areas you want to assign the custom template to). Click the Create Template button.

Once the template is added, click Add Custom Body -> Build Custom Body.

On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH) as Divi Builder offers no ready-made single post template on its library. Click the Start Building button to start editing the template.

Once the Divi Builder editor opens, you can set the layout by adding the necessary sections and rows before you add the actual design elements (modules) like post title, post content, and so on. Since you want to add dynamic star rating, don’t forget to add the Star Rating module. You can place this module anywhere. Be it before post content or after post content.

Once the Star Rating module is added, click the dynamic icon on the Rating field under the Rating block under the Content tab on the settings panel.

Select the custom field you have just created on step one above on the ACF section.

You can add a before/after text if you want it. You can go to the Design tab on the settings panel to style up the star rating. There are 12 blocks you can open here. You can set things like the star color, size, alignment, and so on.

Once you done editing the template, you can click the Save button on the bottom-right corner to apply the changes followed by the X icon on the top-right corner to exit the Divi Builder editor. On the theme builder page, don’t forget to click the Save Changes button.

For more detailed instructions on how to create a custom single post in WordPress using Divi Builder, you can read this post.

Step 3: Write a New Post

Lastly, you can start to write a new blog post (or edit an existing one) just like usual. To add the star rating, you can input the number on the custom field section within the WordPress editor. The number you add will represent the number of star rating on the frontend.

The Bottom Line

Divi allows you to step further with WordPress, even if you have no programming skills. Its built-in page builder — Divi Builder — supports dynamic content, allowing you to create a customized dynamic website without coding. You can add custom dynamic content like star rating with the help of a custom field plugin. While this article demonstrated how to add dynamic star rating to blog posts, the implementation can be broader. For instance, you can add dynamic star rating to a custom post type dedicated to movie database site, property listing site, and so on.

Divi Supreme Review: A Great Plugin to Enrich Divi Modules

One of the biggest downsides of Divi Builder is that it comes with fewer design elements (modules) than other page builders. There are only about 39 regular modules (outside the WooCommerce modules) offered by Divi Builder in total. Way fewer than Elementor (read: Elementor vs Divi) and even Brizy (read: Divi vs Brizy). We have no idea why Elegant Themes (the developer of Divi) is so stingy about the modules. Probably, it wants to give more room for third-party developers to develop plugins. Whatever the reason, you can install a plugin if you need more modules. One of the plugins you can install is Divi Supreme.

What is Divi Supreme?

You have just read above. That you can install a plugin if you need more modules on Divi Builder. Divi Supreme is one of the plugins you can install. It is one of the most popular Divi plugins. On the Divi Marketplace, Divi Supreme has been bought by over 3,000 times. While on WordPress plugin directory, the plugin has over 90,000 active installations. Yes, Divi Supreme is available in two versions: the free version and the pro version. So, if you are curious about it, you can try the free version first before you buy the pro version. The free version of Divi Supreme comes with 21 modules, while the pro version offers 28 more modules. Thus, there are 59 modules offered by Divi Supreme in total.

In addition to modules, Divi Supreme also offers extra features to extend the functionality of Divi. One of which is popup builder which you can use to create popups.

Divi Supreme Modules

As mentioned above, there are 59 modules offered by Divi Supreme in total. They will start available on the Divi Builder editor soon as the Divi Supreme plugin is installed and activated on your WordPress site.

Divi Supreme Free Modules:

Before/After Image SliderFacebook CommentsLottie
Business HoursFacebook FeedMenu
ButtonFlipboxPrice List
Caldera FormsGradient TextShapes
Contact Form 7Icon ListText Badges
Embed Google MapImageText Divider
Embed Twitter TimelineImage AccordionTyping

Divi Supreme Pro Modules:

Animated Gradient TextFacebook EmbedMask Text
Blob Shape ImageFacebook Like ButtonMasonry Gallery
Block Reveal ImageFloating Multi ImagesPost Carousel
Block Reveral TextGlitch TextScroll Image
Blog CarouselIcon DividerShuffle Letters
BreadcrumbsImage CarouselStar Rating
CardImage HotspotsText Notation
Card CarouselImage Hover RevealText Rotator
Content ToggleImage Text RevealTilt Image
Dual Heading

As you can see on two tables above, there are plenty of modules offered by Divi Supreme to allow you to add creative elements to your page, which you can’t do with the native modules of Divi Builder. For instance, you can add a Lottie animation using the Lottie module. Divi Supreme is a great plugin to allow you to unleash your creativity when designing a web page using Divi Builder.

Divi Supreme Features

One of the notable features offered by Divi Supreme is a popup builder. The feature allows you to create popup using the Divi Builder editor. Meaning that you can create a beautiful popup in a visual way. No need to deal with code. Divi Supreme also offers an element scheduler which you can use to set when a certain element (section, row, and module) to appear on a Divi-powered page or post.

You can control which features you want to enable from the settings page of Divi Supreme (by clicking the Divi Supreme menu on the WordPress dashboard).

Here are the notable features offered by Divi Supreme:

Popup Builder

Unlike Elementor and Brizy, Divi has no built-in feature to create a popup. Unless you have JavaScript and CSS knowledge, the only way to create a popup in Divi is by installing a plugin. Divi Supreme is one of the plugins you can install to create a popup in Divi. The popup builder of Divi Supreme supports four trigger types as follows:

  • On click
  • Page load
  • On scroll
  • Exit intent

The way Divi Supreme popup builder works itself is pretty similar to popup builder of Elementor and Brizy. First, you need to create the popup template (using Divi Builder, of course). Once the template is created, you can call it on any page or post using one of the supported trigger types above. Unfortunately, Divi Supreme offers no ready-made popup templates so that you need to create the template yourself from scratch. Also, it supports no display condition so that the popup will only appear on a page where you call the popup.

Divi Supreme also makes it possible for you to add a video and open it in a lightbox.

Element Scheduler

The second notable feature offered by Divi Supreme is element scheduler. This feature is available on both versions of Divi Supreme. It allows you to show/hide certain elements on a certain period. The elements supported by this feature are section, row, and module. This feature will be useful if you have an e-commerce website and often run campaigns on certain events (yearend sale, midyear sale, holiday offers, and so on). With this feature you can create, for instance, a promotional banner to appear on a specific date and time.

The feature also offers options to allow you to effortlessly hide/show certain elements during work hours. When applying a show/hide schedule to an element, you can set the user state (logged in or not) and user role the schedule to be applied to. Element scheduler itself can be accessed from the Visibility block under the Advanced tab on the settings panel.

Theme Builder Header

The theme builder feature of Divi allows you to create a custom header for your WordPress site. This gives you more freedom to customize your site header. However, to apply certain effects, you need have CSS and JavaScript knowledge. Divi offers only one default effect you can apply: sticky effect.

Divi Supreme comes with a feature to make it easier for you to add certain effects to your custom header. One of which, you can apply the shrink on scroll effect. You can access this feature on the Easy Theme Builder tab on the Divi Supreme settings page on your WordPress dashboard.

The Verdict

Popup builder might is the most demanded feature by Divi users. Unfortunately, there is no sign that Elegant Themes will introduce the feature in the near future. At the time being, you can install a plugin if you want to create a popup on your Divi-powered WordPress site if you have no coding skills. Divi Supreme is by far the most reliable Divi plugin to create popups. In addition to a popup builder, Divi Supreme also adds a set of modules to the Divi Builder to allow you to add more creative elements to a page. As you know, Divi Builder offers fewer design elements (modules) than other existing page builders. Divi Supreme helps fill the gap by adding 59 modules in total.

Overall, Divi Supreme is a great plugin. It allows you to enrich your experience in building a WordPress website with Divi. There are more options for you to unleash your creativity thanks to its rich module collections.

How to Create a Mailchimp Form in Elementor Free

Mailchimp is a popular email marketing tool. No wonder if most page builder plugins support integration with it. Elementor is no exception. However, you need to use Elementor Pro to be able to integrate your website with your Mailchimp account. Whereas not all Elementor users can afford the pro version. Happy Addons can be a solution if you use Elementor Free yet want to integrate your website with Mailchimp. The free version of Happy Addons (version 2.25.0) comes with a widget that you can use to create an email opt-in form for Mailchimp.

Here is how to create a Mailchimp email opt-in form in Elementor Free using Happy Addons.

In case you are new to Elementor, we have a separate article that covers how to use Elementor you can read.

Step One: Get a Mailchimp API Key

You need a Mailchimp API key to connect your Mailchimp account with Happy Addons. To get one, visit the Mailchimp website and login with your account. Once logged in, click your profile picture on the bottom-left corner and select Profile.

On your profile page, click the Extras menu and select API keys.

Create a new API key by clicking the Create A Key button.

Copy the generated API key on the table (topmost). You can also add a label to your API key to make it easy for you to identify it in the future.

Step Two: Integrate Your Mailchimp Account with Happy Addons

Once the Mailchimp API key is created, you can integrate your Mailchimp account with Happy Addons. Make sure you have installed Happy Addons on your WordPress site before getting started. The free version of Happy Addons is available on the WordPress plugin directory. If you have installed Happy Addons before, make sure to update it to the latest version.

To integrate Mailchimp with Happy Addons, go to Happy Addons -> Credentials on your WordPress dashboard. Paste the Mailchimp API key you have created on step one above to the Mailchimp field and click the Save Settings button.

Step Three: Create the Email Opt-in Form

Once your Mailchimp account is connected to Happy Addons, you can start creating the email opt-in form. To do so, simply add the Mailchimp widget of Happy Addons to the canvas area.

Go to the left panel to make the settings. On the Choose API from option under the MailChimp block, leave it to default (unless you want to use a custom API). Select a Mailchimp list on the Lists dropdown menu.

Until here, you have successfully created an email opt-in form for Mailchimp in Elementor Free using Happy Addons. You can go to the Style tab on the settings panel to style up the form. Publish your page once you are done editing it.

6 Best Divi Plugins

The power of community is what makes WordPress becomes so popular. As a company that develops WordPress themes and plugins, Elegant Themes understand this. That is why Elegant Themes allows third-party developers to develop plugins. The company even provides an official marketplace (called Divi Marketplace) where third-party developers can market their products. Not just Divi plugins, but also Divi child themes, and layouts. If you are a regular Divi users (not a developer), you can also visit Divi Marketplace to discover Divi plugins and other Divi products.

By the way, what is a Divi plugin?

Technically, a Divi plugin is a WordPress plugin. However, it is designed specifically to work with Divi. In other words, you need to have Divi installed on your WordPress site to use a Divi plugin. In most cases, a Divi plugin adds a set of modules to the Divi Builder editor which later you can use on your pages. As you might have known, Divi offers only 39 native modules.

Some Divi plugins also offer extra features to Divi, though. For instance, Divi Supreme offers a popup builder feature to allow you to create popups using Divi Builder editor.

If you are looking for a Divi plugin, here are five options you can consider. All plugins below are available on Divi Marketplace.

Best Divi Plugins

1. Divi Supreme

Divi Supreme might is the most popular Divi plugin in the market. The plugin is available in two version: free and paid. The free version of Divi Supreme is available on the official plugin directory of WordPress, while the paid version is available on Divi Marketplace. The free version comes with about 21 modules, including a module to add a Lottie animation and image comparison. Divi Supreme is a great option if you are looking for a plugin to enrich the Divi modules library. As you have known, Divi comes with only about 39 modules, way fewer than Elementor (read: Elementor vs Divi). Here are the modules offered by Divi Supreme (free and pro):

Gradient TextBusiness HoursScroll Image
FlipboxIcon ListCard
Text DividerShapesCard Carousel
ImageGlitch TextText Rotator Module
TypingIcon DividerBlock Reveal Image Module
ButtonFloating Multi ImagesBlock Reveal Text Module
Facebook FeedImage Hover RevealBefore After Image Slider Module
Facebook CommentsImage Text RevealLottie Module
Facebook Embed ModuleStar RatingText Notation
Like Button ModuleTilt ImageMasonry Gallery
Embed Twitter TimelineShuffle LettersBreadcrumbs
Contact Form 7Image CarouselContent Toggle
Caldera FormsDual HeadingBlog Carousel
Embed Google MapImage HotspotImage Accordion
Text BadgesAnimated Gradient TextPost Carousel
MenuMask TextBlob Shape Image
Price List

As you can see on the table above, there are some creative modules offered by Divi Supreme like Text Rotator, Scroll Image, and so on. You can also add social media elements like tweets and Facebook feed.

In addition to the modules on the table above, Divi Supreme also offers supporting features, including a popup builder to allow you to create popups using Divi Builder editor. Here are the additional features offered by Divi Supreme:

  • Popup builder
  • Element scheduler
  • Responsive viewer
  • Extra options for custom header template
  • Library widget

2. Divi Plus

Popup builder is one of features that absence from Divi. If you need this feature, Divi Plus is one of the Divi plugins you can install. You can use the popup builder feature of Divi Plus to create modal popups. Divi Plus also comes with a feature to allow you to add an AJAX-based live search on your website. Divi Plus itself comes with over 50 modules to enrich the modules library of Divi Builder. With Divi Plus modules, you can add creative elements to your page like image carousel, highlighted text, vertical timeline, image mask, image hotspot, and so on.

Here are the modules offered by Divi Plus:

Products Carousel for WooCommerceLottie AnimationText Separator
Products Grid for WooCommerceFloating ImagesShadow Separator
Products Categories for WooCommerceScroll Image ModuleBusiness Hours
Interactive Image CardBar Counter ModulePrice List
Modal PopupTilt Image ModuleCaldera and Contact Form 7 Styler
Content ToggleTeam SliderFAQPage Schema
TimelineStar RatingHowTo Schema
Live SearchTestimonial GridFacebook Comments Module
Text HighlighterTestimonial SliderFacebook Like Module
Blog SliderAdvanced Divi ButtonsFacebook Page Module
Masonry GalleryBreadcrumbsFacebook Share Module
Image AccordionFlip BoxFacebook Embedded Comment
Image CardFancy HeadingFacebook Embedded Post
Image HotspotGradient TextFacebook Embedded Video
Logo and Image CarouselImage Text MaskTwitter Embedded Tweet
Image MaskText AnimatorTwitter Follow
Image Card CarouselTyping EffectTwitter Share
Image MagnifierSeparatorTwitter Timeline
Before After Image Comparison SliderIcon Separator

Divi Modules also offers over 250 pre-made section layouts to streamline your workflow in creating a page. Also, it comes with child themes.

In addition to the modules above, Divi Plus also offers extra features. Including a feature to add a particle background to a section as well as visibility manager to control elements based on the user state (logged in or not). Here are the extra features offered by Divi Plus:

  • Element scheduler
  • Visibility control
  • Particle background
  • Divo library shortcode

3. Divi Blog Extras

Do you want to create an online magazine with Divi? If so, then Divi Blog Extras is the plugin you can use. The function of this plugin is pretty similar to JetBlog in Elementor. You can use it to display articles on your website in a wide range of styles. Grid in particular. There are over 10 layout options offered by Divi Blog Extras. In addition to allowing you to display articles in several styles, the plugin also comes with handy features like AJAX navigation and post read time.

4. DiviMenus

Divi Builder comes with a module called Menu. You can use this module when creating a custom header using Divi Builder. However, the customization options offered by the Menu module tend to limited. You can use the DiviMenus plugin to create a more creative menu on your Divi-powered WordPress site. The plugin allows you to create menu types like mega menu, off-canvas menu, slide-in menu, and so on. The plugin itself adds a new module called DiviMenus to Divi Builder. Same as other plugins above, DiviMenus is also available on Divi Marketplace.

5. Divi Essential

Just like the name suggests, Divi Essential is a Divi Plugin that adds essential modules to Divi Builder, allowing you to add more elements to your page. The plugin offers over 60 modules in total, including social modules (Facebook and Twitter), module to add a glitch text, module to add image magnifier, module to add a floating element, and so on. Here is the list of modules offered by Divi Essential:

Text AnimationText HighlightFloating Element
3D Flip BoxGradient TextNext Step Flow
Flip BoxText MaskNext Lottie
ReviewMulti HeadingHotspot
Next BlurbGlitch TextMasonry Gallery
Logo CarouselText Color MotionImage Magnifier
3D Cube SliderText Stroke MotionTimeline Module
CarouselHover HighlightFacebook Comments
Gallery SliderText StrokeFacebook Embedded Comments
Creative TeamText DividerFacebook Embedded Posts
Team Member OverlayText Tilt EffectFacebook Embedded Video
Team Overlay CardMega Image EffectFacebook Like
Team Social RevealCircular Image EffectFacebook Page
Next PersonImage Hover Box EffectFacebook Share
Next ButtonUltimate Image EffectTwitter Timeline
Next Dual ButtonImage Icon EffectTwitter Tweet
Price ListMinimal Image Hover EffectTwitter Follow
RatingImage Scroll EffectTwitter Button
Image RevealBusiness HourNext Before After
Next DividerPromo BoxImage Accordion
Testimonial SliderFeature List

To streamline your workflow, Divi Essential also offers pre-made layouts for most modules so that you don’t need to make the customization from scratch. Divi Essential also allows you to apply image masking for the following modules:

  • Next Blurb
  • Next Promo Box
  • Next Flip Box
  • Next Step Flow

6. Divi Flash

If you are running a blog or WooCommerce store using Divi, DiviFlash will be the perfect toolkit for customization. Because this plugin is focused on diversifying existing modules on the market like carousel, gallery, and custom post types. They have almost 40+ powerful Divi modules listed below:

Advanced HeadingDual ButtonImage Masking
Advanced BlurbAdvanced TabsBusiness Hours
TableAdvanced TableAdvanced Person
Animated HeadingFlip BoxTilt Card
Hover BoxImage Hover BoxImage Accordion
Before After SliderFloating Multi-ImageImage Hotspot
Typewriter TextAdvanced Image GalleryJustified Image Gallery
Packery Image GalleryImage CarouselLogo Carousel
Content CarouselTestimonial CarouselBlog Carousel
Instagram CarouselProduct CarouselCPT Carousel
Blog GridCPT GridFilterable CPT
Product GridLottieContent Toggle
Instagram GalleryWP Form StylerContact Form 7 Styler

With these modules, they also offer you 7+ niche & profession-specific pre-made full website layout packs. When you need section design, it comes with 220+ ready-to-use section layouts that will help you get your design done in minutes.

In addition to providing advanced functionality and leveraging DIVI & WordPress default limitations, it also includes divi extensions like:

  • Divi shortcodes
  • Menu customizer
  • SVG & JSON file format support
  • ACF field support

The Bottom Line

Divi — which is developed by Elegant Themes — is a popular theme that comes with a built-in page builder — Divi Builder. You can make use of Divi Builder to create beautiful pages on your WordPress site in a visual way. Divi Builder comes with about 39 native design elements (called modules), fewer than other page builders like Elementor and Brizy. Fortunately, Divi has an open ecosystem that allows third-party developers to create plugins to enrich the Divi Builder modules library. We have curated the best plugins you might need. All plugins above are available on Divi Marketplace.

Divi vs Brizy: Which One You Should Pick for Your Project?

Do you have a new website project and plan to use Divi or Brizy yet have no idea which is the best suited one for the project?

Be it Divi or Brizy is a great option if you want to create websites for multiple clients, especially if you hate the subscription-based payment model. Both Divi and Brizy offer a one-time purchase option so that you don’t need to spend your budget on a yearly basis. Divi, in particular, offers a simple pricing option whereby you can use a single license on unlimited sites. Meaning that you only need to buy Divi once for all your projects.

Both Divi and Brizy can be used to create a customized website thanks to their theme builder feature and custom fields supports. Read on to learn more which is best suited solution for your project.

Fundamental Differences

Before stepping further, there is a fundamental difference between Divi and Brizy that you need to know first. Technically, both Divi and Brizy are two different products. Divi is a WordPress theme, while Brizy is a page builder plugin.

Divi, which is developed by Elegant Themes, comes with a built-in page builder called Divi Builder. That’s we are going to compare with Brizy in this article. Divi Builder itself is available in two versions: as an integral part of the Divi theme and as a standalone plugin. The standalone plugin of Divi Builder can be installed on any WordPress theme.

Meanwhile, Brizy is a generic page builder plugin for WordPress. It’s not built specifically for a certain WordPress theme. Also, it is released as a freemium plugin. Meaning that you can use Brizy for free with an option to upgrade to the pro version to unlock more features.

Divi vs Brizy: Editing Experience

Live editing experience is the essence of a page builder whereby you can design a page on its visual editor. Both Divi Builder and Brizy offers what other page builders offer: the live editing experience. Be it Divi Builder or Brizy can be used to edit a page or post on your WordPress site.

We have no exact metrics to prove this, but the editor of Brizy is lighter than Divi Builder. Even Elementor. That being said, Brizy is a better suited option if you have a web hosting with limited resources like a shared web hosting. Divi (be it Divi theme or Divi Builder), demands high enough hosting specs. You can read this article to learn more about Divi system requirements. Elegant Themes offers Divi Hosting (a hosting optimized to run Divi) in case you are interested.

Divi Builder

In Divi Builder, design elements are classified into three types: section, row, and modules. Inside a row, you can add columns. You can click the plus button on the canvas area of the Divi Builder editor to add a new element. To customize an element, Divi offers a floating panel which appears when you click the gear icon on an element. From the settings panel, you can edit the content and style it up.

The biggest downside of Divi Builder editor is that you have to click the green checklist icon on the bottom-right corner of the settings panel to apply new changes. In other words, Divi Builder editor offers no automatic save feature. Also, there is no option to preview the page. You need to exit the editor first to preview your page.

Responsive Editing in Divi Builder

Divi Builder offers responsive editing to make sure your page has a decent look on every device type. You can simply click the device icons on the bottom side of the editor to switch between device mode. Divi Builder even allows you to optimize your page for a certain device. From iPad, iPhone, and Samsung Galaxy. You can also set a specific screen size.

In order to make your page really responsive, Divi Builder allows you to disable certain elements on a certain device type. If you are curious about how it feels to work with the Divi Builder editor, you can visit this page to try it.

Pros:

Cons:

  • No automatic save
  • No page preview

Brizy

The concept of the Brizy editor is a bit similar to Elementor whereby it has a centralized panel on the left side. You can use the panel to add a new element, organize the blocks, and set the page layout.

When it comes to element customization, Brizy is pretty similar to Gutenberg. It offers a floating bar which will appear when you click a certain element on the canvas area of the Brizy editor. The settings bar offers basic customizations. While to make advanced customizations (like adding animation effect, shape divider, and spacing) you need to open the settings panel.

Unlike Divi Builder, Brizy supports automatic save. Meaning that you don’t need to click a button to save new changes. The change will automatically be saved as you make the change. In addition, Brizy also allows you to preview your page without leaving the editor.

Responsive Editing in Brizy

To switch between device type modes in Brizy, you can simply click the device on the left panel. Unlike Divi Builder, Brizy only allows you to hide a certain element on desktop. There are no options to hide a certain element on tablet and smartphone.

Since Brizy is released as a freemium plugin, you can install it on your WordPress site to try the experience of editing a page using it.

Pros:

  • Automatic change
  • Page preview
  • Lightweight

Cons:

  • No option to hide elements on a certain device

Divi vs Brizy: Design Elements

The more elements offered by a page builder, the bigger the chance for you to unleash your creativity in designing a page as there are more elements you can add as well. In Divi Builder, an actual design element is called a module, while Brizy uses the term “element” to mention the actual design element.

Divi Builder

Divi Builder Regular Modules:

AccordionEmail OptinPricing Tables
AudioFilterable PortfolioSearch
Bar CounterGallerySidebar
BlogImageSlider
BlurbLoginSocial Media Follow
ButtonMapTabs
Call to ActionMenuTestimonial
Circle CounterNumber CounterText
CodePersonToggle
CommentsPost NavigationVideo
Contact FormPost SliderVideo Slider
Countdown TimerPost TitlePortfolio
Divider

Divi Builder WooCommerce Modules:

ShopWoo Meta
Woo Add To CartWoo Price
Woo Additional InfoWoo Rating
Woo BreadcrumbWoo Related Products
Woo Cart NoticeWoo Reviews
Woo DescriptionWoo Stock
Woo GalleryWoo Tabs
Woo ImagesWoo Title
Woo Upsell

Brizy

Brizy Regular Elements:

TextCountdownTable
ButtonTabsTimeline
IconProgressSwitcher
ImageAccordionLottie
AudioMenuSearch
VideoRowLogin
SpacerColumnFacebook
LineSidebarTwitter
MapShortcodeComments
EmbedCarouselPosts
FormGalleryBreadcrumbs
Icon BoxRatingPost Title
CounterPlaylistPost Excerpt
Post ContentPost NavigationPost Info

Brizy WooCommerce Elements:

TitleMeta
ExcerptRating
ContentAttributes
PriceUpsell
GalleryBreadcrumbs
Add To CartReview
StockProducts
SKUCategories

After taking a look at the tables above, you can conjure up what elements you can add to your page.

Please note that Divi Builder supports add-ons/extensions. This means, you can install an extension to add certain modules that are not offered by Divi Builder by default. Brizy, on the other hand, supports no extensions yet. In other words, the element options are limited to what’s offered by Brizy.

Divi vs Brizy: Theme Builder

Theme builder is a feature of a page builder that allows you to customize your theme parts by creating custom templates to replace the default templates of your theme. For instance, you can create a custom header template to replace the default header template of your theme. We have a separate article that covers WordPress theme vs theme builder in case you are interested.

Although Divi is technically a theme, its built-in page builder (Divi Builder) comes with a theme builder feature to give more freedom to customize your theme parts by creating custom templates. Brizy (the pro version) also comes with a theme builder although it doesn’t officially mention this feature a theme builder.

The theme builder feature of Divi Builder allows you to create custom templates for the following theme parts:

  • Header
  • Footer
  • Single post
  • Single page
  • Author archive pages
  • Category archive pages
  • Tag archive pages
  • Search results page
  • 404 page

The display condition supports allow you to assign a certain template for specific area(s). For instance, when creating a custom single post template, you can assign it to specific post(s), post under certain categories, post with certain tags, or post by certain authors.

Meanwhile, the theme builder feature of Brizy doesn’t allow you to create a custom header template and custom footer template, but you can still create a custom header and footer. Brizy offers two blocks dedicated to creating a custom header and footer, which also supports display condition. You can read this article to learn more about how to create a custom header in Brizy and this article for the custom footer. The custom templates you can create with Brizy theme builder are:

  • Single post
  • Single page
  • Author archive pages
  • Category archive pages
  • Tag archive pages
  • Search results page
  • 404 page

Divi BuilderBrizy
HeaderYesYes (via a dedicated block)
FooterYesYes (via a dedicated block)
Single PostYesYes
Single PageYesYes
Custom Post TypeYesYes
Category Archive PageYesYes
Tag Archive PageYesYes
Author Archive PageYesYes
404 PageYesYes
Search Results PageYesYes

WooCommerce Builder

Do you want to create an e-commerce website using WooCommerce? If so, you can also make use of theme builder to make every page of WooCommerce stands out by creating a custom template. The theme builder feature of Divi Builder and Brizy allows you to create custom templates for WooCommerce pages as you can see on the table below.

Divi BuilderBrizy
Shop PageYesYes
Single Product PageYesYes
Product Category PagesYesYes
Product Tag PagesYesYes
Cart PageYesNo
Checkout PageYesNo
Customer’s Account PageYesNo

Divi vs Brizy: Dynamic Content

As you have known and experienced yourself. You can use WordPress to create a dynamic website. There are some components offered by WordPress that allows you to create a dynamic website. Using a theme builder is the perfect way to learn those components. A page builder shows what components you can use to create a dynamic website. You can then assemble them in a custom template. For instance, a single post template generally consists of components like post title, post meta, post author, featured image, post content, post comment, post navigation, breadcrumbs, and so on.

You can take a look at the following table to learn what dynamic content types offered by Divi Builder and Brizy:

Divi BuilderBrizy
Featured ImageYesYes
Author Profile PictureYesYes
Site LogoYesYes
Site TitleYesYes
Site TaglineYesYes
Page TitleYesYes
Post TitleYesYes
Post MetaYesYes
Archive Page TitleYesYes
Archive Page DescriptionYesYes
Archive Post MetaYesYes
TaxonomyYesYes
LinkYesYes
Custom FieldYesYes

Divi vs Brizy: Animation Effects

Most page builders come with a default feature to allow you to add animation effects. From standard animation effect like hover effect to more advanced one like parallax background. Both Divi Builder and Brizy also come with a default feature to add animation effects. Divi Builder is one step ahead in this area as it offers more animation effects than Brizy.

Divi BuilderBrizy
Sticky EffectYesYes (Header block only)
Entrance AnimationYesYes
CSS TransformYesNo
Scroll EffectYesNo
Hover EffectYesYes
ParallaxYesYes

A little addition, Brizy has a native feature to add a Lottie animation in case you want to add one on your website. In Divi Builder, you can only add a Lottie animation via an extension.

Divi vs Brizy: Other Features

In addition to the main features we have covered above, both Divi and Brizy also offers some other features. Brizy is one steap of Divi in this area as it offers more additional features. For instance, it comes with a mega menu builder to allow you to create a mega menu on your WordPress site without installing an additional plugin. It also comes with a popup builder, allowing you to create popups without installing an additional plugin as well.

Another useful feature offered by Brizy that is not available in Divi is block condition. The feature allows you to show/hide a block based on user condition. For instance, you can hide a certain block on a logged in user. The feature is aimed at creating a membership website.

Here are some of the additional features offered by Divi and Brizy:

Divi BuilderBrizy
Popup BuilderNoYes
Mega Menu BuilderNoYes
MembershipNoYes
Custom CSSYesYes
Custom FontYesYes
Export/Import TemplateYesNo
Maintenance ModeNoYes

Divi vs Brizy: Pricing Options

As we mentioned in the beginning section, there is a fundamental difference between Divi and Brizy. Divi, which is developed by Elegant Themes, Inc. is released as a paid product while Brizy is released as a freemium product.

Be it Divi or Brizy (the pro version) can be bought with two payment options: subscription-based and one-time purchase. Elegant Themes offers two plans: Yearly Access and Lifetime Access. Whichever the plan you choose, you can use Divi on unlimited websites. The only difference is the payment model. In addition to Divi, the plans also allows you to access other products developed by Elegant Themes, including Bloom, Monarch, and Extra theme.

Brizy, on the other hand, offers three plans you can choose according to your needs. The cheapest plan (Personal) costs $49 per year. With the Personal plan, you can install Brizy Pro on three websites. The Studio Plan — which costs $99 per year — allows you to install Brizy Pro on unlimited websites. In addition to these two subscription-based plans, Brizy also offers a Lifetime plan which you can get with a one-time purchase option. The Lifetime plan offers an additional feature — white label — which will be useful to create website for clients.

The Verdict

You want the best tool to get your projects done. When it comes to creating websites with WordPress, Divi and Brizy are two of the tools you can choose. They are not the most popular ones, indeed. Elementor still the leader in the page builder segment, like it or not. But in terms of features, both Divi and Brizy are comparable to Elementor.

Divi and Brizy are especially great options for those hating subscription-based payment model. The two offer a plan which you can get with a one-time purchase option as we have just covered above. Regardless of the features, Divi has a more established ecosystem than Brizy as it existed first. There are third-party developers that develop Divi extensions to extend the functionality of Divi. Elegant Themes even offers an official marketplace where third-party developers can sell their creations.

On the other hand, Brizy offers a lighter editor which is also easier to use. Although doesn’t support extesnions, Brizy already provides advanced elements and features form builder, popup builder, mega menu builder, and lots of design elements. Also, Brizy offers a plan which include a white label feature that you might need as an agency who develops websites for clients. Finally, here we’ve included the table below to make it easier for you to compare the key features offered by Divi and Brizy.

DiviBrizy
Theme BuilderYesYes
WooCommerce BuilderYesYes
Popup BuilderNoYes
Mega Menu BuilderNoYes
Dynamic ContentYesYes
Custom FieldYesYes
Dynamic LinkYesYes
Animation EffectYesYes
Template LibraryYesYes
Export/Import TemplateYesNo
Add-ons SupportYesNo
Responsive EditingYesYes
Custom CSSYesYes
Custom FontYesYes
Role ManagerYesYes
Maintenance ModeNoYes

How to Use Dynamic Color Feature in Elementor

Color is a crucial element of a design, including a web design. The selection of color determines whether your design is good enough or not. On top of that, color can also be a determinant of brand identity. Elementor gives you a freedom to play with colors whereby you can set a color of any element. From text, button, icon, and so on. Not just a static color, Elementor also allows you to set a dynamic color for a certain element. This post will show you how to use dynamic color feature in Elementor.

Dynamic color itself was introduced in Elementor Pro 2.9, along with full-site editing. It allows you to set different colors on a certain element. For instance, you can set different colors of blog post titles as well as the background as you can see below.

That’s just an example. There are tons of other scenarios to use the dynamic color feature of Elementor. Your creativity is the limit.

Dynamic color can be implemented on a theme builder template (single post template, single page template, archive template, and so on). To add the dynamic color itself you can use ACF. At the time of writing (June 16, 2021), Elementor dynamic color doesn’t work on Pods.

How to Use Dynamic Color in Elementor

Step 1: Create a Custom Field Using ACF

To be able to use dynamic color in Elementor, first, you need to install ACF. It’s a free plugin, available on the plugin directory of WordPress.

Once the ACF plugin is installed and activated, you can start to create a custom fields group. Go to Custom Fields -> Add New on your WordPress dashboard. Add your fields group a name. Click the Add Field button to start adding a custom field.

Give your custom field a label and a name and select the field type on the Field Type option. Since you want to add dynamic color, you can select Color Picker on this option.

Switch to the Location block to set where the custom fields group to be assigned to. If you want to assign the fields group to posts, you can set following rule:

Post Type is equal to Post

Once done adding the custom fields, you can click the Publish button to publish the custom fields.

You can read this article to learn more about how to create custom fields in WordPress using ACF.

Step 2: Edit the Single Post Template

Once done creating the custom fields, you can edit the single post template (or any custom template you want to apply the dynamic color to). If you are new to Elementor and haven’t created a custom template before, you can read this article to learn more. In this post, we will go straight to editing the custom template. The element we want to apply the dynamic color to is post title.

On the Elementor, click the Post Title widget to customize it. Next, open the Style tab on the settings panel. On the Text Color option, click the color picker. Instead of picking a color, you can click the dynamic icon and select ACF Color Picker Field.

Click the wrench icon and select the custom field (key) you have just created on step one above.

Update your custom template to apply the changes.

Step 3: Add a Color to a Post

Once the custom template is updated, you can update the content associated with it (blog post in this case) to add the dynamic color. You can pick the color on the custom field block within the WordPress editor.

The Bottom Line

As we stated in the opening section, color is a key element in web design. Elementor makes it easy for you to implement a color to a certain element. Be it text, button, background, icon, or even box shadow. Not just a static color, Elementor also allows you to add a dynamic color to a custom template. The ability to add dynamic color is what makes Elementor one step ahead its competitors. You can unleash your creativity in designing a custom template with the Elementor dynamic color feature.

How to Create a YouTube Playlist in Elementor (Without Add-on)

Are you a YouTuber who want to create a website to strengthen your personal brand? If yes, Elementor is a great tool to assist you in creating the website. Its visual editor will make it easy for you to create the website. It takes no coding skills to create a professional website with Elementor. Since version 3.3 (Elementor Pro), Elementor comes with a native widget to allow you to create a YouTube playlist. No need to install an add-on anymore. Previously, you had to install an add-on to create a YouTube playlist in Elementor. JetBlog is one of the Elementor add-ons to create a playlist.

How to Create a YouTube Playlist in Elementor

Elementor introduced two new widgets on the release of Elementor Pro 3.3. One of which is the Video Playlist widget which you can use to create a YouTube playlist. Unlike JetBlog which allows you to embed a YouTube playlist or channel, the Video Playlist widget doesn’t allow you to do so. You need to create the playlist manually by adding the videos one by one yourself. If you want to add a new video to the playlist, you need to open the page using Elementor.

To start creating a YouTube playlist, first, add the Video Playlist widget to the canvas area (make sure you have updated your Elementor Pro to version 3.3). In case you are new to Elementor, we have a separate article that covers how to use Elementor.

As you can see, the widget automatically creates a YouTube playlist that consists of three videos. To replace the default videos, you can open the Playlist block under the Content tab on the settings panel. Simply paste the video URL you want to add on the Link field. You can use a custom video thumbnail if you want it. From this block, you can also add the playlist title. To add more videos to the playlist, you can simply click the ADD ITEM button.

If you want it, you can add description to each video. The Video Playlist allows you to add description to a video in two tabs. To add ones, you can enable the Contents Tabs option on a video. You can then add the description on the available editor.

To set the tab labels, you can open the Tabs block under the Content tab.

To add a custom thumbnail for the main video, you can open the Image Overlay block and enable the Image Overlay option. Select the image you want to use as the custom thumbnail.

Next, you can open the Additional Options block to enable some additional options like autoplay, video count, play icon, and so on.

Once you are done making the basic settings on the Content tab, you can switch to the Style tab to style up the playlist components. There are five blocks you can open here:

To set the height of the playlist, you can open the Layout block. To set the background of the playlist title as well as the typography (font family, font size, font style, and so on) and text color of the playlist title you can open the Top Bar block. To set the background of the videos list as well as the typography and text color of the videos list, you can open the Videos block. To customize the tabs (background, border size, border color, typography and text color), you can open the Tabs block.

Once you are done customizing the playlist and editing your page, you can click the PUBLISH/UPDATE button on the settings panel to publish/update your page.

Elementor vs Divi: Detailed Features Comparison

Instead of a theme, many WordPress users are now conducting a deep research on a page builder when they want to create a new website. The reason is because a page builder offers way more customization options than a theme. On top of that, page builders like Elementor and Divi Builder offer a better page editing experience than Gutenberg, the default editor of WordPress. Both Elementor and Divi Builder are two of the most popular WordPress page builder plugins. No wonder if they are often get compared each other. This post will also compare the two. More specifically, we will compare the features offered by both page builders. We will compare the performance (speed) of the two in a separate article.

There are some areas whereby both Elementor and Divi Builder have in common. One of which, the two have a well-established community than other page builders thanks to their open ecosystem. Be it Elementor or Divi Builder allows third-party developers to develop an add-on to extend the features and functionalities of the page builders.

Key Differences

Be it Elementor or Divi is likely need no introduction. But to make it clear what we will compare in this article, there is no bad to make a short intro about the two.

Elementor is a freemium page builder plugin developed by Elementor, Ltd. It is a generic page builder, meaning that it’s not built or optimized specifically for a certain theme although there are some WordPress themes that are designed specifically for Elementor, including the Hello theme — which is also developed by Elementor, Ltd — and Page Builder Framework.

Meanwhile, Divi is a WordPress theme. Once again. Divi is a WordPress theme. Not a plugin. But it comes with a built-in page builder called Divi Builder. When you install the Divi theme, you will have the Divi Builder to create pages on your website in a visual way just like Elementor. If you want to use Divi Builder on another theme instead of the Divi theme, you can also do so as Divi Builder is also available as a standalone plugin just like Elementor. You can read our previous article to learn more about Divi Builder. Both Divi and Divi Builder are developed by Elegant Themes, Inc. The company also develops three more WordPress products: Extra theme, Monarch (social media sharing plugin), and Bloom (email opt-in plugin).

So, what we will compare in this article?

Since Elementor and Divi are technically two different product types, we will compare Elementor with Divi Builder. More specifically we will compare the pro version of Elementor with Divi Builder.

Let’s start by comparing the key design elements they each offer.

Design Elements

Design elements should be the first aspect you consider when choosing a page builder as they determine what elements you can add to your page. Elementor uses the term “widget” to mention a design element, while Divi Builder uses the term “module”. Elementor is one step ahead in this area than Divi Builder as it offers more than 90 widgets in total, while Divi Builder offers only about 38 modules.

Elementor Pro Regular Widgets:

Inner SectionReviewsToggle
HeadingTable of ContentsSocial Icons
ImageCountdownAlert
Text EditorShare ButtonsSoundCloud
VideoBlockquoteShortcode
ButtonFacebook ButtonHTML
DividerFacebook CommentsMenu Anchor
SpacerFacebook EmbedSidebar
Google MapsFacebook PageRead More
IconTemplateText Path
PostsLottieSite Logo
PortfolioCode HighlightSite Title
GalleryVideo PlaylistPage Title
FormPayPal ButtonNav Menu
LoginImage BoxSearch Form
SlidesIcon BoxSitemap
Nav MenuStar RatingPost Title
Animated HeadlineImage CarouselPost Excerpt
HotspotBasic GalleryFeatured Image
Price ListIcon ListTable of Contents
Price TableCounterAuthor Box
Flip BoxProgress BarPost Comments
Call to ActionTestimonialPost Navigation
Media CarouselTabsPost Info
Testimonial CarouselAccordion

Elementor Pro WooCommerce Widgets:

ProductsProduct Stock
WooCommerce BreadcrumbsProduct Meta
Custom Add To CartShort Description
WooCommerce PagesProduct Content
Product CategoriesProduct Data Tabs
Menu CartAdditional Information
Product TitleProduct Related
Product ImagesUpsells
Product PriceArchive Title
Add To CartArchive Products
Product RatingArchive Description

Divi Builder General Modules:

AccordionEmail OptinPricing Tables
AudioFilterable PortfolioSearch
Bar CounterGallerySidebar
BlogImageSlider
BlurbLoginSocial Media Follow
ButtonMapTabs
Call to ActionMenuTestimonial
Circle CounterNumber CounterText
CodePersonToggle
CommentsPortfolioVideo
Contact FormPost NavigationVideo Slider
Countdown TimerPost Slider
DividerPost Title

Divi Builder WooCommerce Modules:

ShopWoo Meta
Woo Add To CartWoo Price
Woo Additional InfoWoo Rating
Woo BreadcrumbWoo Related Products
Woo Cart NoticeWoo Reviews
Woo DescriptionWoo Stock
Woo GalleryWoo Tabs
Woo ImagesWoo Title
Woo Upsell

As you can see on the tables above, Elementor offers more design elements than Divi Builder. Meaning that when creating a page using Elementor, there are more elements you can add to your page. For instance, Elementor allows you to add a form thanks to the Form widget. You can even create a multi-step form using the Form widget.

Again. Both Elementor and Divi Builder support add-ons. You can install an add-on to add certain elements that are not offered by Elementor or Divi Builder by default.

Theme Builder

Page builders evolved. Not only you can use them to create a page, but you can also use them to customize every single part (from the header, footer, 404 page, and so on) of your WordPress site thanks to their theme builder feature.

Theme builder itself is a new trend in the WordPress sphere. It is what makes a page builder steps beyond WordPress theme. Both Elementor Pro and Divi Builder comes with a theme builder. The feature allows you to create custom templates to replace the default templates of your theme parts (header, footer, single post, and so on). No programming skills required. Instead, you can create a custom template using the visual editor of Elementor and Divi Builder.

Take a lot at the following table to find out which theme parts you can create the template of using Elementor Pro and Divi Builder.

Elementor ProDivi Builder
HeaderYesYes
FooterYesYes
Single PostYesYes
Single PageYesYes
Custom Post TypeYesYes
Category Archive PageYesYes
Tag Archive PageYesYes
Author Archive PageYesYes
404 PageYesYes
Search Results PageYesYes
Elementor vs Divi: Theme Builder Feature Comparison

If you have WooCommerce installed on your WordPress site, you can also use both Elementor Pro and Divi Builder to create custom WooCommerce pages as follows:

Elementor ProDivi Builder
Shop PageYesYes
Single Product PageYesYes
Product Category PagesYesYes
Product Tag PagesYesYes
Cart PageYesYes
Checkout PageYesYes
Customer’s Account PageYesYes
Elementor vs Divi: WooCommerce Builder Feature Comparison

A little note about single post template. When creating a single post template using Divi Builder, you can customize every single component of the post content, including the main content itself, heading levels (H1, H2, H3, so on), link, bullet and numbering, and block quote. Elementor Pro, meanwhile, only allows you to customize the main content and post title.

Both Elementor Pro and Divi Builder supports display conditions. Meaning that you can assign a certain template to a certain area. For instance, you can create a custom single post template and assign it to certain posts (which you can select manually), post under certain categories, and so on. You can create multiple templates for a certain theme part if you want it. For instance, you can create multiple header templates on your website.

Dynamic Content

WordPress is a popular CMS to create a dynamic website. It comes with some default dynamic content like featured image, post title, and so on. Both Elementor and Divi Builder support dynamic content. You can add dynamic content when creating a custom template using either Elementor or Divi Builder. Here are the dynamic content types supported by the two:

ElementorDivi
Featured ImageYesYes
Author Profile PictureYesYes
Site LogoYesYes
Site TitleYesYes
Site TaglineYesYes
Page TitleYesYes
Post TitleYesYes
Post MetaYesYes
Archive Page TitleYesYes
Archive Page DescriptionYesYes
Archive Post MetaYesYes
TaxonomyYesYes
LinkYesYes
Custom FieldYesYes
Elementor vs Divi: Dynamic Content Feature Comparison

Elementor is one step ahead in this area thanks to its dynamic color. By the time this article is written (June 15, 2021), Divi Builder supports no dynamic color like Elementor.

Animation Effects

Do you want to add an animation effect to your page? Both Elementor and Divi Builder come with some animation effects that you can add to your design, be it a page or custom template. Sticky effect and entrance animation are two of the common animation effects supported by Elementor and Divi. With the sticky effect you can, for instance, create a sticky header on your website or floating button. Scroll effect and mouse effect are also two of the animation effects you can make use to create a stunning effect. They allow you to unleash your creativity in web design.

Especially for Elementor, it supports Lottie animation in case you want to add a Lottie animation to your page. Here are the animation effects offered by Elementor and Divi Builder:

ElementorDivi Builder
Sticky EffectYesYes
Entrance AnimationYesYes
CSS TransformYesYes
Scroll EffectYesYes
Mouse EffectYesNo
Elementor vs Divi: Animation Effect Feature Comparison

Responsive Editing

Today, most people spend more time on smartphone than laptop. So, it’s crucial to create a website that has a responsive design. When creating a website using Elementor or Divi Builder, you can optimize a certain page or custom template for each device type so that you will be able to create a beautiful website without sacrificing the experience. In order to make your website really mobile-optimized, you can even disable unnecessary elements on mobile device.

Elementor

To switch to a certain editing mode in Elementor (desktop, tablet, or smartphone), you can click the device icon the bottom side of the settings panel. You can then select the device type on the appearing top bar. You can even set specific screen size if you want it.

Divi Builder

In Divi Builder, you can simply click the device icon on the bottom side of the editor to switch between editing mode. Divi Builder even allows you to select a specific smartphone model like iPad, iPhone (with a certain model), and Samsung Galaxy (with a certain model). It also allows you to set a specific screen size just like Elementor.

Supporting Features

There is a feature offered by Elementor Pro that is not available in Divi Builder. The feature is popup builder. The popup builder of Elementor is versatile enough. You can use it to create a wide range of popup types. From regular promotional banner popup, notification popup, cookie consent popup, and so on. You can even use it to create a full-screen menu.

Actionable link is another feature that is not available in Divi Builder. In Elementor, you can set an actionable link and connect it with a third-party service. For instance, you can add an actionable link to start a WhatsApp chat or Facebook Messenger chat.

One Divi built-in feature that is not available on Elementor is the ability to set dynamic visibility via Display Conditions. It’s a new feature started available Divi 4.11.0. With the feature, you can hide/show an element by certain parameters. The elements you can hide include section, column, and module. The parameters supported by the feature are:

  • Login status
  • User role
  • Web browser
  • Operating system
  • Date and time
  • Location

You can read our previous article to learn more about the feature. With the dynamic visibility of Divi, you can minimize the use of plugins to create a certain website or to run a certain marketing campaign. For instance, you can use it to create a membership plugin thanks to the login status support. Or you can use the Email Optin module to collect email addresses of visitors who use a certain operating system thanks to the operating system parameter support.

Here are some other features offered by Elementor and Divi you might want to consider.

ElementorDivi Builder
Popup BuilderYesNo
Custom CSSYesYes
Role ManagerYesYes
Custom FontYesYes
Custom IconYesNo
Actionable LinkYesNo
Full-site EditingYesYes
Export/Import TemplateYesYes
Coming Soon/Maintenance ModeYesNo
Dynamic VisibilityNoYes

Pricing Options

We’ve finally come to this part. It’s always challenging to decide which is the better app from the pricing perspective.

The pro version of Elementor is available in five plans with the cheapest one charges you $49 per year for one site. $49 is not an expensive price at all given there are a bunch of features you will get, including form builder, theme builder, popup builder, and so on. The only issue with Elementor is that it offers no lifetime plan for the pro version. Some users prefer to pay once for a software although they have to spend more money upfront, rather than spending a yearly budget.

If you enjoy the editing experience of Elementor and don’t want to spend money on a yearly basis, there is Crocoblock as the alternative to Elementor Pro.

Meanwhile, Elegant Themes offer simpler pricing plans than Elementor. It only offers two plans: Yearly Access and Lifetime Access. Yearly Access means you need to spend money on a yearly basis to keep using Divi. While Lifetime Access allows you to get Divi (and other products developed by Elegant Themes) with a one-time purchase option.

Unlike Elementor which adopts the volume-based license, Elegant Themes allows you to use its products on unlimited websites. In other words, you can install Divi on as many websites as you want with one license.

The Verdict

It’s always challenging to choose a tool to create a website, especially if you want to create a website for clients. There are a lot of aspects you need to consider before choosing one, including features and price. Both Elementor and Divi Builder are two popular tools to create a website with WordPress. The two allow you to create a fully customized WordPress website more easily thanks to their visual editor. No coding skills needed. Even if you have programing skills, using a page builder like Elementor and Divi Builder is a smart decision as it will ease your job in getting a project done more efficiently.

From the feature perspective, Elementor is better than Divi Builder as it offers more features as you can see on the table below.

ElementorDivi Builder
Theme BuilderYesYes
WooCommerce BuilderYesYes
Popup BuilderYesNo
Form BuilderYesYes
Dynamic ContentYesYes
Custom FieldYesYes
Dynamic LinkYesYes
Animation EffectYesYes
Template LibraryYesYes
Responsive EditingYesYes
Actionable LinkYesNo
Full-Site EditingYesNo
Custom CSSYesYes
Custom FontYesYes
Custom IconYesNo
Role ManagerYesYes
Elementor vs Divi: Key Features Comparison

Although Elementor offers more features, Divi is a better-suited option if you prefer a simpler pricing plan, especially if you want to create multiple websites. You can choose the one according to your needs. The option is yours in the end.

How to Open a Video in a Lightbox in Divi (Two Options)

Divi is one of the most popular premium WordPress themes which comes with a built-in page builder — Divi Builder — to allow you to create a beautiful page in a visual way. Just like other page builders, Divi Builder also comes with an element (called module) to add a video. Unfortunately, the Video module of Divi Builder offers no default option to open the video in a lightbox. If you want to open a video in a lightbox in Divi, this article will show you how.

There are two options to open a video in a lightbox in Divi. First, you can install a Divi plugin. Second, you can add custom JavaScript and CSS code. We will cover them all here.

Opening a Video in a Lightbox in Divi without Plugin

Before getting started, we want to remind you once again that Divi Builder is available in two versions: a standalone plugin and an integral part of the Divi theme. This method works only if you use Divi Builder on the Divi theme.

First, go to Divi -> Theme Options on your WordPress dashboard. Open the Integration tab and paste the following code to the head field. Before pasting the code, make sure the Enable header code option is enabled.

The code:

<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('a.video_popup, .video_popup a').magnificPopup({
			type: 'iframe',
			mainClass: 'mfp-fade',
			removalDelay: 160,
			preloader: false,
			fixedContentPos: false
		});
	});
})(jQuery);
</script>

Still on the theme options page, open the General tab and paste the following code to the Custom CSS field. Click the Save Changes button to apply the changes.

The code:

* Custom Video Popup */
/* Popup Close Icon Tweak */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
	top: 0px !important;
	position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
    max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
    top: -50px ;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
    top: -50px !important;
}
.video_popup_lightbox .mfp-iframe-holder .mfp-close {
    top: -50px;
}
.video_popup {
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.video_popup a:before {
    content: 'play';
    cursor: pointer;
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 54.5px);
    z-index: 20;
    background-color: #fff;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0a2a3b;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.video_popup a:after {
    content: 'E';
    cursor: pointer;
    font-family: 'ETmodules';
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 47px);
    z-index: 20;
    background-color: #fff;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 40px;
    text-transform: uppercase;
    color: #0a2a3b;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.video_popup.no_icon:before,
.video_popup.no_icon:after {
    display: none!important;
}
.video_popup:not(.no_icon):hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
.video_popup:hover a:before {
    opacity: 0;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
}
.video_popup:hover a:after {
    opacity: 1;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
    font-size: 56.5px;
}
@media all and (max-width: 980px) {
    .video_popup a:before {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 10px;
    }
    .video_popup a:after {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 32px;
    }
    .video_popup:hover a:before {
        opacity: 0;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
    }
    .video_popup:hover a:after {
        opacity: 1;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
        font-size: 42px;
    }
}

Next, open Divi Builder editor and add the Image module. Go to the Advanced tab on the settings panel of the Image module. Open the CSS ID & Classes block and add the video_popup class to the CSS Class field.

Go to the Content tab and add an image on the Image block (the image will play a role as the video thumbnail).

Once the image is added, open the Link block and paste the URL of the video you want to add on the Image Link URL field. No need to enable the Open in Lightbox option.

A little note, the lightbox might doesn’t open when you click the image on the Divi Builder editor, but it does open once the page goes live.

Opening a Video in a Lightbox in Using Divi Supreme

Divi Supreme is one of the most popular Divi plugins. It adds extra modules to your Divi Builder, including the Supreme Button. The Supreme Button module allows you to add a video link and open it in a Lightbox. Divi Supreme itself is a freemium plugin. The Supreme Button module is available on the free version, so you don’t need to spend extra money.

First, install the Divi Supreme plugin. You can get the free version of Divi Supreme on the plugin directory of WordPress. Once the Divi Supreme plugin is installed, open the Divi Builder editor and add the Supreme Button module.

Add the button text on the Text block under the Content tab on the settings panel.

Next, open the Links block and paste the URL of the video you want to add on the Button URL field and enable the Open as Video Lightbox option.

That’s it. You can go to the Design tab on the settings panel to style up the button.

The credit for the codes we use on this tutorial goes to Divi Pixel.

4 Best Hosting Services for Divi

Web hosting is the main component you need to prepare before you create a website, other than a domain name. Choosing the right web hosting provider is a tricky task as hosting is one of the aspects affecting the performance of your website at large. Following the popularity of WordPress (in which over 40 percent websites are built with it), there are some web hosting providers that offer managed WordPress hosting plans. A managed WordPress hosting means that its infrastructure and server configuration are optimized to run WordPress. Still, some themes and plugins need more specific configuration settings to run optimally. If you want to use Divi on your WordPress, choosing a hosting plan that is optimized for Divi can be a better option to ease your job. Especially if you have no adequate knowledge in server configuration.

In case you haven’t used Divi before. Divi requires higher system requirements than most WordPress themes you might have used before as it is packed with a built-in page builder (Divi Builder). Also, Divi has a larger file size (8.45 MB) than other WordPress themes in average. So, the very first thing you need to do before you buy Divi is to make sure your hosting provider allows you to upload a file larger than 8 MB. If you have subscribed to a hosting plan that doesn’t allow you to upload a file larger than 8 MB, you can outsmart it by installing Divi via FTP.

Here are the minimum specifications of your server to run Divi (be it Divi theme or Divi Builder).

  • PHP Version – 7.2
  • MySQL Version – 5.6
  • memory_limit – 128M (256 recommended)
  • post_max_size – 64M (128 recommended)
  • max_execution_time – 180
  • upload_max_filesize – 64M (256 recommended)
  • max_input_time – 180 (600 recommended)
  • max_input_vars – 1000 (5000 recommended)

Best Hosting Services for Divi

Elegant Themes (the developer of Divi) partners with some well-known hosting providers to offer the best experience for WordPress users who want to create websites with Divi. The package of the partnership is called Divi Hosting. A Divi Hosting is technically a managed WordPress hosting but specialized for Divi. This means that the configuration of a Divi Hosting is optimized to run a Divi-powered WordPress site.

Using a Divi Hosting, you don’t need to install Divi yourself. When you buy a Divi Hosting package, you have a WordPress site with Divi preinstalled so that you can switch your focus on implementing your design and creating the content. A Divi Hosting package also offers automatic staging site to make it easy for you to develop a website without disrupting your visitors.

Here are three web hosting providers that Elegant Themes partners with.

Flywheel

Flywheel is a managed WordPress hosting provider owned by WP Engine. It is one of the great options if you are looking for a premium hosting provider to host your WordPress site. Flywheel is especially a great option if you are looking for a hosting provider that uses NGINX as its web server. Flywheel is one of the hosting providers that Elegant Themes partners with to offer a Divi Hosting package. The Divi Hosting plans offered by Flywheel starts from $15 per month for a single site. In addition to Divi optimized servers, Divi Hosting by Flywheel also offers the following key features:

  • Free SSL
  • CDN & caching (powered by Fastly)
  • Assisted migration
  • Staging environment

Flywheel is a great option if you are more comfortable working on a local environment when developing a new website before you make it live. Flywheel comes with a local development tool (Local) that you can use to develop a WordPress site on a local environment first.

Pressable

Pressable is a managed WordPress hosting provider owned by Automattic. As you have known, Automattic is a company founded by Matt Mullenweg, the creator of WordPress. Popular WordPress products like WooCommerce, Jetpack, and Akismet are owned by Automattic. So, if you are a fan Automattic products then Pressable is a great option for you. The Divi Hosting plans offered by Pressable starts from $14 per month for one site with the storage capacity of 10 GB. In addition to Divi theme, the Divi Hosting plans offered by Pressable also offers the premium version of Jetpack.

Here are the key features offered by Divi Hosting by Pressable:

  • Jetpack premium
  • Free SSL
  • CDN and caching
  • Assisted migration
  • Staging environment

If you need to access a certain file on your WordPress site, Pressable offers SFTP for a securer file access.

SiteGround

SiteGround is a popular enough web hosting provider. It claims to be used by over two million websites. SiteGround also offers managed WordPress hosting service. SiteGround is one of the Elegant Themes partners to offer Divi Hosting. Compared to Flywheel and Pressable, SiteGround offers the cheapest plan for the Divi Hosting. The cheapest Divi Hosting plan offered by SiteGround is $4.99 per month (discounted from $14.99) with storage capacity of 10 GB. SiteGround offers collaboration tools to allow you to collaboratively manage your client websites with your team. It also offers WP-CLI to allow you to manage your WordPress site via command line.

Here are the key features offered by Divi Hosting by SiteGround:

  • CDN
  • Free SSL
  • Staging environment
  • WP CLI
  • Team collaboration tools

Cloudways

Cloudways offers cloud hosting service for a wide range of CMS platforms, including WordPress. Recently, the company partnered with Elegant Themes to offer WordPress users — especially Divi users — a Divi-optimized hosting just like the first three hosting provider companies above. When ordering a hosting account in Cloudways, you can select where your website to be hosted. Whether Google Cloud, AWS, DigitalOcean, Linode, or VLutr. Cloudways comes with useful features like staging tool, collaboration tool, WP CLI, and realtime monitoring. Basic features like SSL and CDN are also available.

Here are the key features offered by Cloudways:

  • Cloud hosting provided by Google Cloud, AWS, DigitalOcean, Linode, and VLutr
  • CDN
  • Free SSL
  • Staging environment
  • WP CLI
  • Team collaboration tools
  • Real-time monitoring

The Bottom Line

Performance is the aspect you need to notice when creating a website. Especially if you are creating a website for client. Server configuration plays a vital role in determining the performance of your website. Ideally, you have a dedicated team (with adequate knowledge, of course) to take care of your server. When it comes to WordPress, you have a managed WordPress hosting option if you have not enough human resources to take care of your server. If you use Divi on your WordPress site, you have more specific option of hosting: Divi Hosting.

Divi Hosting is a managed WordPress hosting optimized specifically for Divi. By using a Divi Hosting (or managed WordPress hosting in general), you don’t need to optimize your server yourself in order to get a faster performance. Instead, you can focus on the site development (design and content). You can visit the official website of Elegant Themes to learn more about Divi Hosting.

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.