Today we will be comparing two of the most popular WordPress products: Elementor vs Divi. Both of them have a proven track-record, so which 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 own 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, they’ve massively grown in popularity and as a result, many developers and companies have started producing one of their own.
While there many of them today, only a few have made it to the top - some have already gone into oblivion. 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 years time, 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, they vary quite a lot, and both of them have things which may not be ideal for your scenario.
In this article, we’re going to take two of the top page builders in the market today, Elementor and Divi Builder, and dig deeply into all of their capabilities and compare them head-to-head. We’re going to take an in-depth look at their UI, feature set, pricing, and more.
By the end of this article, you will have an all the knowledge you need to make an educated judgement of which one suits your own need, you'll know how they work, what they look like, what comes with the bundle 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 front-end drag-and-drop editing. Elementor has a free and paid version starting at $49. Divi is not free ($89) but can be used on unlimited sites. Both are user-friendly, but Elementor is faster.
|Price||Starts from $49||Starts from $89|
|Free Version||Yes||No - but 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||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 pagebuilder for a reason||Allows you to use WordPress widgets in the layouts|
|What we didn't like||Some code remains after removing plugin|
|Ease of Use|
|Stability and Reliability|
|Website||Visit site||Visit site|
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?
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 it's capabilites:
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 looking web pages miles faster than when doing it from scratch.
Page builders have built-in tools that allow users to create sections which 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 a 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.
Elementor are the new kids of 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+ millions installs in a matter of months. They have taken the world by storm and the raving reviews and fans they have are 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 perectly, 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 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 Divi’s interface works and looks like.
Clicking on the “build from scratch option” will fire up Divi 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. We’ll cover more about modules (which we are going to mainly refer to as elements) later in the article.
Divi’s user interface is minimalistic. 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.
Let’s take a better 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 back 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
Hovering over an element displays another set of menu. This lets you configure a specific element’s settings, from its content to its layout up to 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. You can drag elements around to reposition them, you can double click on a text to perform inline editing, etc.
And that’s pretty much it for the basics of Divi’s user interface. It’s pretty clean and simple.
Divi Builder’s UI is minimalistic in nature - doesn't overwhelm you at all, keeps you focused on your designs. It gives you a fullscreen experience. However, adding new elements may somtimes 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 pretty useful, especially for large pages since you will be able to move elements around more easily. Also, in front-end view, 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, the wireframe view allows you to access element-specific menu items much easier since they are always visible.
Now that we’re done here, 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.
It uses the concept of building blocks, which are used to build each page in a number of "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. In order to start editing the page, you’d have to click on the “Edit with Elementor” button located on the upper part of the screen.
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, drag and drop one from the sidebar to the page.
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 things and info about the currently selected element and the lower menu shows additional settings that you can configure. Let’s explore them further.
The upper sidebar menu 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 own 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.
Settings - is 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 in the page. This could be 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 inferior compared to the wireframe mode we've seen above.
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 - is where you can see your editing history. It allows you to revert back to a previous version of your edits. Keep in mind, however, only edits of your current session are saved.
However, 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.
Further, the plugin also makes auto-saves, saving you from losing your work due to some unforeseen accidents like browser crashes and stuff.
This is a very handy feature that allows you to revert back to a previous revision easily even if you close the editor, log out from WordPress or shutdown your PC. 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 element specific menu that will be displayed in the sidebar. Each element has its own unique options that you can configure.
Aside from that, you also have an additional menu that you can access 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 in a gif of 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, Elementor 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 own 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.
Let’s take a deeper look into them starting with Divi.
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 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.
In order 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. Basically, 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. 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 in 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 an 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 elements, from rows, sections, columns, and modules.
Clicking on the gear icon (section settings) will bring out a dialog box displaying additional configuration option 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 more a 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, paragraph, videos, contact form, 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 actually 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, mouseover them to let 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 an empty section. The second section contains three columns and the bottom section, also containing three columns with the middle column containing a button widget.
Adding elements in 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 the 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 in 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 in 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 one.
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. Basically, you can save a widget as a global widget and use it anywhere on the page or on 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 has 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 own 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 own 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 own 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 starting building a page really fast. Both Elementor and Divi offer tons of templates for you to choose from.
Divi offers a lot of premade 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 home page, about page, contact page, etc., all following a unified set of design or theme. A single layout is just a template for a single page.
You can save your own 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 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, its 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 in 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.
As of the time of this writing, only Elementor supports theme building feature. So, if you are looking for a theme building feature, Elementor is your choice.
While there’s nothing to compare, let’s still check out Elementor’s theme builder. The theme builder allows you to create and design your page’s header, footer, single, archive, etc. You can also create a popup through it.
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.
You will use the same UI as you have when creating pages, only this time the available elements in the sidebar is 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.
And there you have the Elementor’s theme builder.
Elementor and Divi Builder has 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. In fact, the free version is very usable and you can already create compelling pages with it.
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 for 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 level 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. Basically, 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 as can be seen below. Given the price, and our own 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 has thousands, even tends of thousands of users.
Different people, from developers to casual users alike has had experience on 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
With Divi, people are always praising their support team, most 4 and 5-star reviews always mention how great their support are. Therefore, even though Divi 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 doesn’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 setup and the time saving features it offers!
New to WP but Elementor is one super page builder. 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. 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!
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.
Right now, only Elementor has a theme building feature, but Divi Builder’s license grants you access to a variety of tools that helps you build a site, including the Divi theme. Elementor, however, has recently started offering a free theme called Hello Elementor, which is specifically made for use by the plugin.
As for the number of default templates, Divi offers more 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. Divi, on the other hand, will leave a mess of shortcodes which is a nightmare to fix, it basically locks you in. Well, considering 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 doesn’t seem to have experienced one yet.
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 which basically locks 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 make a choice for a page builder only, we'd say Elementor these days, but we've been working with Divi and Elegant Themes for many years, so we have nothing to say against them and the excellent value they offer.
Hopefully, by now, you have a clear understanding everything when it comes to Elementor vs Divi plugins and you have already chosen a winner for your future projects.
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!