Web Development: Divi vs. Elementor: WordPress Page Builders Compared

Tuesday, July 14, 2020

Divi vs. Elementor: WordPress Page Builders Compared

Let’s talk about the pros and cons of using the Divi vs. Elementor WordPress page builders. Divi and Elementor are two of the most popular page builder options available and if you’re just getting started with this kind of tool you’re probably wondering which is best for you.

We’re going to look at the differences between the two, the similarities, and hopefully by the end you’ll be able to decide which is most suitable for you.

Divi or Elementor?

Watch this video for even more detailed analysis of which WordPress page builder is right for you. Follow along with us over on our Envato Tuts+ YouTube channel:

How We’ll Compare the Two

We’re going to use 4 categories to compare these two WordPress page builders:

Interface and User Experience
Modules
Premade Templates
Price

At the very end I’ll also give you my personal recommendation. So let’s look at Divi vs. Elementor!

1. Interface and User Experience

Both Divi and Elementor are visual drag-and-drop tools, which makes them really easy to use. Let’s start by opening up a page with Elementor. Here’s what we see straight away; an option to edit the page with Elementor:

That will trigger a sidebar with all my Elementor options. To add an element to the page, find what you‘re looking for in the sidebar and drag it into position, like so:

drag heading — Dragging a heading element into position

In this case, we can type directly into the heading element on the page, or we can change any properties we like in the sidebar. This applies to all elements, in various ways.

In Divi, the page prompts you to edit it in a similar way:

Will that clicked, we enter the editor. At this point it’s a little different from Elementor: to add an element we click on the plus icon like so:

This then opens a popup window with all the available modules:

Choose the module you’re looking for, click it, and that will open another popup with all the various options and properties. This particular popup is floating, but you can click the Snap to Left button on it to dock it to the left of the screen, in a similar fashion to Elementor.

Once you’ve added a module/element to your page, to edit it again you need to hover over it and hit the settings (gear icon) button.

User Experience

In terms of the overall experience, in my opinion, Divi’s page builder seems a little more intuitive, easier to use. All the modules can be edited quickly, dragged and moved, and have lots of options easily to hand.

Divi’s color-coding makes things very clear too; the sections, rows, and modules all have color-coded controls and borders, so it’s easy to see where you are in the layout. Elementor lacks this visual cue, which is a shame I think.

Divi also offers a really easy way to alter the padding and margins on parts of the page. Hover over a section, row, or element, and you’ll see the margin and padding highlighted. Drag the highlighted area to change its size, and that’s all there is to it:

Similarly, you can change the minimum height of the module, section etc. by dragging the border.

This is all possible in Elementor too, but needs to be done in the settings panel of whatever you’re editing.

2. Modules (or Elements)

Here’s the thing: Elementor has slightly more modules than Divi, even in the free version. We’ll discuss pricing in a moment, but Elementor Pro has even more elements to choose from.

Additionally, by installing the Essential Addons for Elementor plugin you gain access to even more free elements.

Plugins to extend the amount of modules are also available for Divi, but not so many.

supreme modules lite — Supreme Modules Lite

If we were to compare the two page builders from a modules point of view, I would say Elementor takes this round.

3. Premade Page Builder Templates

Premade page templates are a huge timesaver when designing a website. Currently, Elementor includes around 40 free templates, doubling that amount in the pro version.

To access the templates, edit a page in WordPress then hit the Add Template icon:

You’ll get a popup showing all the available templates, and there will be some tagged with PRO which are only available with the paid version of Elementor. Learn more about this process with the following tutorials:

Divi, on the other hand, has around 170 Layout Packs on offer (at the time of writing) with more added each month.

These Layout Packs (more than just templates) are a little different, so to see what I mean by this, go to edit a page and select the Choose a Premade Layout option.

As you’ll see from the packs which are on offer, a layout pack is built of several page designs, not just one. Take a look at this restaurant layout pack, for example. You’ll see it comprises several pages, and a range of layout options.

This is a big improvement on the simple templates available with Elementor, though Elementor does have something called Template Kits which are available in the pro version.

Another big advantage to using Elementor is its use of Blocks.

These are very simple, very small, blocks of elements. For example a hero area, or a contact form, a pull quote, and they’re all editable once you’ve slotted them into your layout.

A/B Testing

Divi offers one other layout bonus, and that’s A/B Testing. You can select two layouts for your page, apply them both to different variants, and test the effectiveness of each one.

So when it comes to premade templates I believe that Divi has the better offering, largely because of the layout packs, which are awesome.

4. Prices and Licensing

Now onto pricing (bear in mind prices are subject to change), and this is where the choice between the two might become very clear for a lot of people.

Starting with Elementor, we covered the free version already, and going pro will cost you $49, $99, or $199 depending on the number of site licenses you want. At $199 per year, 1,000 sites should have you covered if you’re working for clients. Again, the free version is a great bonus.

Divi, on the other hand, doesn’t have a free version. Prices start at $89 per year for a fully featured license, or $249 will grant you lifetime access. So even though you always need to pay something, I would personally say that the two pricing tiers on offer for Divi are excellent value.

Conclusion: Divi vs. Elementor

So which of the two page builders would I recommend you use? I would say that if you’re just starting out and want to learn about using page builders, go for Elementor. Its free version means you don’t have to spend a time, and can just dive right in.

If you’re planning to take things more seriously and use a page builder over the long term, I’d say Divi offers better value and a richer selection of features.

This is my personal opinion though, so bear in mind it’s always worth taking a look yourself. And if you’re in need of more detail, take a look at the video at the top of the page.

Thanks for reading, and let us know in the comments which is your preferred page builder for WordPress!

Useful Resources

Elementor
Divi
Elementor Template Kits on Envato Elements

Web Development