If you're familiar with WordPress, you've already heard about these two behemoths. In this article will be comparing two of the most popular WordPress products: Elementor vs Divi. Both of them have a proven track record, so which one comes out on top?
As a web designer, but even more as a website owner, we want the power to be able to simply design our custom web pages, with drag and drop ease. WordPress page builders let users create professional-looking web pages without writing or knowing how to write a single line of code. Because of this, page builder have grown massively in popularity and as a result, many developers and companies have started producing a page builder of their own...
While there many of them today, only a few have made it to the top - some have already gone into oblivion (even those from large companies - a notable example is the now-defunct WPMUDEV Upfront).
So making the right choice for your website is critical - after all, you don't want your choice of tool to be dead and buried within a few months or years, leaving your website with an unsupported product.
These two choices are favored by most WordPress users and experts because they have a wide selection of features, they have the best performance and stability, and they are backed by a team of expert WordPress developers or by a well-known company.
Still, page builders vary quite a lot, and both of them have things that may not be ideal for your specific circumstances.
We’re going to take an in-depth look at their UI, feature set, pricing, and much more.
By the end of this article, you will have all the knowledge you need to make an educated judgement of which one suits your own needs, you'll know how they work, what they look like, what comes with the bundle, which one of these two popular page builders makes most sense for you, and anything else you need to know.
This will help you make an informed decision on which one to pick, or if you should consider other page builders instead.
Let's jump right in!
Elementor vs Divi
Elementor and Divi both have excellent design features. Elementor is free but has a PRO version costing from $49. Divi costs $89 per year or $249 for lifetime access but can be used on an unlimited number of sites. Divi is user-friendly but Elementor is faster to work with.
|Price||Starts from $49||Starts from $89|
|Free Version||Yes||No - but has a 30-day money-back guarantee|
|Frontend / Backend||Both||Both|
|Drag and Drop||Yes||Yes|
|3rd party elements supported||Yes||Yes|
|Frontend / Backend||Both||Both|
|Import / Export||Yes||Yes|
|Target Audience||Developer / Designer / User / Agency||Designer / User / Agency|
|WordPress Widgets support||Yes||Complicated|
|Pre-made templates / layouts||300+||140+|
|Cool Feature||Dynamic content||A/B testing|
|What we liked||A very powerful solution for creating any type of design||Clean user interface|
|Superior layout management options||Content remains intact even after deactivating the plugin|
|Attractive pricing with access||Unique editor mode for clients|
|Most popular page builder for a reason||Allows you to use WordPress widgets in the layouts|
|What we didn't like||Some code remains after removing the plugin|
|Ease of Use||5/5||4.5/5|
|Stability and Reliability||5/5||4/5|
||Visit site (10% OFF)|
Now that you have a quick overview of each plugin, let’s take a deep dive into them. We've researched plenty of aspects, so feel free to scroll and jump to the sections that interest you.
Let’s get started!
What are Page Builders?
We'll start our Elementor vs Divi article with a bit of an intro of what a page builder does.
For those unfamiliar with page builders, they are drag and drop tools enabling users of all levels to build and design professional-looking web pages, or, in some cases, even an entire website from scratch, with ease.
For example, check out this 1-minute video about how and why Elementor was designed and some of its capabilities:
The typical workflow is to choose a page layout, then add, drag and drop a website element to position it, edit the properties of the element, change colors, spacing, etc and its done.
It's like building a website using Lego pieces.
They’ve become very popular because they’re easy to learn and anyone can get started building pretty and professional web pages quickly. It would probably take most first-time users less than a day to be able to fully utilize a page builder.
While a page builder mostly targets users without coding knowledge, even web designers are using it to help them finish a website very quickly. Many page builders come with advanced tools and extensibility allowing professional web designers to create unique and professional web pages miles faster than when doing it from scratch.
Page builders have built-in tools that allow users to create sections that can be divided using rows or columns. Inside these rows or columns, various elements like images, text, paragraphs, and even HTML code can be placed. Each of these elements can be styled separately.
As a quick introduction, Divi is the star product from Elegant Themes, one of the biggest vendors in the WordPress industry. Having been around WP for donkey's years, they know how to do things right. They've also amassed a huge devoted following and more than 550,000 customers, and counting!
We've worked with this product for a long time, in fact, we've already written a complete Divi 3.0 theme review here. Their Divi builder is a plugin which is built-in and bundled with the theme, though it can be purchased and used separately with other themes, should you want to.
Elementor is the new kid on the block. They have only been around for a couple of years or so, but have enjoyed stratospheric growth - literally, their growth is viral, going from 500,000 installs to 2+ million installs in a matter of months. They have taken the world by storm and the raving reviews and fans they have are a testament to the great quality of the tool they have produced.
We've also dug deeply specifically into Elementor Pro - you'll find our review here.
In the next section, we’re going to take compare Divi vs Elementor’s user interface - i.e. how easy it is to build websites using both of these tools.
Ease of Use
The user interface is one of the most important parts of a page builder plugin because this is where you will spend the majority of your time working. You can either choose one that suits your needs and preferences or if it doesn't suit you perfectly, then you'll have to get used to it...
We’re going to walk through their UIs and the available settings that we can configure.
Let’s start with the Divi Builder.
Divi Builder User Interface
Before we begin, let's what the vendor has to say about using the plugin in this short video, particularly with the newly revamped interface:
With the Divi builder plugin installed, when you create a new page, you will be greeted with a UI that will ask you if you want to “Use Divi Builder” or “Use Default Editor”.
Clicking on the Use Divi Builder option will open up a screen that asks you to choose between “build from scratch”, “choose a premade layout” or “clone existing page”.
- Build From Scratch - you will start with a blank page.
- Choose a Premade Layout - will let you choose from a selection of pre-made templates. We'll speak about this in more detail later on.
- Clone Existing Page - pretty self-explanatory, basically copies an existing page to the page you are currently working on.
We’re going to choose the “build from scratch” option since the other two choices are pretty much the same, only with content already added. This will allow us to focus more on how the Divi builder interface works and what it looks like when using it to design pages and sites.
Clicking on the “build from scratch option” will fire up the Divi builder and the first thing that will show up is a dialog box asking you to insert a new row.
After choosing a row layout, there will be another dialog box that lets you choose a module to put into one of the columns.
Selecting a module will then open up another dialog box with options that you can configure. The options change depending on the module and content. We’ll cover more about modules (which we are going to mainly refer to as elements) later on in the article.
The Divi builder user interface is minimalistic. Minimalism has always been one of the design features of Elegant Themes and the page builder keeps this design concept going.
As you can see from the gif above, there’s no sidebar or menu bar at all. Instead, all you have is a floating circle with three white dots inside it.
The floating circle with three white dots is what acts as your menu. Clicking on it will let you access various options and useful tools.
You can move this menu around by clicking and dragging it. You can drop it into one of the eight pre-defined positions on the corner of the screen.
Let’s take a deeper look at the content of this floating menu. Starting from the left-hand side, we have
- builder settings,
- wireframe view,
- zoom tool,
- desktop view,
- tablet view,
- load from library options,
- save to library option,
- clear layout,
- page settings,
- editing history,
- the search and help button,
- and the save draft and publish buttons.
How about a deeper look at each of them?
Builder Settings - in this menu item, you can configure various page builder settings. Clicking it will bring up a dialog box with different options that allow you to customize which icons appear on the toolbar, change the default view mode (mobile, desktop or tablet), enable or disable UI animations, etc.
Wireframe view - clicking on this item toggles wireframe view on or off. You can use the wireframe view to have a structural view of your page.
Zoom tool - lets you zoom the page in and out.
Desktop, Tablet, and Mobile view - allows you to preview how your page looks like on different devices and screen resolution.
Load from library - allows you to insert or use a premade template from the template library to the page.
Save to library - allows you to save the current page to the template library.
Clear layout - deletes everything on the page.
Page settings - lets you access the page’s settings like the title, excerpt, featured image, etc.
Editing history - you can view from here what changes were made in the current editing session. Clicking on an item allows you to go back in time, undoing all edits you’ve made and reverting the page’s state. Keep in mind that your editing history will only display edits that were made in the current session and once you close the editor, these items will be lost.
Portability - if you want to import or export your current layout, you can do so by clicking this item.
Search and Help buttons - allows you to access Divi’s documentation; the search button lets you search for a specific action, menu item or element.
Save Draft and Publish buttons - pretty self-explanatory.
Element Specific Menu
When using the Divi builder, if you hover over an element, another set of menus is displayed. These menus allow you to configure a specific element’s settings, such as its content, its layout or adding a custom CSS to it.
Divi Builder in Action
Below is a gif that shows you what editing a page via Divi builder looks like. As you can see, you can use the page builder to drag elements around to reposition them, or you can double click on a text to perform inline editing, etc.
And that’s pretty much it for the basics of Divi builder user interface. It’s quite clean and simple but has all you need to get things done.
The Divi Builder’s UI is minimalistic. It doesn't overwhelm you at all, keeps you focused on your designs. It presents a fullscreen experience. However, this means that adding new elements may sometimes require a lot of clicking.
What’s unique about its UI is the ability to switch to wireframe view and front-end view seamlessly.
This is useful, especially for large pages since you will be able to move elements around more easily. Also, in the front-end view of the Divi builder, moving elements around especially if the page is already full of content tends to be a bit laggy. Switching to the wireframe view eliminates the lag.
Finally, using the wireframe view it is much easier to access element-specific menus because they are always visible.
Now that we’re done with the Divi Builder, let’s take a look at Elementor's UI.
Elementor’s User Interface
Elementor’s UI is drastically different. If Divi focuses on minimalism, Elementor focuses on accessibility.
We'll use this section of our Elementor vs Divi comparison to focus on the differences between the two.
Elementor uses the concept of building blocks, which are used to build each page in several "sections". Have a look at the following 1-minute video which explains exactly how this works:
Creating a new page with Elementor active will bring you to WordPress’s default editor. To start editing the page, you have to click on the “Edit with Elementor” button located on the upper part of the screen, to bring up the Elementor page builder.
Clicking the button will open up Elementor’s UI which is composed of two parts: the sidebar and the page preview.
You can hide the sidebar by pressing the small icon shown in the gif below:
Hiding the sidebar allows you to have a full-screen preview of your page. Keep in mind that you can’t edit anything while the sidebar is hidden.
To add an element to the page, simply drag and drop one from the sidebar to the page.
In Elementor, upon dragging and dropping an element, the sidebar will change to display options that are specific to the element that was just added, as you can notice from the gif above.
The red plus button and the folder icon in the page preview lets you add a new section or load a template from your library, respectively.
After dragging and dropping an element to the page or after selecting an item on the page, you might want to go back to the element selection panel, however, you might notice that the side is now displaying options for the selected element instead.
To go back to the element selector panel, you can click the square tiles icon on the upper right corner of the sidebar menu.
Upon clicking that icon, you’ll be able to go back to the element selection panel. You can now drag and drop another element from here to the page.
The sidebar is divided into three parts.
- The upper menu,
- the body, and
- the lower menu.
The upper menu contains general settings, the body shows info about the currently selected element and the lower menu shows additional settings that you can configure. Let’s explore each of them further.
The upper sidebar menu of the Elementor page builder is the three horizontal short lines in the upper left corner of the sidebar. Clicking this lets you configure default styles and fonts settings, color picker, etc.
There are other various items accessible in this menu aside from styling options.
There’s a search function, a link to Elementor’s settings page and more. You can also find here the button that you can use if you want to go back from Elementor to the WordPress dashboard: the blue exit to dashboard button.
At the bottom of the sidebar, you can see additional menu items.
From left to right, we have the settings, navigator, history, responsive mode, preview changes and the publish button.
The publish button has its sub-menu that you can access by clicking the small upward arrow beside it. Clicking it brings two additional saving options: the save draft and save as template options.
Let’s go through each of them quickly.
Settings - the gear icon located at the leftmost of the bottom menu. It contains settings for the page you’re currently working on.
Here, you can edit your page’s title, add a featured image, change its publish status (draft, scheduled, published), change its default layout, etc. You can also notice the presence of two additional tabs: the style and advanced tabs.
In the style tab, you can configure the page’s body style settings. You can define a background color or image and you can also change the padding.
And in the advanced tab, you can add your custom CSS.
Navigator - allows us to see a hierarchical view of the elements on the page. This is comparable to Divi’s wireframe mode. The navigator, however, is only a floating menu representing your page’s element hierarchy. You can rearrange elements using the navigator too, although it's functionality is not as good as the wireframe mode we've seen above in the Divi builder.
The main purpose of the navigator is, as the name implies, to help you navigate around your page in a much easier way. This is very handy especially if you have a complex page with tons of elements in it.
History - where you can see your editing history. It allows you to revert to a previous version of your edits. Keep in mind, however, only edits of the current session are saved.
There is one thing that separates Elementor’s history feature from Divi’s, and it’s a big one, making the history feature miles better.
If you’ve noticed from the image above, we have another tab labeled as “revisions” in the history panel. These revisions are kept even after exiting the page builder’s UI or even after you close your browser.
Every time you hit the “update” button, a new revision is saved.
Furthermore, the plugin also makes auto-saves preventing you from losing your work due to some unforeseen accidents like browser crashes.
This is a very handy feature that allows you to revert to a previous revision easily even if you close the editor, log out from WordPress or shut down your computer. This feature makes Elementor a clear winner against Divi in terms of revision history.
Responsive mode - allows you to preview how your page will look like in different devices and screen resolutions.
Preview changes - will open up a new tab allowing you to have a live preview your page.
Element Specific Menu
Clicking on an element in the preview page will bring up an element-specific menu that will be displayed in the sidebar. Each element has its unique options that you can configure.
Besides the sidebar, in Elementor there is also an additional menu that is accessed by right-clicking on an element. It varies very slightly depending on what element you right-click on. But basically, the right-click menu shows the following items:
- Duplicate - duplicates the current element.
- Copy - copies the current element.
- Paste - pastes the copied element.
- Paste style - allows you to paste the style settings of the copied element to another element, changing the destination element to have the same styling options as the source element.
- Reset style - if you want to reset an element’s style to its default.
- Save as global - allows you to save an element, or widget in Elementor’s lingo, as a global widget. We’ll cover more about them in the “Elements” section of this article.
- Navigator - clicking this will bring up the navigator menu and bring you to the element’s current position in the hierarchy.
- Delete - deletes the widget.
Elementor in Action
Like we did with ElegantThemes' product, we’ll show you what Elementor looks like in action.
Below, you can see how we can drag and drop elements around to reposition them, how you can edit text seamlessly by just clicking on it, how you can add new elements, etc.
As we can see, the Elementor page builder focuses on accessibility and user-friendliness.
Unlike Divi where it might take some time to get used to, Elementor makes its users feel right at home. Adding new items is a breeze since you just have to drag and drop the element you need from the sidebar to the preview area.
We can see that when comparing Divi vs Elementor, they both focus on different things. The first on simplicity and cleanliness and the latter on availability and accessibility.
Now that we’ve finished exploring both plugin’s user interfaces, it’s time to take a look at their available elements or widgets and modules as per their lingo.
The elements are what you’ll be using to build your page. Divi calls its elements the section, the rows and columns, and the modules. Elementor, on the other hand, calls its elements the section, the column, and the widgets.
Elements are what is used to define a page's structure. While the names might be different in Elementor vs Divi, the concepts are the same.
Let’s take a deeper look starting with the Divi builder.
Divi’s Elements: Section, Rows, and Modules
Divi’s elements are divided into three main categories. The section, which acts as a container, the rows, which acts as a divider, and the modules, which are the actual content.
The image below shows you an empty page. This page has three sections.
The second section has a row inside it, which is highlighted in green. The row is divided into three columns. The columns are empty.
Finally, the bottom section also has a row inside it, although it is not highlighted. The row is also divided into three columns, similar to the one in the second section. The middle column of the bottom row contains a module, which, in this case, is a button module.
To add sections, rows, or modules, you click on the plus buttons. The blue, purple or orange plus button will add a section (the section highlight color changes depending on the type of section: blue for regular, purple for full width and orange for specialty), the green plus button will add a row and the black plus button will add a module.
The section acts as a container for rows and modules.
You can use sections to divide your page into different parts. For example, you can have three sections on a page; the first is an about section, the second is a contact section and the third is a business location section.
Sections are 'independent' of each other. If you apply a blue background color in the first section, the other two sections will be unaffected.
Adding Sections - Clicking on the blue (or orange or purple) plus button on the page will let you add a new section. Upon clicking on the specified button, you will get a dialog box asking you to select from three different types of sections: regular, specialty and full width.
Regular sections allow you to add rows with columns arranged side by side. Specialty sections will let you add a more complex row and column arrangement. Full-width sections let you add special full-width items like portfolio, post slider, post title, etc.
There’s also the option to add a section from your library. If you’ve saved a section before, you can find them here and add them to the page.
Section Settings - we’ve repeatedly said that we’ll cover element-specific settings later on this article, and here we are now. Let’s start with Divi’s section settings.
Putting your mouse over an element will highlight it, which will display an action bar on the upper right corner of the highlighted area.
These settings let you configure the specific element. For section elements, you have the following:
- Move section
- Section settings
- Duplicate section
- Save section to library
- Delete section
- Additional section settings
- Save to library
- Split test
- Copy section
- Copy section style
- Reset section style
- View modified style
- Extend section style
Most of these options are pretty self-explanatory, but what’s interesting here is the split test option. This is an A/B testing feature allowing you to conduct split tests on any kind of Divi builder elements, from rows, sections, columns, and modules.
Clicking on the gear icon (section settings) will bring out a dialog box displaying additional configuration options for the highlighted section.
The section setting dialog box contains three tabs: Content, Design, and Advanced. The content tab contains items related to the content of the selected element while the design and advanced tab contain styling options.
The rows are elements that reside within a section. When adding a row, you must select a row variation. Row variations differ in how many columns it has by default and how large each column is.
If you want a more complex column structure, you’ll want to use a specialty section.
Specialty section’s row variations have a more complex column layout structure, as you can see from the image above.
Row Settings - Just like sections, a row has an action bar when you mouseover it allowing you to access certain menu items. It pretty much has the same things as found in sections, aside from the change column structure option that is exclusive to row elements.
The modules are what you’ll be using to add visible content to your page. The modules are website elements such as text, images, paragraphs, videos, contact forms, maps, etc.
Clicking on a black plus button will launch a module selector dialog box. Upon choosing a module, another dialog box will show up displaying settings that are tailored to the specific module you selected.
For example, if you select the text module, a placeholder text will appear in the area you selected. With it, a dialog box will show up that grants you the ability to edit the text itself and add styles, add custom CSS, etc. By the way, you can edit the text directly on the page without having to access the text module.
Every module has the same dialog box letting you access settings and customization options, just like the one above.
To open a module’s setting, pass your mouse over them to let the action bar appear and then click on the gear icon.
The settings dialog box has three tabs: Content, Design, and Advanced.
- The content tab contains configuration settings for the module. This varies per module.
- The design tab contains design options allowing you to change the content alignment, spacing, typography, etc.
- The advanced tab allows you to access options such as advanced CSS configuration, transitions, etc.
Those are the available Divi elements you can use to build and design your pages. Accessing elements, especially module elements, is a little hard since you have to click multiple times just to get them.
All elements are draggable on the screen, allowing you to easily reposition them.
Text elements are inline editable.
Perhaps one of the best things about Divi’s elements is the special rows since it lets you build a complex layout and positioning with ease.
Now that we’ve checked out this plugin’s elements, let’s take a look at Elementor’s elements next.
Elementor’s Elements: Section, Columns and Widgets
Like Divi, Elementor has three different element categories: the section, which acts as a container, the columns which divide the section, and the widgets which are the actual content.
In the image below, you can see an empty page divided into three sections. The top section is empty. The second section contains three columns and the bottom section, also containing three columns with the middle column containing a button widget.
Adding elements on the page is as simple as dragging and dropping a widget from the sidebar to an empty area.
Unlike Divi which requires you to create a section and a column first before being able to add an element, in Elementor, you can just drag, say, for example, a button widget from the sidebar to an empty area of your page and it’s done. It will automatically create a section with a single column holding your selected widget.
If you are editing an element, the sidebar will change its content to display the appropriate settings for the said item.
Like in Divi, you can drag and drop elements to reposition them on the page and you can click on any text on the page to directly edit them. You can also resize columns freely.
Right-clicking on any element in the page brings up a context menu, which slightly varies depending on what kind of element is selected.
The section acts as a container for columns and widgets. You don’t need to explicitly add a section to a page. When you open a blank page and edit it with elementor, you can just drag a widget to it and a section with a single column that will hold the widget will automatically be created, just like what you saw earlier.
There are two kinds of sections in Elementor, the normal section, and the inner section. The inner section can only exist within a normal section. An inner section is somewhat similar to columns, but you can have multiple inner sections and multiple columns within them allowing you to create complex layouts.
Section Settings - Hovering on any element on the page will highlight the section in which they belong to. The highlighted section has a small menu on its top.
This small menu has three items: the add new section (plus button), the edit section (dotted area), and the delete section (x button).
The add new section will add a new empty section on top of the highlighted ones.
The edit section will bring up section settings on the sidebar. You can also access this via right-clicking on an empty part of the section.
In the section settings, there are three tabs: layout, style and advanced. You can configure the layout and structure options in the layout tab.
In the style tab, you can configure styling options and in the advanced tab, you can configure additional advanced styling and attribute options.
The columns divide sections vertically. The columns act as a container for the widgets, including the inner section widgets.
When adding a new section, you can choose how many columns it will hold.
Column Settings - Accessing column settings is done by hovering on a column and right-clicking on the now visible column icon. Different options will show up, allowing you to edit the column, duplicate the column, add a new column, etc.
Selecting the edit column will change the sidebar to display column related settings. Just like in section settings, it also has three tabs: layout, style and advanced.
The layout tab contains layout configuration options such as column width, alignment, etc.; while the style and advanced tabs are pretty much the same as what you can see from the section’s settings.
The widgets are the content you can use on your pages. These are items such as text, images, videos, galleries, buttons, etc. As you’ve probably known by now, adding a widget is as simple as dragging one from the sidebar to the page or by clicking the plus button to bring out the widget selection panel and then dragging and dropping one.
Widget Settings - Selecting a widget will change the sidebar to display the configurable options for that particular item. In the gif below, you can see how each element displays different options.
You can also access this panel by right-clicking on an element and selecting the edit [element name] item in the context menu.
Finally, every widget also has the style and advanced tabs that you can access from the sidebar panel.
The style tab changes according to the selected widget. For example, image widgets don’t have typography styling options, while text widgets don’t have dimension settings.
The advanced tab is the same as in the other elements.
There is a special type of widget in Elementor: the global widgets. You can save a widget as a global widget and use it anywhere on the page or the site and you can edit them at once in a single place.
Elementor does have a wider selection of elements compared to Divi’s, but both of them support third-party widget plugins, so it kind of evens out.
Elementor provides a faster way of adding elements to a page since you can just drag and drop them from the sidebar to the preview. Divi, on the other hand, requires you to click several times before getting to the element you want to add.
Now, we’ve seen the UI and the elements of both WordPress plugins. It’s time to see and compare their styling options.
Both Divi and Elementor come with in-depth and advanced styling options that are suitable not only for people who can’t write codes but also for those who are experts in the field of web design.
While you might’ve already seen a glance of both plugin’s styling options earlier, in this section, we'll be going to take a slightly deeper look at each of their respective styling options.
Divi Styling Options
Double-clicking on an element in Divi, whether its a section, a row or a module, will bring out its settings panel. Alternately, you can also access this panel by hovering over a certain element until an action bar appears and then clicking on the gear icon.
There are three tabs in the settings panel, the content, design, and advanced tabs.
Divi’s styling options can be configured via design and advanced tabs. The design tab lets you configure typography, box shadows, margins, animation, filters, etc. These are mostly items that require you to configure sliders and input numbers, which is very easy to use even to those who don’t know how to code.
For advanced users or for those who want more control over the styling or those who are well-versed in web design, they make use of the advanced tab. The advanced tab lets users add their custom CSS IDs and classes, add a custom CSS code, configure visibility, etc.
In Divi, you can define different styling settings for different devices. For example, you can define a text element’s font as Verdana and make it have a 20px size on desktop devices and you can define another setting for mobile which makes it have a Times New Roman font and a 10px size.
Divi’s design options let all types of users, from non-coders and beginners to veterans and web designers, customize their pages to their liking.
Elementor Styling Options
Selecting an element in Elementor changes what’s displayed on the sidebar panel to reflect the available options for that particular element. Like Divi, all elements in Elementor have three tabs in their settings panel which varies depending on the type of element selected. The first tab contains either content or layout, then style and advanced on the second and third tabs respectively.
You can configure an element’s style through the style and advanced tabs. The style and advanced tab display different options depending on the element selected.
The style tab lets you configure different styling options such as background colors, borders, typography, etc. The content of this tab will change depending on the type of element that is selected. Below is the style tab for the section element.
The advanced tab contains advanced styling options such as margins, custom CSS codes, etc.
You can have separate styling options for different devices in Elementor, just like in Divi.
Controlling Elementor’s Default Styling Options
By default, after installing Elementor, the plugin will automatically apply its styling options to override your theme’s.
You can disable this by heading to Elementor > Settings from the WordPress dashboard and checking the disable default colors and disable default fonts.
Elementor will now use your theme’s default font and colors instead of its own.
There’s also a style tab in there from where you can configure various basic defaults like default generic fonts, default content width, etc.
Both plugins offer an excellent set of styling tools and options that cater to everyone. Casuals and non-coders can easily define their styles by using the sliders and other styling tools that both plugins have.
Advanced users and web designers who want more control can also enjoy using any of these two plugins since both let them add their custom CSS codes for further designing capability.
Now, we’ve finished seeing the UI, elements and styling options. It’s time to check out the templates!
Templates help you get started with building a page fast. Both Elementor and Divi offer tons of templates for you to choose from.
Divi offers a lot of pre-made templates, called layouts. They are divided into two types: a layout pack consisting of multiple layouts with the same theme and a single layout.
Layout packs contain multiple templates in one. For example, a pack contains templates for the home page, about page, contact page, etc., all following a unified set of designs or themes. A single layout is just a template for a single page.
You can save your templates so you can reuse them later on, or even export them so you can use them on another site.
Elementor’s templates are divided into two types: blocks and pages. The free version allows users to access about 40+ blocks and pages, while the premium version unlocks all available ones.
We've also reviewed a bunch of Elementor themes and templates here.
Blocks are single section templates that you can insert to a page. There are blocks for contact forms, call to action, FAQ, pricing, portfolio, header, services, etc.
Page templates are what they sound like: a whole page template. There are 140+ page templates available for premium users. For free users, the options are drastically reduced but the selection is still great.
Their template library continuously grows in size and you can always check the latest additions by clicking on “new” in the upper left corner of the page template selection interface.
You can always save your page to your template library so you can reuse them later. Elementor also gives you the ability to export your templates so you can use them on another site.
Both plugins offer a vast range of template selection, however, Divi offers far more in terms of numbers. In addition to that, Divi makes it easier to build a whole site, thanks to its template packs.
UPDATE: In this article’s previous version, only Elementor had a theme building feature.
With the release of Divi 4.0, this feature is no longer limited to Elementor. The 4.0 major update, which was released in October 2019, focused on equipping Divi with powerful theme building tools, allowing its users to use elements, modules, and features to build not only static pages but also dynamic header, footer, and body layouts. In other words, the ability to build full-themes.
We’ve updated this section to reflect the new changes and we’ve pitted Elementor and Divi’s theme building features against each other to see if the latter can hold up against the former.
Divi’s Theme Builder
A relatively new feature from Divi, the theme builder lets you create templates that you can use to override your website’s header, footer and body’s design, layout and even behavior. The features are pretty similar to Elementor’s in many aspects, this is a feature where Divi is catching up to Elementor.
You can access Divi’s theme builder by going to Divi > Theme Builder.
From there, you can create a new template, export a template, or import a template from external sources.
One of the downsides of this, at the time of this writing, is that there’s no way to import pre-built theme builder templates from the cloud. You’d have to download a JSON file from an external source and upload it to import a pre-built template.
Speaking of pre-built theme builder templates, there are many packs available for free from Divi developers themselves, which you can obtain here. Just search for “theme builder packs” in their search bar and you can easily find them.
Aside: If you want to get more of these packs, we’d recommend that you visit the Elegant Themes website here and subscribe to their newsletter. They constantly send out new stuff which can be used with Divi, one of the most valuable newsletters we are subscribed to.
With the theme builder, you can define a global template that will override the overall look and feel of your entire website and you can also create targeted templates that can be applied to specific posts, pages and parts of your website.
When creating a new template, Divi will first ask you where you want the template to be applied to. You can choose to apply or exclude applying your templates to specific posts or pages or even to specific tags and categories and more.
Once you’ve decided on where you want your template to be applied, you can start building and designing your template. If you’ve defined a global header and footer template, they will automatically be added to your new template.
You’ll only have to worry about creating a new body template. Of course, you can eventually override the body template with a custom one if you need to.
Clicking on either add custom body, add custom header or add custom footer buttons will open up a small pop-up menu letting you choose from various options such as selecting a premade template or copying an existing one. From there, you’d have the usual Divi tools and modules at your disposal to start building your envisioned layout.
Elementor's Theme Builder
You can access the theme builder through the WordPress dashboard and going to Templates > Theme Builder.
From there, you can choose what part of your theme you want to build. Currently, you can create templates for pages, sections, pop-ups, header, footer, single posts, WooCommerce pages, and archives.
You will use the same UI as you have when creating pages, only this time the available elements in the sidebar are tailored to the specific template you are trying to create. For example, below are the sidebar contents when editing a header template.
Once you’re done editing a theme template, you can choose how and when the template will be displayed.
For this part, Divi is a bit easier to use due to the usage of checkboxes to choose where you want to include or exclude a certain template compared to having to click the add condition button and clicking the drop-down menu each time you want to add a new rule.
Nevertheless, it still comes with fine-grained control which is equal to Divi’s. You can choose to include and exclude your templates using complex conditional rules. For example, let’s say we have a template called “A”. You can choose to display this template if the page is under the category called “deals” and if the author is “John Doe” as per below.
Used correctly and creatively, this can be an incredibly powerful and useful tool. It gives you flexibility and customizations at a very granular level.
And there you have the Elementor’s theme builder.
Elementor and Divi Builder have very different pricing models. One of the most distinguishing differences is that Elementor comes with a free version while Divi doesn’t. Then, in terms of premium versions, Elementor Pro comes with a yearly pricing option while Divi lets you select between yearly pricing or a lifetime license.
Let’s take a deeper look at their pricing options.
Elementor has a free version available at the WordPress plugin repository that you can freely download and use on your site. The free version is very usable and you can already create compelling pages with it.
As your website matures and you need elements that are not available on the free version, you can then upgrade to the pro version any time for additional features and modules and if you to use its theme building feature.
Elementor Pro is an extension of the existing free plugin. That means if you buy a pro license, you will have to download a separate plugin and install it to enjoy the premium features.
All licenses unlock the same set of features and support access levels for one year (updates are included). The only difference is the number of sites where you can use it. Renewals are 25% off for active customers.
There are three pricing tiers called personal, plus, and expert.
- Personal license costs $49 a year and can be used for one site.
- Plus license costs $99 a year and can be used for three sites.
- Expert license costs $199 a year and can be used for a thousand sites.
If you're planning to use this on more than one site, we believe you should opt for the expert license from the get-go.
Unlike Elementor, Divi Builder doesn’t have a free version available, but they have a demo that you can access so you can try it out yourself before buying. In addition to that, there are only two different pricing options for Divi.
You either pay yearly or pay a one time fee for a lifetime license.
Both pricing options also unlock the same set of features. You can choose between the two:
- $89 $80 yearly subscription
- $249 $224 lifetime access
But, before we go any further - we'll make you an offer you cannot refuse ;-)
We've been working with Elegant Themes and have gotten access to a limited 10% OFF on the Divi Builder for CollectiveRay visitors as can be seen below. Given the price, and our discount which is valid only until , we'd highly recommend you go for the lifetime access - it's a no brainer.
You will enjoy the following:
- Access To Divi, Extra, Bloom & Monarch
- Hundreds Of Website Packs
- Product Updates
- Premium Support
- Unlimited Website Usage
With Divi license, you will not only have the Divi Builder, but you will also have access to Elegant Themes’ entire offering which consists of the Divi theme, a magazine theme, an email opt-in plugin, and a social media plugin - all of which you can use on an unlimited number of sites.
Testimonials - What Other Users Say
With their popularity, both Divi Builder and Elementor have thousands, even tens of thousands of users.
Different people, from developers to casual users alike have had experience in one or both of them and many big WordPress personalities have their own opinion and thoughts when it comes to these plugins.
We can find many user reviews and testimonials for Elementor from the official WordPress plugin repository. Divi, on the other hand, has many reviews and testimonials in Trustpilot.
What People Say About Divi Builder
With Divi, people are always praising their support team, most 4 and 5-star reviews always mention how great their support is. Therefore, even though the Divi builder can be a bit more difficult to use than Elementor, their support team is there to back you up.
“Elegant Themes Divi Theme is awesome. I searched high and low for a theme with a solid front-end editor/page builder, wasting money on plenty of low-quality themes. When I finally found Divi, I knew it was the theme for me and I now use it in my marketing agency to build client's websites because it works so well. They also have awesome support who are knowledgeable and ready to help you with any website customization you can think of.”
“I've been a member of Elegant themes for a few years now and I really love it. I've made awesome websites for customers using their brilliant themes and plugins and can't ever see myself using anything else. Customer service is second to none, they are quick to reply and the advice is thoroughly reliable. Excellent company.”
What People Say About Elementor
Elementor’s users praise how it’s one of the best free page builder plugins on the market and how easy it is to use that even novices don’t have any trouble using it.
I am a new user of the plugin, but I can’t stress enough how easy the plugin is to set up and the time-saving features it offers!
New to WP but Elementor is one super page builder. It really makes web development faster and a lot less frustrating. Plus it does a beautiful job. One of the features that I really really love is the ability to go back to previous versions when I or the computer screws something up. You can go back to the previous change, or any change in this session or any saved change. Love the block concept! Could use more block templates. Creating templates is so easy to do and to use. I wish there was a PHP widget. The challenge is to keep up with all the new enhancements as they roll them out frequently. Always trying to improve this good product. Keep up the good work guys!
We're coming to the end of our Elementor vs Divi review, but there are few things we'd like to reiterate.
Divi Builder and Elementor both offer a wide variety of features that can help you build beautiful pages with ease.
While they have many similarities, their user interfaces are very different. Elementor offers accessibility by offering a sidebar containing tools and options while Divi offers simplicity by displaying as little UI elements as possible.
As for the number of default templates, the Divi builder offers more as compared to Elementor, but both plugins have an import and export option, allowing you to add dozens of third-party templates from other sources.
For pricing, Elementor is pricier than Divi since the latter has a lifetime license and unlimited site usage. Elementor, on the other hand, has a maximum price of $199 per year, allowing you to use it for a thousand sites. However, Elementor does have a free version that still offers a powerful suite of tools and even templates that lets you build beautiful pages.
As for code cleanliness, Elementor will leave behind a clean and valid HTML code if you deactivate it. The Divi builder, on the other hand, will leave some shortcodes on the pages which are somewhat of a problem to fix, so it does lock you in a bit.
However, considering that they have a lifetime license option, it’s kind of justified. We could infer that they want you to tie your sites to the Divi ecosystem by purchasing their lifetime license option.
As for security, Elementor has had a serious security issue in the past but it was mitigated and solved easily. Divi builder has not experienced a serious security issue yet.
Update: In January of 2020 the Divi builder and theme have experienced an injection vulnerability that required an update.
This leads us to a simple conclusion, no matter the size of the vendor, vulnerabilities are always a possibility. The crux is how the vendor actually reacts to such a vulnerability. Both of these vendors have responded very maturely to the vulnerability.
Theme Building Capability
When this article first came up, Divi still didn’t have a theme building feature. That’s why we were previously recommending Elementor if you needed theme building capabilities.
Although there were third party plugins for Divi before, Elementor still had the edge in this area.
This is because a native feature is almost always better for integration and compatibility. Third-party extensions can rarely compete against a native feature.
But everything changed when Divi 4.0 was released. The update gave Divi the much-needed theme building feature.
At this point, both the Divi builder and Elementor come with the same set of features.
In terms of customization and control, Divi and Elementor there is very little difference between the two.
Both offer powerful theme building features with fine-grained controls allowing you to build and design your website in any way you want. From custom static pages to custom headers, footers, and body layout, you can build them all!
So, who wins this Elementor vs Divi comparison?
There’s one thing that makes Divi builder the better product overall and takes the edge: the Divi Theme. Divi comes in two forms: a theme and a plugin. You would use the plugin if you want to use Divi with third party themes. Otherwise, you’d opt-in to use the theme.
Why is that important? Integration and compatibility.
If you opt for the theme, you will have zero compatibility issues.
Elementor does have their own theme, but when you compare it to Divi theme - there’s no comparison.
The “Hello Elementor” theme is barebones and is intended for advanced users and developers so that they can further develop on it. If you want a feature-rich theme, you’d have to install a third-party product.
And while there are so many themes out there that are developed with Elementor in mind, newer updates and features in either Elementor or the theme could potentially break compatibility and integration.
You will have to wait until the developers to fix any bugs and incompatibilities that may arise. And as with all incompatibilities, there’s a slight chance of losing some or the entirety of your work.
Don’t get us wrong, both are a solid solution for theme building, but we can’t ignore the fact that Divi is a feature-rich theme and a page builder, so for that, Divi wins by a small margin in the theme building category.
Major Differences in Theme Building
One of the major differences between Elementor and Divi’s theme building feature is the editor. There is quite a difference in the user experience, eventually, the one you prefer boils down to experience and personal preference.
When editing a header, footer or custom body template in the Divi builder, the editor will only focus on that particular area of your website. For example, when you’re editing a custom header, the only thing that’ll be visible on your screen is nothing but the header area.
In Elementor, you will have a view of the entire website irrespective of whether you’re editing a header, footer or a body layout.
You can see below that aside from the header area, the content area is also shown. If you scroll further down, you’d also see the footer area (they are in read-only mode, however).
In this regard, we can say that Divi focuses on distraction-free editing, while Elementor lets you see the whole picture at any point.
We are not aware of a way to toggle between distraction-free and full-page preview editing modes on either page builder, so if you have a preference, this might affect your final choice.
This is an improvement that both page builders can eventually add: let users have a choice between distraction-free and full-page preview editing options.
Frequently Asked Questions
1. What is Divi?
Divi is both a page builder and a WordPress theme combination. It is a full multipurpose product that can be be used to build any kind of website from scratch, whether it's eCommerce, niche-based or industry-specific or a portfolio website. It is produced by Elegant Themes and is one of the most popular WordPress products around and has been sold more than 600,000 times.
2. What is Elementor?
Elementor is one of the most popular WordPress page builders around. While it is not actually a theme, it has powerful theme-building capabilities too. Typically, Elementor is used together with a theme to build custom posts and pages using drag and drop features. Elementor has a free and paid version. Thanks to the free version, and in the last few years it has millions of active installs.
3. What is the difference between Divi and Divi builder?
Divi is actually the WordPress theme, Divi builder is the drag and drop editor which is part and parcel of the Divi theme. In reality, you don't need to make any distinction between them, because they work seamlessly together.
4. Can I use Divi on multiple sites?
Yes, once you buy Divi for the price of $89, you can use this on unlimited sites, but you will get support and updates for 1 year only. There is a version at $249 which has lifetime unlimited support and updates.
5. Is Elementor the best page builder?
Elementor is the best page builder currently around. While this is subjective and it may not be suitable for everybody, we do believe strongly that no page builder by itself can match its features. Of course, this does not mean that it is suitable for everybody. Divi with its bundle of theme + page builder is an excellent option for many people too.
6. Is Divi better than Elementor?
It depends. For some people, who don't want to buy a separate theme and page-builder, Divi can give more value. If you are planning to build one website only, we believe Divi is a great choice. If you're planning to build multiple sites, or are a developer or designer, Elementor might be better because it is compatible with more themes.
7. Will Divi and Elementor work with Gutenberg?
Yes, both Divi and Elementor work well with Gutenberg.
Elementor vs Divi: Final Thoughts
In the end, there is no perfect plugin and there is nothing that lasts forever. It’s all up to you to decide whether you want to use Divi and the Divi builder which might tie you to their ecosystem or Elementor which is slightly pricier, both of them are great choices and you won't regret your choice.
If you still can’t decide, you can easily try both plugins yourself by installing the free Elementor plugin or trying out Divi’s demo. Nothing beats hands-on experience in choosing these kinds of things.
If you had to push us to choose a page builder only, we'd say Elementor these days, but we've been working with the Divi builder and Elegant Themes for many years, so we have nothing to say against them and the excellent value they offer.
What it boils down to though, when it comes to Elementor vs Divi plugins you have already chosen a winner for your future projects, so whichever one you opt for, you're in for a winning combo.
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!
Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.