Elementor vs divi

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 features. Elementor has a free plugin and a paid version starting at $49. Divi is paid only starting at $89 but can be used on unlimited sites. Both are user-friendly, but Elementor is easier to learn and faster to work with.

Summary

  elementor logo plugin divi builder
Price Starts from $49 Starts from $89
Free Version Yes No - but 30-day money back guarantee
Real-time editor Yes Yes
Inline editing Yes Yes
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
Elements supported 90+  46
WordPress Widgets support Yes Complicated
Clean Code Yes No
Pre-made templates / layouts 300+ 140+
Cool Feature Dynamic content A/B testing
Performance
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
Support
Stability and Reliability
Extensibility
Value
Overall
Winner 🏆  
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.

creating pages with page builders

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.

Learn more about the builder by Elegant Themes

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”.

new page

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”.

choose layout

 

  • 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.

Adding Elements

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.

new row

The Menu

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.

floating menu

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,
  • portability,
  • the search and help button,
  • and the save draft and publish buttons.

floating menu 2

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.

wireframe view

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.

responsive view

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.

editing history

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.

element specific menu

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.

divi ui demo

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.

Download a copy of the plugin

create new page

Clicking the button will open up Elementor’s UI which is composed of two parts: the sidebar and the page preview.

elementor ui

You can hide the sidebar by pressing the small icon shown in the gif below:

hide sidebar

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.

Adding Elements

To add an element to the page, drag and drop one from the sidebar to the page.

drag and drop

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.

side bar navigation

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.

Sidebar

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.

Upper Menu

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.

upper sidebar menu

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.

Bottom Menu

At the bottom of the sidebar, you can see additional menu items.

bottom sidebar menu

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.

additional menu

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.

sidebar settings panel

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.

navigator

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.

revisions

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.

responsive preview

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.

element specific menu 2

Right-Click Menu

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.

elementor ui demo

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.

Learn more on the plugin's website

Elements

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 elements

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.

Sections

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.

new section

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.

section settings

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
    • Disable
    • Lock
    • 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.

section settings dialog

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.

Rows

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.

 

row selection

If you want more a complex column structure, you’ll want to use a specialty section.

special sections

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.

 

change column structure

Modules

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.

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.

module settings

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.

the elements 2

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.

adding elements

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.

Section

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.

adding new sections

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).

section menu

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.

section style advanced tab

Columns

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.

new columns

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.

column settings

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.

column settings panel

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.

Widgets

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.

widget settings

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.

Discover all elements available

Global Widgets

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.

Styling

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.

styling options for divi

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.

Responsive Styling

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.

responsive styles

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.

elementor styling potions

The advanced tab contains advanced styling options such as margins, custom CSS codes, etc.

advanced styling options

Responsive Styling

You can have separate styling options for different devices in Elementor, just like in Divi.

responsive styling option elementor

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.

elementor settings

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

Templates help you get starting building a page really fast. Both Elementor and Divi offer tons of templates for you to choose from.

Divi’s Layouts

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.

templates

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 Templates

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.

elementor templates

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.

page templates

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.

See whole list of templates / themes available

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.

Theme Building

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.

theme builder

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.

theme builder sidebar

Once you’re done editing a theme template, you can choose how and when the template will be displayed.

theme builder settigs

And there you have the Elementor’s theme builder.

Pricing

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 Pricing

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.

Click here for the lowest price on Elementor

elementor pricing

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.

Divi Pricing

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.

Get 10% OFF on Divi until

 

Divi Pricing

 

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.

review 1

“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.”

review 2

“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.

review 3

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!

review 4

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!

Wrapping Up

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.

Code Cleanliness

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.

Security

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.

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 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. 

Get Divi Now   Get Elementor Now

About the Author
David Attard
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
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!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

 

 

Get Started Now With ShutterstockShutterstock

Best Rated Caching Plugin

Make your website faster 

Monstrous B-Day Party

CLICK HERE for discounts!

Monstrous bday party

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Work with CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

 

InMotion Hosting CollectiveRay Deal

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Subscribe to our RSS Feed   Follow us on Twitter

 

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to StackPath CDN!

Web Hosting stackpath