Elementor VS Divi: A Showdown (2020)

Authored By: James LePage
Published On: June 29, 2020

In this blog post we are going to be comparing Elementor vs Divi; discussing the features, user interface, performance, and third party ecosystems that surround them. By comparing both of the plugins, we're going to attempt to choose a winner which will be our recommended WordPress page builder.

Intro

As an agency, we have used both of these tools extensively. When we were founded (in 2017), our agency used Divi for the first year of building websites for clients. We then began building website using custom themes developed in-house.

In early 2019, we began using Elementor for around 50% of our websites built for clients. This post will compare the most recent versions of the two offerings, as well as our thoughts about both of these page builders and their use in WordPress website creation.

Because we haven't used Divi in awhile, we decided to download the most recent version of the plugin so we could accurately compare both offerings.

We are first going to discuss what both plugins do, the similarities and differences between the two, and then go into a deep dive on each offering. When discussing each individual plug-in, we're going to look at the pricing, features, design, ease of use, and 3rd party ecosystem surrounding the product.

Once we've compared both plugins, we're going to come back and determine which one offers users the most value for money. You can use the table of contents contained at the top of the post to skip between individual sections.

Divi and Elementor: Two Leading Page Builders

Both plugins are premium page builders. They allow you to visually create content in WordPress using drag-and-drop building, visual editing (so you can see the results in real time) and more. Both tools allow the option to integrate custom CSS, as well as edit responsively (within the editor you can change the screen size, and your edits will only apply to that specific device), undo redo and view history, and save elements and sections of your page globally.

The simplest description of these two builders is this: they are Photoshop for website creation, drag-and-drop, point and click, and you'll have a website.

Both page builders allow you to easily create pages and posts with premade modules (in the case of Elementor, these are called elements). These modules range from call to actions, to sliders, to basic text, to forms, and more. Using the visual editor, you can style these individual pieces accordingly.

Both plugins also come with a large library of templates and website packs. This means that you can download premade designs within the builder, and then change them to match your content and website styling. By using these template packs, you can save a lot of time when designing your website.

In late 2019, and into 2020, both of these products have morphed from a page builder plugin to a complete framework that allows you to design every aspect of your website. This includes creating headers, footers, sidebars, global elements, and more.

They are being marketed as the only tool you need to create a complete website, with everything from the header to global link color being easily styled from their visual editor.

Massive communities surround each of these offerings, with large Facebook support groups, tons of 3rd party add-on plugins, and large user bases.

Divi does not offer a free version, while Elementor has a free version and a pro version. In this blog post we're going to be using Elementor Pro to compare to Divi.

The company behind Divi is called Elegant themes. In addition to this product, they have also developed other plugins (both free and paid) that play nicely with Divi, which is their main offering.

Elementor is a standalone company with a standalone product. however, there are tons of free and premium third party add-ons and integrations for this platform as well, though all are developed by groups that are not affiliated with Elementor.

Both platforms have integrations with the leading third party plugins in WordPress, such as gravity forms, WooCommerce, and easy digital downloads.

A couple notes on both of these plugins/themes.

Divi Is actually two individual software pieces. the first piece is the Divi builder, which is a plugin. This builder allows you to visually create pages and posts in WordPress. The second piece of software is the Divi theme. The Divi theme integrates with the Divi builder, and Allows you to globally change options , such as fonts, buttons, and more.

However, you do not need to use the Divi theme with the Divi builder. The Divi builder will work with other themes. However, if you want to build a complete website using Divi, this can only be done with both the theme and the builder installed . This is intended by the developers, and when you purchase Divi, you get access to both the theme and the builder.

The same is true with Elementor, though the technicalities behind it differ from Divi. First off, there is a free version of Elementor, and a pro version of element tour. The free version gives you basic page building abilities, but is fairly limited period the pro version gives you complete access to all of the elements and settings the tool has to offer.

The pro version also allows you to edit headers, footers, and more. Like Divi, Elementor will work with third party themes, but to unlock the complete power of the tool, you will need to use it with the Hello Elementor theme. however, this theme simply acts as a canvas that you build in Elementor website on. The Elementor plugin itself contains all of the global styling settings and more.

The main difference between Elementor and Divi in this arena is that Elementor plays nicer with third party themes. It's not uncommon to hear of Elementor being paired with the ocean WP theme or Astra. However, Divi is it usually paired with a third party theme, instead it is paired with its own.

In this comparison, we will be using the Divi builder with the Divi theme, and the Elementor Pro builder with the hello Elementor theme.

Elementor VS Divi: The Stats

Before we get into the in depth analysis of each of these offerings, let's take a look at this quick comparison table that compares the pricing and user statistics of each of the page builders.

 ElementorDivi
Pricing$49/yr (check)$89/yr (check)
Money Back Guarantee30 Days30 Days
UsersAround 500,000 (though 5 million for the free version)Almost 700,000

Off the bat, you can see that Divi is more expensive than Elementor , though both are billed yearly. There are additional pricing plans that will offer you a lower per license price, which we will discuss in the respective sections. Both have a money back guarantee of around one month, which allows you to try the product out, and if you don't like it return it and get your money back. Divi has a larger paid user base, though Elementor Pro is rapidly catching up.

Now, let's take a look at each individual plugin And review the features, user interface, ease of use, and modules slash elements that each page builder has to offer. From these in depth reviews, we will try to choose a recommended page builder in our Elementor vs Divi standoff.

Elementor Pro

Pricing

Elementor Pro has three individual pricing plans.

All plans give you access to the same features, the only difference between them is how many websites you can run Elementor Pro on.

The first plan is the personal plan, which costs $49.00 per year and gives you a license to run Elementor on one site. While you are paying for the license, you get access to support, updates, and more.

The plus plan costs $99 per year, and gives you a license to run Elementor Pro on three individual WordPress websites. This brings your per license cost down to $33 per year. This may be a good option if you have multiple websites that you would like to use Elementor on, or if you are a small agency looking to use Elementor in three individual client projects.

The final plan costs $199 per year, and gives you access to a wopping 1000 site license. This means that you can install Elementor Pro on up to 1000 sites. again, you don't get access to any additional features, you just get access to a lot more licenses.

The expert plan brings your per license cost down to about $0.20. Obviously, this is an amazing deal, but it only makes sense if you are a large agency looking to use Elementor on many client web sites. Due to the most typical use cases, the personal plan is probably the one that you will be opting for, So for our comparison we're going to be using a base price of $49.00 per license per year.

With their licensing system, as soon as you stop paying for the license, You are unable to access any paid features, and the Elementor builder reverts to the free features. Your website will continue working, though you will be unable to create any new pages or posts with pro features.

Features

For $49.00 per year, you get access to 90 individual widgets (these are the elements that you will build your page with, such as a call to action, or a slider), 300 website templates, the ability to edit headers, footers, sidebars, and other theme elements, a WooCommerce builder (specific elements that pertain to WooCommerce, an ECommerce plugin in WordPress), a popup builder, and support and updates for one year.

Let's take a look at each of these individual offerings, and then head to the back end of the plugin To check out the user interface and ease of use.

90+ Widgets

This plugin has many widgets that will help you build your website and customize it as you want. You can head to their website and check out the individual widgets that they offer, but let's cover some of them here.

Both the posts and the portfolio plugin allow you to display content types on your WordPress pages. You can easily choose the queries (such as taxonomy, author, or date range).

The form element allows you to build responsive, multi step forms while giving you a lot of “after submission options”. you can easily integrate this widget with MailChimp, GetResponse, and other third party Tools. It allows you to also visually style the form, and build it directly in the Elementor editor. In many cases, this removes the need to purchase a third party plugin such as gravity forms.

Additional plugins include a price table, social sharing buttons, reviews, a Facebook page embed, and a widget that allows you to display Lottie animations.

The sheer number of widgets cuts down on the third party plugins that you will need to use to build your website. If you were not using a page builder, you would need to get an individual form plugin, review plugin, Gallery plugin, table of contents plugin, and more. Elementor has all of these individual elements and more, meaning that you won't need to spend money on 3rd party offerings.

When creating your theme, you can edit the header and footer, as well as specific post type templates. For example, if you are looking to create a template for your blog posts, you can do that with the following elements:

If you are creating a WooCommerce site, Elementor Pro has tons of elements for that as well. These range from an add to cart button, to product data tabs, to a menu cart. With these elements you can easily create product archives, as well as single product posts in Elementor.

By using a combination of all of these widgets, you can easily create headers, footers, WooCommerce posts, traditional content like pages and blog posts, theme templates that apply to specific posts and elements, and more.

In addition to all of the post content types that you can edit, Elementor has a fully featured popup builder. This builder allows you to set the conditions that will trigger the popup to display, as well as visually build the popup with any element that can be used on the main website. For example, you could create a pop-up for a form, product, or more.

Elementor Popup Builder [Review] - Top Features & What's Missing.

Third Party Addons

If you are unable to find a specific feature or functionality in the base version of Elementor Pro, then there are a ton of 3rd party add-ons that you can use to extend this product. In the WordPress plugin repository, there are hundreds of free options that you can use to extend the tool, from form databases, to gravity forms styling, to more.

To extend the number of elements that you have access to, there are free and paid add-ons whose sole purpose is to give you well designed elements. There are also add-ons that specifically focus on workflow tools for agencies and designers like Designer Powerup.

Now that we've covered all of the elements that are included with this page builder, let's go take a look at the back end and review the actual design, user interface, and ease of use of the Elementor editor. We're also going to take a look at the global settings that this tool has to offer.

Elementor Backend Settings

From the back end, you have screens to add custom fonts, custom icons, and more. You can also manage roles, and the level of access that they have to the tool.

You can also add the API keys for many integrations, which include everything from ActiveCampaign to MailChimp to Facebook to reCAPTCHA.

These are fairly general settings, and it is intended for the user to edit global settings, page settings, and build the pages from the actual editor interface.

On the back end, you also have access to the templates. Here, you can save sections to easily be inserted into other pages, save pages to easily duplicate, and more. You can also create and edit popups on the website, which we discussed in a previous section, and access the theme builder.

The theme builder is what allows you to create individual templates for specific post types, as well as headers and footers.

When creating a template, you add specific sections that are dynamically populated with content from the post type. For example, if you're building a template that applies to all blog posts, you set up and style a heading which displays the title of the post. When the template is applied to the specific blog post, it is dynamically populated with the title of that individual post.

You can build templates for all post types , such as blog posts, pages, and more. You can also create archives, headers, and footers. You apply templates to specific categories and taxonomies With display conditions.

In our opinion, this is what makes the tool super powerful. This is because you can easily custom design (With the visual builder) every single aspect of your website.

Editor Design and User Interface

Now let's take a look at the actual page editor that you'll be using when it comes to creating templates, posts, pages, and other aspects of your website.

While the loading time of the Elementor page builder depends on the hosting that you're using, it takes around 3 to 5 seconds to initialize for us (on high performance enterprise level cloud hosting from Cloudways). We feel that this is an important thing to note because if you were creating many pages over the span of months, these seconds will definitely add up.

Once initialized, you can create your page with sections, columns, and the individual elements. After creating the overall structure of the page, you drag elements into the canvas, and style them accordingly.

For example, if you click on the heading element, you can change the text directly, or you can fine-tune various settings on the editor bar on the left. The editor bar has three main sections for each element, which contains the content, styling (which basically visually styles individual aspects of the element), and advanced settings which allows you to manipulate padding, margin, and add custom CSS.

The editor is also designed to use dynamic elements very easily. For example, you can populate most text, and images dynamically. If you have text or images contained in a custom ACF or Pods field, you can easily call it in to your specific page. This is an extremely powerful feature that will allow you to expand your website however you feel fit. Because you can now add custom fields with ACF and natively integrated with Elementor the expandability is virtually endless.

From this interface, you can also Change the global default colors, fonts, and theme styling. Additionally, you can change the general page settings , edit responsively, and view all history and revisions.

It is pretty clear that Elementor intends for you to use this editor for the majority of your website design. While you do have several back end settings, this is the main User interface of the plugin.

You can also easily import templates, by simply clicking a button, browsing the library of templates available to you (you can import third party assets) and clicking a button to install it on the page.

Ease Of Use

Both the back end settings, and Elementor editor are fairly easy to use. The design Is very easy to understand, and is laid out in a way that ensures that you are clicking on the right thing. For some, the actual settings and inputs may be a bit small and there is no way to increase the size of them. Additionally, each element has a ton of individual settings. This will allow you to build anything that you want, and style it accordingly, but may be a bit confusing to a first time user who is never dabbled with a tool like this before.

There is both a dark mode and a light mode, where the dark mode is based off of a black and grey color scheme, while the light mode is based off of a pink and white color scheme.

All in all, this is a very powerful tool with many settings, designed to be as simple and easy to use as possible. We like comparing this to Photoshop, where you get a bunch of settings, which will allow you to do many advanced things, but you will need to learn how to use the platform to unlock its full potential.

Support And Documentation

The Elementor documentation is extremely well written, and contains video tutorials on how to do basic things with the platform. There are also tons of videos on YouTube (you can check out our channel) That discuss all sorts of things, so chances are if you have a question, you'll be able to find video tutorials and articles on how to do exactly what you're looking for.

For third party support, the official Elementor Facebook group is a great place to get started. You can ask any question you have, and chances are it will be answered in a matter of minutes. The community around the product is extremely supportive of advanced users, and beginners alike.

The official support of Elementor leaves something to be desired. Keep in mind, that because we are an agency we do not need to use support typically and are able to figure things out on our own. The information contained in this paragraph is only supported by anecdotes, and things we have heard from other Elementor users (Specifically on the unofficial subreddit). it seems that Elementor support is taking longer and longer to get back to users. From what we understand, the support could definitely be improved regarding both their response speed, and helpfulness. (It sounds like these issues became more prevalent after Elementor received over $15,000,000 in venture capital funding).

From an agency POV, there are several outstanding GitHub requests to either improve the speed of Elementor, have better support for web P images, and fix minor issues which have gone unanswered by the core development team. This is unfortunate from our standpoint, as these improvements would lead to a better product, but nothing mentioned Related to the GitHub requests should have a major impact on an average user.

Summary

To summarize the Elementor tool:

it is a well designed, fully featured tool that allows you to build a complete website from scratch. It offers a ton of individual elements, allows you to edit everything from a page to a content template, can be applied to WooCommerce, and has a host of 3rd party add-ons that extend the functionality of the platform.

At the same time, because it is so fully featured, there are a bunch of settings which may be confusing to first time users. The tool does its best to lay the settings out in an easy to understand manner, but will still require some learning on the users part.

There are great support communities and a well written documentation so it shouldn't be hard to quickly get the hang of the tool. At the same time, if you have any major support issues, it looks like the official channel is a bit slow to respond and not always helpful. Keep in mind, this is not from our experience - instead this is from other users anecdotes.

This is the first section of our Elementor vs Divi stand off. Hopefully it should have given you a good understanding of what the Elementor tool is, and what it has to offer to you. Now, let's take a look at the Divi offering. We're going to review it in the same manner as we reviewed Elementor, so we can compare the two page builders at the end of this article.

Divi

Now it's time to take a look at the Divi builder. Again, when we refer to Divi, we are referring to both the theme, and the builder plugin. Remember, you need to use the two in tandem to unlock the full features of this tool.

Pricing

Divi Has two payment plans. The first plan is a yearly access, which comes in at $89.00 per year. The second plan is lifetime access, which is a $249 payment. Both offer unlimited licenses, which means you can use the tool on as many websites as you want regardless of your plan.

Features

Out of the box, the Divi tool has 40 plus website elements. These range from call to actions, to sliders, to post displays, to forms. Each individual element is editable by the Divi builder, where you can change everything from the makeup to the styling.

There's good support for WooCommerce, as they offer many elements that allow you to build individual product pages, layouts, archive pages, and more.

The tool also has 100 plus full website page packs. The templates aspect of this tool is very well integrated, and you can easily add a pre built page or website through the click of a button.

There's a large third party community surrounding this tool, that offers everything from plugins, to element add-ons, to additional templates.

Included Plugins

Unlike Elementor, Divi has additional plugins that come packaged with it. These are well designed, and commonly referred to as industry-leading in their specific niches.

Bloom

This is an email opt in plugin that displays subscription forms in Multiple ways on your website. You can choose to have a pop up email subscription form, in line form, sidebar form, and more. There are several features that you can find 2 in to specify when The opt in is triggered, such as a timed delay, or an exit intent pop-up. This tool integrates with many third party providers such as MailChimp or GetResponse.

Monarch

This is a social sharing plugin That adds buttons from many of the leading media networks to your website. For example, if you want to enable your users to share the post on Facebook, Twitter or Pinterest, you use this plugin to do that. It specifically integrates with Divi, but also works on many other themes and WordPress sites.

Extra

Extra is a theme that is specifically built for Divi news sites. When you install this theme, the builder gets extended to categories by being given post based modules. Additionally, you get a post and page builder, as well as other content specific features like ratings and reviews.

While you can build A blog/content site with the basic Divi theme, Extra is purpose built for websites that have many posts, categories, and more. We have noticed that the underlying structure of Extra is very identifiable. What this means is that if a user stumbles upon your website, and they are familiar with the Divi offering, they will probably know that your website is using that theme.

Backend Settings

Most global settings (when using the Divi theme) are set from the traditional WordPress customiser interface. Here you can change the styling of most elements, from sliders, to Dividers.

docs image

The Divi theme builder allows you to create templates for specific sections of your website. You can specify where the templates are applied, and exclude them from taxonomies and specific pages.

You can visually build headers, footers, and more.

You can also set the display conditions to apply to specific types of content.

To edit these specific layout of individual pages, you need to load the Divi builder/editor.

Editor Design And User Interface

The Divi editor takes around 5 seconds to load on high powered hosting. once loaded, the interface displays the full page with no sidebar. To edit individual elements, you need to hover over them and a small interface will appear. From here, you can edit the individual element, drag and drop it to a new location on the page, added to a library, or delete it.

When editing the specific element, A draggable window appears above the page that contains all of these settings. You can modify this window to snap to the left of the page as a traditional sidebar editor as well.

While the settings change for each individual module, the three tabs do not. From the window, you can edit the content, design, or access advanced features.

The content tab allows you to change the make up of the individual element. For example, if you are changing a button, the content tab will allow you to change the text that is displayed on the specific button.

The settings tab allows you to change the color, style, and size of the element.

Under the advanced features, you can change the CSS, And additional attributes such as scroll effects.

The editor also allows you to view the specific elements that make up your page. This is a really neat integration into the builder, because you can easily understand the structure of your page, and drag specific things around without having to deal with the visual aspect of things.

We spent around one day with Divi experimenting with all of the features it had to offer. In this period of time, we encountered some bugs which were worrisome. For example, the theme builder (which is a relatively new integration to the platform) didn't work on some specific pages, and when we tried to apply it to specific taxonomies, It sometimes simply didn't work.

However, most of the time it did work and because we only spent a small period of time with it, we can't draw any major conclusions when it comes to the stability of the platform.

Ease Of Use

Divi is very well designed and easy to use. They have tons of settings, though they are presented in an easy to understand manner. Because this is a very powerful tool with many features, there multiple nuances that will take some time to learn.

However, the layout of the settings, buttons, and design of the actual builder is pretty simple to use. There's also a nice search option where you can search for the feature that you need to edit (Such as transitions, or custom CSS).

Support And Documentation

With Divi, the documentation leaves something to be desired. While it is there and it contains information on many things, it could be difficult to understand for a beginner user, and leaves out information that relates to important things. They do contain YouTube videos, but we've found that they don't cover every single task that can be done with Divi. It looks as if the development team and support team are not on exactly the same page, as there are some features that have virtually no documentation.
We have not used Divi support, but from third party users, it looks like they answer pretty quickly (sub 24hrs).

Summary

Divi is extremely well designed and easy to use/understand. There are many features of the platform that are purpose designed to make the website creation process a lot easier, from the simple to understand layout, to the structural view of the page.

The newer versions of this tool allows you to build every element of the website visually, and applied templates to specific parts of your website. However, in the short time that we used the most recent version of this tool, we experienced some bugs such as issues with the theme builder and slow loading front end pages.

Elementor Vs Divi: Our Recommendation

Hopefully our reviews of the two leading page builders for WordPress gave you a good understanding of the features they offer, and helped you compare and contrast the two builders. Now, let's get into the recommendation Of the product - first, we're going to compare the pros and cons of each of them.

Elementor has great support for creating all aspects of a WordPress website. While it is referred to as a page builder, we consider it more of a theme builder, because you can create headers and footers. The functionality for creating templates that apply to single posts, and more is extremely robust and stable. The tool is pretty inclusive of all of the features that you would need to build a website, from forms to popups , and could save you from having to go out and purchase additional plugins (Specifically relating to the pop up builder which is one of the best in the industry).

At the same time, Elementor has a pretty major learning curve due to the power and flexibility that it offers the user. Furthermore, the official support and responsiveness to suggestions (at least from power users, agencies, and developers from the GitHub repo) could definitely be improved.

We believe that Divi has a little bit of a nicer design, which may lead to a faster learning curve. In its most recent major version update, the tool added the functionality of visually creating headers, footers, and page templates.

Divi also offers a lifetime license, which is more economical in the long term. However, there were concerning disconnects When it came to the documentation an actual features that the tools had to offer.

It seemed that the documentation was lacking for many newer features, which may make it more difficult to learn the platform. Compared to the Elementor documentation, Divi really needs to step its game up. There were also some bugs that we experienced, and appan further research, it looks like other users experienced the same problems. Specifically, we had issues with the theme builder, and visual header and footer builder (Which are new integrations). the editor, while very well designed, was a bit clunky and slow.

This was the main reason we ended up moving away from this builder several years ago, and it looks like these same issues persist even After two years. Divi also has no robust support for dynamic elements from Pods or ACF.

Because of the reasons we outlined above, we believe that Elementor comes out on top of our Elementor Vs Divi showdown.

The platform is more stable, and also offers more advanced features. This is the main reason that we haven't switched back to Divi since leaving the platform two years ago. We believe that both plugins have their drawbacks, but at the end of the day Elementor comes out on top as the best page builder For everyone from beginning users to advanced developers (We hold this opinion when comparing the platform to every other page builder as well, such as Beaver Builder or WPBakery).

Especially if you're trying to build a complete website from scratch, the theme builder that comes with Elementor is much more stable, has more features, and is simply more powerful than the Divi offering. We believe that this is because Divi recently integrated this feature after feeling pressure from Elementor, while Elementor has had this feature for awhile.

Many people have made this comparison on-line, and we're going to agree with them: Divi is very similar to Apple (sleeker), while Elementor is similar to android (more expandable, and almost comparable to the simplicity that Apple/Divi has to offer).

When it comes to support, it looks like Divi’s official support is a bit quicker to respond, but the third party communities surrounding the platform is smaller then Elementor.

Keep in mind that both platforms offer a 30 day money back guarantee, so if you're leaning one way, you can definitely try it out on your own, see what works for you, and if you experience any issues you can easily return the product. If we were an individual user looking to purchase one of these platforms for the first time (and had the cash to do so) we would get a license to both Elementor and Divi, try everything out for several days (this would let us see if there were any major bugs that would impact our website in the future), choose one, and return the other.

Elementor Website | Divi Website

If you have any questions about this review, or anything related to Elementor or Divi, feel free to let us know in the comments below. We will answer your question to the best of our abilities, or point you to some resources that could be helpful!

We hope that this article effectively compared Elementor Vs Divi for you! Keep in mind that these are our own opinions, and you should definitely read more into each of the plugins.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Viraj Thakur
Viraj Thakur
15 days ago

Which of those page builder is best for technical SEO factors like page speed,etc. ??

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.