Divi Builder vs Elementor Pro: One-on-One Comparison

Divi Builder and Elementor are two of the best WordPress page builder plugins in the market. Despite younger, Elementor has more users than Divi Builder. However, number can’t always be a standard. There are probably some Divi Builder features that are not available on Elementor or vice versa. In this article, we will compare all aspects of these page builders. From features, design approach to pricing.

We will be objective here, based on our experience.

Divi Builder vs Elementor Pro: Overview

Unlike Divi Builder, Elementor is a freemium page builder. Meaning that you can use it for free, although with fewer features. The Elementor version we will compare here is the pro version.

Divi Builder and Elementor Pro have several things in common. For instance, they work on both posts and pages. They can also be used on any WordPress theme. Be it Divi Builder and Elementor also offer premade templates and allow you to create a WordPress theme without coding.

Divi Builder vs Elementor Pro: User Interface

Both Divi Builder and Elementor come with a drag and drop visual interface, allowing you to create a beautiful web page without coding. However, they use a different approach.

# Divi Builder

You can use Divi Builder whether on a post or a page. To access the Divi Builder editor, you can click the Use The Divi Builder button which appears on the top side of the Gutenberg editor. Before the editor really opens, you will be asked whether to create a page from scratch, from a template or by cloning an existing page. After making your choice, you will see the real interface of the Divi Builder.

If you create a page from scratch, Divi Builder provides a default section. To add a new section, you can click the blue plus icon. Speaking of the plus icon, there are three plus icons you will see on the Divi Builder editor:

  • The blue plus icon: To add a new section
  • The green plus icon: To add a new row
  • The grey plus icon: To add a new module

On the bottom side of the Divi Builder, there is a panel that hosts several menu items to open the layout library, export/import a layout, publish the page, save the page in a draft and so on. Divi Builder itself offers three interaction modes: Hover Mode, Click Mode, and Grid Mode. You can change the interaction mode by clicking the three-dot icon on the left-most of the bottom panel. By default, the interaction mode is set to Hover Mode.

When using Divi Builder, you have to familiarize yourself with popups. You will see a popup every time you want to add a new module or make the settings over a module, row or section.

Another thing you have to familiar with is the handler. Each element on the Divi Builder (section, row, and module) has a handler. You can use the handlers to access the settings popup, load the library, duplicate the element, delete the element, and several other things.

There are three handlers you will see on Divi Builder:

  • The blue handle: to control a section
  • The green handle: to control a row
  • The grey handle: to control a module

# Elementor Pro

Unlike Divi Builder, you will be directly taken to the Elementor editor once you click the Edith with Elementor button on the Gutenberg editor. If you want to create the page from a template, you can simply click the folder icon on the canvas area.

Elementor itself uses a different approach from Divi Builder. Instead of popups, Elementor uses a fixed, hideable panel which you can find on the left side of the screen (this panel is also resizeable). This panel hosts the widgets (design elements) of Elementor. This panel will automatically turn into the settings panel after you add a new section, column or widget.

From this panel, you can also make some settings to your page. Like setting the page layout and change the title. You can click the gear icon on the bottom side of the panel to open the setting page options.

To add a new widget, you can simply drag the widget you want to add from the left panel to the canvas area.

Elementor has a handy Navigator feature. This feature allows you to easily jump between sections, columns, and widgets. It is very useful if you are working on a page that consists of lots of sections, with lots of widgets on each section.

To be honest, the approach adopted by Elementor offers a better user experience than Divi Builder. Without popup, you have a cleaner canvas.

Divi Builder vs Elementor Pro: Design Elements

Design elements are crucial enough in the context of the page builder plugin. In general, the design elements offered by Divi Builder and Elementor are not too different. However, they might use a different name for elements with the same functionalities.

# Divi Builder

There are three design elements offered by Divi Builder:

  • Section: The largest container to host rows and modules
  • Row: To place the modules. When adding a new row, you can select the column layout to divide your page vertically. There are about 20 column layouts offered by Divi Builder
  • Module: The actual design element you will use to build your page.

Divi Builder offers about 38 modules.

AccordionEmail OptinPricing Tables
AudioFilterable PortfolioSearch
Bar CountersGalleryShop
BlogImageSidebar
BlurbLoginSlider
ButtonMapSocial Media Follow
Call To ActionMenuTabs
Circle CounterNumber CounterTestimonial
CodePersonText
CommentsPortfolioToggle
Contact FormPost NavigationVideo
Countdown TimerPost SliderVideo Slider
DividerPost Title

If you need more modules, you can install a plugin.

# Elementor Pro

Same as Divi Builder, Elementor also offers three elements.

  • Section: The largest container to host columns and widgets. Elementor offers pre-defined sections with different column-structures.
  • Column: To place the widgets. Elementor allows you to add a new column to an existing column inside a section.
  • Widget: Same as modules in Divi Builder. Just a different name.

Elementor offers way more widgets than Divi Builder. With the pro version, you have over 90 widgets. Here are some of the key widgets offered by Elementor Pro.

PostsReviewsNav Menu
PortfolioCountdownSearch Form
SlidesShare ButtonsSitemap
FormBlockquotePost Title
LoginFacebook ButtonPost Excerpt
Animated HeadlineFacebook CommentsFeatured Image
Price ListFacebook EmbedAuthor Box
Price TableFacebook PagePost Comments
Flip BoxTemplatePost Navigation
Call to ActionSite LogoPost Info
Media CarouselSite Title
Testimonial CarouselPage Title

Same as Divi Builder, you can also get more widgets by installing Elementor add-ons.

Getting an Elementor add-on tends to easier than Divi Builder. Marketplace platforms like TemplateMonster and WPDeveloper sell premium Elementor add-ons.

Divi Builder vs Elementor Pro: Features Comparison

There is a feature available on Elementor Pro that is not available on Divi Builder: Popup Builder. With this feature, you can create things like a floating form, a floating banner to an attractive menu as follows.

Outside of that, the features offered by Divi Builder and Elementor Pro are basically not much different.

In this section, we will compare the two main features offered by both Divi Builder and Elementor Pro.

# Theme Builder

  • Divi Builder

In case you didn’t know. Divi Builder was previously only available for the themes developed by Elegant Themes: Divi (just “Divi”) and Extra. Before version 4.0, which was released in October 2019, Divi Builder had no Theme Builder feature.

The Theme Builder feature of Divi Builder allows you to create custom elements of your theme, including:

  • Header
  • Footer
  • Single post template
  • 404 page
  • Category page
  • Search results page

You can create a custom element for specific pages, specific posts, posts under specific categories, posts with specific tags, and so on. In Divi Builder, display conditions are set upfront before you start creating the element.

  • Elementor Pro

Since the beginning, Elementor has been designed as a generic page builder, instead of intended to certain themes like Divi Builder. Theme Builder has been a default feature of the Elementor Pro since the plugin was released back in 2016.

The Theme Builder feature of Elementor Pro also allows you to create the custom elements of your theme, including:

  • Header
  • Footer
  • Single post template
  • 404 page
  • Category page
  • Search results page

In Elementor, display conditions are set after you are done creating a template. Elementor offers better flexibility in terms of display condition setting. A single template, such as a header template, can have multiple display conditions. For instance, you can apply a header template only for two posts on your website. Also, you can exclude a template for certain pages or posts.

Elementor also offers premade templates for each custom theme element you want to create. The same thing is not offered by Divi Builder. At the time of writing, Divi Builder only offers templates for pages.

# Template Library

  • Divi Builder

One thing you need to know. Elegant Themes, the developer of Divi Builder, uses the term “layout” instead of “template”. Divi Builder comes with a Divi Library to allow you to access all of your saved layouts. Divi Builder allows you to save a design element you have customized, be it a section, a row or a module, to the Library as a Global item. This is great if you often use modules (in which you have customized) on different pages on your website.

The elements you have saved to the Library can be accessed when you want to add a new element. Simply click Add From Library tab on the appearing popup every time you want to add a new section, row or module.

You can see all of your saved elements by going to Divi -> Divi Library. To have them well-organized, Divi Builder allows you to create categories to manage your saved elements.

Divi Builder itself also offers premade layouts. Unfortunately, the layouts are limited to pages only. There are no premade layouts for blocks, header, footer, or single post. There are over 1,000 page layouts offered by Divi Builder in total.

Almost forget. Divi Builder allows you to export a page layout into an external file in a JSON format.

  • Elementor

Elementor also comes with a Library feature to allow you to save the customized elements for recurring use. In Elementor, you can save a section as a block. You can also save a widget you have customized as a global widget. You can see all of the elements you have saved by going to Templates -> Saved Templates.

Elementor also offers premade templates. Unlike Divi Builder, the templates offered by Elementor are not limited to page templates only. Elementor offers templates for nearly all elements. From header templates, footer templates, single post templates, 404 page templates. Elementor even offers block templates.

Elementor also allows you to export a template in an external file in a JSON format.

Pricing Options

Once again. Elementor is a freemium plugin, meaning that you can use it for free. However, using the free version of Elementor only allows you to touch the surface area of Elementor. The pro version gives you access to features like Theme Builder, Popup Builder, pro widgets, pro templates, and so on. On the other hand, Divi Builder is a premium plugin with no free version is offered.

# Divi Builder

Elegant Themes offers two buying options. First, you can get Divi Builder by becoming a paid subscriber for $89 per year. Alternatively, you can get Divi Builder with a one-time purchase for $249.

Divi Builder itself is not sold as a separated product. Instead, it is bundled with other products developed by Elegant Themes. After being a paid subscriber, you will have access to all products developed by Elegant Themes as follows:

  • Divi (just “Divi”. It’s a WordPress theme)
  • Extra (also a WordPress theme)
  • Divi Builder
  • Monarch (social media plugin)
  • Bloom (email opt-in plugin)

Elegant Themes doesn’t limit the number of sites that you can use its products on. In other words, you can use Divi Builder on as many sites as you want after being a subscriber.

# Elementor

Unlike Divi Builder, Elementor only offers a subscription model. There is no option to get Elementor with the one-time purchase. The premium version of Elementor is available in three plans.

  • Personal: $49 per year for 1 site
  • Plus: $99 per year for 3 sites
  • Expert: $199 per year for 1,000 sites

The Verdict

Both Divi Builder and Elementor are great page builder plugins that allow you to create beautiful web pages visually in the front-end editor in real-time. Everything is drag and drop. No coding skills are required.

In terms of the user interface — as well as user experience — Elementor is a bit better than Divi Builder. At least, the interface of Elementor is easier to learn for new users. Plus, Elementor offers more widgets, allowing you to unleash your best creativity in designing a web.

Divi Builder is a better option if you hate the subscription business model since it offers a one-time purchase option, which is not offered by Elementor. Plus, you can use Divi Builder on as many websites as you want. Which is great if you are a web developer who often creates websites for clients.

How to Export and Import a Divi Builder Layout

Just like other popular page builders, Divi Builder also offers premade templates. With a template, you can create a beautiful page on your WordPress site in minutes. Elegant Themes (the developer of Divi Builder) uses the term “layout” instead of “template”. Whatever you call it, a Divi Builder layout can save you time in creating a web page. It can also be a savior if you have no idea about the concept of the page you will create.

Divi Builder itself offers more than 1,000 premade layouts in total. Some of them have the same design concept, intended to build a website (not just a web page). Some Divi Builder layouts that have the same design concept are called a Layout Pack, much like Elementor Template Kit. A Divi Builder Layout Pack can consist of 6 to 9 layouts.

While you can use a default layout offered by Divi Builder, you can also use a layout created by a Divi Builder user. If you want, you can also share your work with your colleagues or teammates. Divi Builder allows you to export your page into an external file in a JSON format.

How to export a Divi Builder layout

To export a Divi Builder layout into a JSON file, first, create a post/page and edit it with Divi Builder by clicking Use The Divi Builder.

You will be directed to the front-end editor of the Divi Builder. But before the front-end editor really opens, you will be asked to select one out of three options. Whether you create the page from scratch, from a layout, or by cloning an existing page. Select your choice and create your page. Once you are done, click the two-arrow icon. Give your layout a name and click the Export Divi Builder Layout button.

Wait a moment. Divi Builder will download the layout file for you. You can find the JSON file of your layout on the default download location of your web browser (“Downloads” folder in most cases).

How to import a Divi Builder layout

To import a Divi Builder layout from a JSON file, first, create a new post or page and edit it with Divi Builder. Before the Divi Editor opens, you will be asked whether to create the page from scratch, from a layout or by cloning an existing page. Since you want to import a layout, select CHOOSE A PREMADE LAYOUT option and click the Browse Layouts button.

Click the two-arrow button, followed by the Import button. Click the NO FILE SELECTED to choose a JSON file and click the Import Divi Builder Layout to start importing your layout.

Wait a moment until Divi Builder is done loading your JSON file.

Final words

A Divi Builder layout allows you to create a page on your WordPress site in minutes. You can simply import a layout and replace the default content with your own content. While you can use a layout offered by Divi Builder, you can also import a layout from an external file. Similarly, you can also export your layout into a JSON file and share it with your teammates or colleagues.

How to Hide Header on Scroll Down in Elementor

In most websites, the header is used to place the main navigation menu, which allows your visitors to explore your website more easily. Often time, visitors judge a website by its header. Elementor Pro allows you to create a custom header on your WordPress site. In addition to the navigation menu, you can also add other elements like logo, social media icons, button, and so on. Elementor also gives you the freedom to customize your website header. Be it changing its appearance or behavior.

Some websites have a header with the behavior as follows:

The header automatically hides when a visitor scrolls the mouse down and it shows up again as the mouse is scrolled up. This practice has at least two advantages: First, it allows your visitors to focus on the content they are reading. Second, it gives extra space for your content, which is particularly great for smaller devices like tablets and smartphones.

Is it possible to apply this sort of header customization in Elementor? One hundred percent!

To give you an overview, the following is the header customization we mean.

How to Hide Header on Scroll Down in Elementor

First off, login to login to your WordPress dashboard and go to Templates -> Theme Builder. Click the Header tab on the left panel. Select a header you want to add the auto-hide behavior to and edit it with Elementor.

If you have no header template yet, you can create a new one by clicking the Add New button.

Activate the section of the header by clicking its handler.

Go the Advanced tab on the left panel and add the CSS ID “stickyheaders” on the CSS ID field.

Add an HTML element to the section by dragging the HTML widget. You can place it anywhere in the section. In order to make the existing elements keep neatly organized, we suggest you create a new column.

Paste the following HTML code to the HTML Code field and click the UPDATE button.

Here is code:

<script>
jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
</script>

<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

That’s it.

Your website header will now be hidden automatically as the visitors make a scroll down and be shown up again as they make a scroll up.

7 Cool Things You Can Do with Elementor Pro

As a freemium app, you can use Elementor without spending any money. However, the free version of Elementor only allows you to touch the surface area of the page builder. There are a bunch of magical things you will get by using the pro version. One of which, you can create your own WordPress theme, a thing that previously can only be done by those who have programming skills.

Elementor Pro is like a magic box. With a single plugin, you will be able to create beautiful forms, attractive popups, amazing sliders, animation effects, and so on. The free version of Elementor gives you only 50 basic widgets, while the pro version offers tens more premium widgets.

Read: Elementor Free vs Elementor Pro

Here are 7 of the cool things you can do with Elementor Pro.

1. Create a WordPress theme without coding

To create a WordPress theme, you need to master PHP, HTML, and CSS. It was then. You can now create a WordPress theme without writing any single line of code. You can even create a WordPress theme even if you have no programming knowledge at all. The pro version of Elementor comes with a Theme Builder feature.

In general, a WordPress theme consists the following elements:

  • A header
  • A footer
  • A single post template
  • A 404 page
  • An archive page template (category and tag)

The Theme Builder of Elementor allows you to create those elements via the visual editor of Elementor. Everything is drag and drop in the front-end editor. Each theme element you created with Elementor will replace the default element of your theme once you publish it. When publishing an element, say header, Elementor allows you to set the display condition. Whether you want to apply it to the entire website or specific pages only.

2. Create beautiful popups

With Elementor Pro, you don’t need to install a popup builder add-on anymore since the pro version of Elementor comes with a Popup Builder feature, allowing you to create attractive popups on your WordPress site. More interestingly, Elementor offers tens of ready-to-use popup templates you can choose from. You can use the Popup Builder of Elementor to display banners of your special offers, display email subscription form, display a floating social share button and so on. With the Popup Builder of Elementor, you will also create a beautiful menu like the following.

There are several trigger types you can set when creating a popup with Elementor. For instance, you can display the popup after a user clicks a certain button. Or, you can also display a popup based on mouse scroll.

3. Create a website in minutes

Whether you use Elementor Free or Elementor Pro, you have access to the template library of Elementor. With an Elementor template, you can create a beautiful page on your WordPress in minutes. Simply import your preferred template and tailor the content and your page is ready to publish. However, the free version of Elementor has no privilege to use an Elementor Template Kit and all templates labeled “PRO”.

By the way, what is an Elementor Template Kit?

In August 2019, Elementor introduced the first-ever edition of Template Kit that is aimed at digital agencies. This Template Kit consists of:

  • A header template
  • A footer template
  • An about page template
  • A clients page template
  • A contact page template
  • A services and single service page templates
  • A 404 page template
  • A single post template
  • An archive template
  • A popup template

An Elementor Template Kit itself is a set of Elementor templates with a consistent design concept. With a Template Kit, you will be able to create a whole website in minutes or hours instead of days or weeks.

4. Create global widgets

There are a bunch of widgets offered by Elementor to allow you to create a beautiful web page. If you often use a widget with the same customization, say button, on different pages, you can make use of the Global Widget feature. This feature is only available on Elementor Pro.

When adding a widget on the Elementor canvas, you can customize the widget to meet what you want to accomplish. Once done customizing the widget you can save it (the customized widget) as a Global Widget for recurring use. This way, you don’t need to start from scratch if you want to use the same style on a widget on the next pages. Simply go to the Global tab on the left panel and drag a Global Widget you want to use to the canvas.

5. Create a more engaging landing page with premium widgets

As mentioned earlier, the free version of Elementor offers only about 50 widgets and they are very basic. With these basic widgets, you only be able to touch the surface area of Elementor. Whereas, there are a bunch of cool things you can do once dig deeper with the pro version. The pro version of Elementor allows you to unleash your creativity without any limitation. You can create a more engaging landing page by adding premium widgets like Animated Headline, Price Table, Flip Box, Testimonial Carousel, Reviews and so on.

6. Create beautiful forms

Want to create a form? You don’t need to install any additional plugin with Elementor Pro. The pro version of Elementor comes with a Form widget. You can create any type of form with this widget. Whether a registration form, an email subscription form, contact form, booking form, and so on. The Widget form of Elementor supports file upload, acceptance field, date field, time field, HTML field, password field, and so on.

You can also integrate your form with popular services like MailChimp, MailerLite, ActiveCampaign, GetResponse, ConvertKit, and so on. Here is the example of a form created with Elementor.

7. Create an e-commerce site

Another feature offered by the pro version of Elementor is WooCommerce Builder. This feature is especially great if you aim to create an e-commerce website with WordPress. With WooCommerce and Elementor Pro installed, you can create a single product page effortlessly. The WooCemmerce Builder of Elementor offers ready-to-use blocks to create a single product page.

You will also have more widgets after installing WooCommerce plugin on your WordPress site.

The verdict

Although you can use Elementor for free, there are a bunch of benefits you will get if you use the pro version. You will be able to create your own WordPress theme according to your style and taste. No other WordPress themes will have the same look if you create your theme yourself. The pro version of Elementor also allows you to promote your products or services in more creative ways. You can create a more engaging landing page or display promotional popups based on visitor behaviors.

Elementor itself also supports add-ons (add-ons also apply to Elementor Free). An Elementor add-on is a set of additional widgets developed by third-party developers. Coupled with the Elementor native widgets, you can create a very attractive, unique web page or website.

14 Best WordPress Page Builder Plugins (All-time)

Today, page builders have become an essential plugin for WordPress. A page builder allows you to create beautiful pages on your WordPress site without having to deal with HTML or CSS. Popular WordPress themes like Divi even have a built-in page builder.

Some WordPress theme developers — like tagDiv, Elegant Themes, and Themeco — built an exclusive page builder plugin for the themes they develop. Some use the existing page builders like Elementor and Visual Composer.

How to Choose the Right WordPress Page Builder Plugin

All page builders have the same grand purpose: to allow you to create beautiful pages without coding. You can simply drag the design elements — buttons, images, texts, videos, slides, carousels, and so on — to the canvas area. Each element comes with setting options to tailor the styles according to what you want to accomplish.

There is not only a single page builder out there. As mentioned above, some WordPress theme developers develop their own page builder and make it exclusively available for themes they develop. Plus, there are also page builders like Elementor and Visual Composer that can be used for any WordPress theme. Before choosing a page builder, make sure that the page builder you want to use suits the needs of the type of website you want to build.

How to know if a page builder suits a certain website type? You can check the offered design elements (on some page builders, elements are called modules or widgets). Nearly all page builders have an official website to allow aspiring users to explore what they offer. Some page builders — such as Elementor — even provides examples of the web pages and the whole websites created with them.

Another important thing you need to check is the pricing model. The vast majority of page builders offer a subscription business model, meaning that you need to spend a monthly or yearly budget as long as you still want your site to keep alive. There are also some page builders that offer a one-time purchase model, though. WPBakery, Divi, and tagDiv Composer are the examples.

Best WordPress Page Builder Plugins

To help you choose the right page builder, we have compiled the best page builder plugins for WordPress.

Best Freemium Page Builder Plugins

1. Elementor

Elementor page builder screenshot
  • Developer: Elementor Ltd.
  • Pricing model: Subscription model
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Elementor is a page builder plugin for WordPress that was released in 2016. Since then, this plugin has transformed to become one of the most-used page builders. As of May 2020, Elementor surpassed over 5 million installations. One of the reasons why Elementor has reached such a milestone in a relatively short period is because this page builder has a very intuitive user interface. Elementor has a centered setting panel (on the left side). All settings are made via this panel instead of popup like, for instance, Divi Builder. Also, Elementor comes with a bunch of ready-to-use templates, allowing you to create a beautiful web page in minutes. Another reason is that Elementor has an open enough ecosystem.

Elementor allows third-party developers to create add-ons. An Elementor add-on contains a set of widgets. Coupled with Elementor native widgets, you will have more freedom to build creative content on your WordPress site. JetElements, Essential Add-ons, PowerPack, Ultimate Addons are some examples of premium Elementor add-ons.

Elementor itself is a freemium plugin. You can use it for free, but with fewer features and widgets. With the premium version of Elementor, you will be able to create popups, create a custom header, create a custom footer, create a custom 404 page, create a single post template, create a custom category page, and so on.

2. Brizy

Brizy page builder screenshot
  • Developer: Brizy Team
  • Pricing model: Subscription model & one-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Brizy is a page builder plugin that is released as a freemium plugin, meaning that you can use it for free before you upgrade to the pro version to unlock more features. You can use it on any WordPress theme just like three page builders above. The interface of Brizy is unique enough, the combination of Elementor and Beaver Builder. You have a panel on the left panel to add design elements. While to make settings to design elements, you will have a floating editor bar, pretty similar to Gutenberg’s. Clicking the gear icon on the floating editor bar will open another panel for detailed settings.

What about premium features?

In addition to more design elements and premade templates, you can also use Brizy Pro to create a custom header, custom footer, and popup. Brizy also comes with a white label feature in case you want to rebrand it with your own brand, a great feature if you develop WordPress sites for clients.

3. Zion Builder

Zion page builder screenshot
  • Developer: Hogash
  • Pricing model: Subscription model & one-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Zion Builder is a page builder developed by Hogash, the developer that also develops the Kallyas WordPress theme. Even so, Zion Builder is not built exclusively for Kallyas. You can use it on your favorite theme. Compared to other page builder plugins in this list, Zion Builder is the youngest one. Zion Builder offers a live editing experience via its lightweight visual editor. There are tens of elements offered by Zion Builder, which are grouped into several categories to make it easier for you to find the ones you need. Elements like Tabs, Accordions, and Pricing Box are available. However, you can’t find an element to add a form to your page (version 2.2.0). If you need to add a form, you can use a form builder plugin like WPForms and Contact Form 7 and embed your forms using the Shortcode element.

The pro version of Zion Builder comes with a theme builder to allow you create a fully customized website in a visual way. It’s also for you to create a customized e-commerce site using Zion Builder Pro thanks to its WooCommerce builder feature.

4. Beaver Builder

Beaver Builder page builder screenshot
  • Developer: FastLine Media LLC
  • Pricing model: Subscription model
  • Theme ompatibility: All WordPress themes
  • Works on: Pages and posts

You can use Beaver Builder for any WordPress theme since this page builder is not developed specifically for a WordPress theme. According to a stat on its official website, Beaver Builder has been used by over 1 million users. Beaver Builder is particularly a great page builder for web developers to create websites for clients. This page builder offers three plans and all of these plans allow you to use Beaver Builder on as many sites as you want. Beaver Builder also offers a white labeling feature (Agency plan only), allowing you to change all instances of the words “Page Builder” or “Beaver Builder”.

The Beaver Builder is intended to create single pages. If you want to create a template and apply it to multiple posts, you can use the Beaver Themer. With Beaver Themer, you will also be able to create a custom header, custom footer, and other elements of a WordPress theme. Unfortunately, you need to spend extra cost to use Beaver Themer. Beaver Themer is a Beaver Builder add-on. Much like Elementor’s Theme Builder, but available as a separated product.

5. Visual Composer

Visual Composer page builder screenshot
  • Developer: TechMill Ltd.
  • Pricing model: Subscription model
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Visual Composer is another great tool that you can use to create beautiful content on your WordPress site without coding. You can use Visual Composer, no matter the theme you use. Visual Composer is available as a freemium plugin. However, the free version comes with very limited features. There is no option to use any template. Neither set the page layout. All of those options are only available on the premium version of Visual Composer.

The premium version of Visual Composer comes with a feature called Visual Composer Hub. Through this feature, you can download Visual Composer templates from the cloud, as well as blocks and add-ons. The premium version of Visual Composer also allows you to browse beautiful images from Unsplash right from the editor. Visual Composer uses a panel to customize the design elements. According to a stat on its website, this page builder plugin is used by over 300,000 users. Brooklyn is a popular WordPress that uses Visual Composer as its default page builder.

6. Page Builder by MotoPress

MotoPress page builder screenshot
  • Developer: MotoPress
  • Pricing model: Subscription model
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

MotoPress is a developer company that develops WordPress products (themes and plugins). The company also develops a page builder plugin that you can use to create beautiful pages on your WordPress site without dealing with CSS or HTML. You can also use it for free on any WordPress theme as the plugin is released as a freemium plugin. The free version of Page Builder by MotoPress offers plenty enough design elements, including Post Grid, Chart, Google Maps, Countdown Timer, Post Slider, Call To Action, Tabs, and Accordion.

Best Premium Page Builder Plugins

1. Divi Builder

Divi Builder page builder screenshot
  • Developer: Elegant Themes
  • Pricing model: Subscription model & one-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Just for your information, Divi and Divi Builder are two different products. Divi (just “Divi”) is a WordPress theme while Divi Builder is a page builder plugin. Both products are developed by the same developer (Elegant Themes). Previously, Divi Builder was only available for the themes developed by Elegant Themes (Divi and Extra), but you can now use it on any WordPress theme. Elegant Themes has released Divi Builder as a standalone page builder plugin. According to its official website, Elegant Themes already has over 600,000 users. Assuming those users downloaded Divi or Extra, the number also indicates that there are about 600,000 users who use Divi Builder.

Elegant Themes itself adopts a subscription-based business model. With a single subscribed account, you will be able to download all of the products developed by Elegant Themes:

  • Divi Builder
  • Divi Theme
  • Extra Theme
  • Monarch
  • Bloom

Elegant Themes also offers a time-time purchase option, with a higher price.

The interface of Divi Builder is a bit similar to Beaver Builder’s. You can customize a module (design element) via a popup instead of a panel like Elementor. Divi Builder has evolved. Previously, you can only use it to create single pages. Since version 4.0 (released October 2019), you can use Divi Builder to create global templates such as single post templates, category templates, 404 page template, and so on. If you don’t use either Divi or Extra, you can also use Divi Builder to create a custom header and a custom footer for the theme you are currently using.

2. Oxygen Builder

Oxygen page builder screenshot
  • Developer: Soflyy
  • Pricing model: One-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages

Oxygen Builder is a great option if you are looking for a premium page builder that offers a one-time purchase option. You can use Oxygen Builder to create a fully customized WordPress site in a visual way as the page builder also comes with a feature to create both a custom header and a custom footer. Want to create an e-commerce site using WooCommerce? Oxygen Builder also comes with a WooCommerce builder to allow you to create custom templates for WooCommerce parts single product page, cart page, check out page, shop page, and so on. The ability to add custom fields is another useful feature you might want to consider.

Oxygen Builder has no element to add a form to your page. If you need to add a form, you can use the Shortcode element to embed a form from plugins like Contact Form 7, WPForms, and other form builder plugins.

3. Breakdance

Breakdance page builder screenshot
  • Developer: Soffly
  • Pricing model: Subscription
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Breakdance is developed by same company as Oxygen Builder above. Unlike its brother, Breakdance is available with a subscription system model. The target market is still the same, though. Breakdance targets agencies or freelancers that develop websites for clients. Breakdance offers only one pricing option. A single license allows you to install it on unlimited websites.

Breakdance itself is a feature-rich page builder. It has an intuitive, easy-to-use editor. Its responsive editing feature allows you to optimize your design on every device type (desktop, tablet, and smartphone). Breakdance offers 70+ design elements to choose from. Useful elements like form builder, pricing table, and button are available. The form builder element can be integrated with marketing services like MailerLite, Mailchimp, ConvertKit, to ActiveCampaign. Furthermore, Breakdance also comes with a popup builder feature in case you need it.

4. WP Bakery

WP Bakery page builder screenshot
  • Developer: WPBakery Inc
  • Pricing model: One-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages

According to a stat on its official website, WPBakery has been used by over 4.3 million users. One of the reasons why WPBakery has become the most-used page builder probably is because this page builder is used by some theme developers as their default page builder. Some popular WordPress themes that use WPBakery as their default page builder are Kalium, Bridge, Shopkeeper, and Salient. WPBakery itself indeed allows the theme developers to include WPBakery as the built-in page builder for the themes they develop with the Extended License.

Speaking of the license, there are two license types offered by WPBakery: Regular and Extended. If you want to use WPBakery for your own website, you can use the Regular License. Conversely, you can use the Extended License if you want to build websites for your clients.

WPBakery is not built specifically for a certain theme. It works on nearly all WordPress themes. One of the interesting things about WPBakery is that it allows you to try the page builder for free before deciding to purchase a license. WPBakery also allows you to install add-ons to enhance your experience in building web pages with this page builder.

5. Avada Live (Formerly Fusion Builder)

Avada Live page builder screenshot
  • Developer: ThemeFusion
  • Pricing model: One-time purchase
  • Theme compatibility: Avada
  • Works on: Pages and posts

If you hate the subscription model and prefer to use a page builder that you can get with a one-time purchase, Avada Live can be one of the solutions. This page builder is available on Themeforest, so you can get it with a one-time purchase. However, this page builder can only be used on Avada theme. Both Avada theme and Avada Live are developed by the same developer: ThemeFusion. According to a stat on Themeforest, Avada has over 500,000 sales. This means that there are about 500,000 users who use Avada and Avada Live. You can use Avada Live to create beautiful content on your site that is built WordPress+Avada.

6. Cornerstone

Cornerstone page builder screenshot
  • Developer: Themeco
  • Pricing model: One-time purchase
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

Cornerstone is another great option if you are looking for a page builder plugin that offers a one-time purchase model. This page builder is available on CodeCanyon so that you can buy it once for lifetime use. No need to spend a subscription fee to extend the use. Cornerstone is developed by Themeco, a developer that also develops X (just “X”. It is a WordPress theme). Cornerstone has been optimized for use in the X theme, but you can also use it on other WordPress themes. The standalone plugin of Cornerstone is sold by $39.

Cornerstone comes with a bunch of design elements including Callout, Button, Author, Alert, Search, Protect, and so on (visit here for more details). Cornerstone also uses a panel to customize the elements.

7. tagDiv Composer

tagDiv Composer page builder screenshot
  • Developer: tagDiv
  • Pricing model: One-time purchase
  • Theme compatibility: Newspaper and Newsmag
  • Works on: Pages

If you want to build an online magazine or news portal, Newspaper and Newsmag are great themes you can use. Both themes are developed by the same developer: tagDiv.

tagDiv develops an exclusive page builder for both themes called tagDiv Composer. With tagDiv Composer you can design the homepage of your website via front-end editor. You can also use tagDiv Composer to create the supporting pages on your newspaper site like the about page, the contact page, the team page and so on. It’s also possible to create landing pages with this page builder. Combined, both Newspaper and Newsmag have over 100,000 sales on Themeforest.

The interface of tagDiv Composer itself is a bit similar to the interface of Elementor in which it uses a panel to make the settings instead of popup. tagDiv Composer also comes with pre-made templates to help you to create beautiful content in minutes.

8. Thrive Architect

Thrive Architect page builder screenshot
  • Developer: Thrive Themes
  • Pricing model: One-time purchase and subscription model
  • Theme compatibility: All WordPress themes
  • Works on: Pages and posts

We can’t find the number of users of Thrive Architect. One thing for sure, this page builder comes with great enough features and interface. It’s aimed specifically at online business owners. You can use it to create a better, more engaging landing page. There are over 300 beautifully designed and 100% conversion focused landing page templates offered by this page builder. All of those templates are designed specifically for:

  • Sales pages
  • Opt-in pages
  • Webinar pages

Of course, you can also use Thrive Architect for other purposes. There are two options to get this plugin. If you only need the Thrive Architect, you can get the plugin for $67 (one-time purchase). Alternatively, you can pay $19 per month to access all of the products developed by Thrive Themes.

14 Great Elementor Template Kits to Create A Beautiful Website in Minutes

In Elementor, you have two options on how you can create a webpage. First, you can create a webpage from scratch. Which means that you have to specify the design concept yourself. Second, you can use a template. There are tons of free templates available on the Elementor template library. Plus, you can also get Elementor templates from third-party sources such as TemplateMonster.

However, Elementor templates were not really intended to create a whole website until Elementor introduced Template Kit in August 2019.

What is an Elementor Template Kit?

In August 2019, the Elementor team released the first edition of Template Kit, which is aimed at digital agencies. An Elementor Template Kit itself is a set of Elementor templates with a consistent design concept. For instance, the templates on the first edition of Elementor Template Kit use a blue gradient on the upper section of each page, with free shapes as the bottom layer. Commonly, an Elementor Template Kit consists of the following page templates:

  • Homepage template
  • About page template
  • Contact page template
  • Clients page template
  • 404 page template

And so on according to the type of website the Template Kit is intended to. With a Template Kit, you can create a whole website in minutes by just importing the set of templates.

Template Kits are not only available on the Elementor template library. Some third-party sources, including TemplateMonster, also offer Elementor Template Kits. If you plan to create a website with Elementor and want to use a Template Kit, the following are the Template Kits you can take a look at.

Elementor Template Kits

1. AppRove

  • Creator: ZEMEZ
  • Ideal for: Mobile app websites
  • Available on: TemplateMonster
  • Number of pages: 5

If you are a mobile app developer and want to create a website for one of the apps you develop, this Template Kit is the perfect option. This Template Kit has a modern design, adopting the color gradient on some of its sections. There are 5 page templates offered by this Template Kit: homepage template, feature page templates, pricing page template, FAQ page template, and contact page template.

One crucial thing to note before you buy this Template Kit. The creator uses some widgets from JetElements so you need to install JetElements in order to make your templates imported perfectly.

2. Triadic

  • Creator: ZEMEZ
  • Ideal for: Creative agency websites
  • Available on: TemplateMonster
  • Number of pages: 5

If you are running a creative agency or work for a creative agency and your boss asks you to create a website for the company, you can use Triadic to create the website with Elementor. Import the templates and tailor the content and your website is ready!

The creator of Triadic also uses some widgets from JetElements, other than native Elementor widgets so you need to install the JetElements add-on on your WordPress in order to use this Template Kit. Triadic consists of 5 page templates: homepage template, about page template, service page template, project page template, and contact page template.

3. Samplic

  • Creator: ZEMEZ
  • Ideal for: Consulting company websites
  • Available on: TemplateMonster
  • Number of pages: 5

Samplic is a great Elementor Template Kit if you plan to redesign the website of your consulting company. Or, your consulting company has no website yet? With this Template Kit, you can create a website for your company in minutes. The homepage template of this Template Kit uses some attractive widgets, including Animated Box (offered by JetElements) to create a flip effect. This Template Kit also consists of 5 pages: homepage template, about page template, service page template, project page template, and contact page template.

4. Prosaica

  • Creator: ZEMEZ
  • Ideal for: Writer portfolio websites
  • Available on: TemplateMonster
  • Number of pages: 5

Are you a professional writer and want to showcase your books via a website? If yes, Prosaica is a perfect Template Kit for you. You will love its modern design. Prosaica has a black dominant concept. There is a page that is intended to showcase your books as well. Some elements, such as buttons and images, have a unique style. There is a section on the homepage to display your latest blog post, which is also designed with a unique, attractive style.

5. Imprezza

  • Creator: ZEMEZ
  • Ideal for: Creative agency websites
  • Available on: TemplateMonster
  • Number of pages: 5

Imprezza is another Elementor Template Kit aimed at creative agencies. So, if you run a creative agency and want to create a website for your company, you can use this Template Kit. With a creative design, your website can emphasis your company image as a creative agency. The creator of Imprezza adopts the Mondrianism style – the latest tendency in web design. You will have a creative-look design with some attractive animation effects.

Imprezza consists of 5 page templates. In addition to the homepage template, the creator also offers an about page template, a contact page template and two more page templates to showcase the creative projects you have worked on. Again, this Template Kit also uses some widgets from JetElements so you can need to install this add-on on your WordPress site.

6. Hostirom

  • Creator: ZEMEZ
  • Ideal for: Web hosting company websites
  • Available on: TemplateMonster
  • Number of pages: 5

Designing a website for a hosting service is not easy. If you want to start a hosting service business and have no idea about the design of the website, you can use this Template Kit that is designed specifically for such need. Hostirom consists of 5 page templates that you can use to create a whole website: the homepage template to provide the overview of your business, the about page template to display the detailed information about your hosting service business, the hosting page to display the hosting plans you offer, the domain page to allow your users to buy a domain name, and a contact page to display your detail contact info.

7. Galatea

  • Creator: ZEMEZ
  • Ideal for: Medical service websites
  • Available on: TemplateMonster
  • Number of pages: 5

Galatea is a perfect Template Kit to build a medical service website. With the website you create with Galatea, you will be able to represent your services and provide your visitors with detailed information about your team. On the homepage part, there is a section that allows your visitors to make an appointment via a form. There is also a section to showcase your certificates in a carousel. Galatea has a white-dominant design, which is identical enough to the medical world.

8. Vallees

  • Creator: ZEMEZ
  • Ideal for: Spa/beauty salo websites
  • Available on: TemplateMonster
  • Number of pages: 5

Running a beauty salon business? You can create a website to promote your business. With Vallees Template Kit, you can create a beautiful website without needing to deal with any programming code. Just import the templates and tailor the content and your website is ready. Vallees is especially a great Template Kit if you also use Instagram to promote your business. This Template Kit uses the Instagram widget from JetElements to display the Instagram feed in WordPress.

9. Champio

  • Creator: ZEMEZ
  • Ideal for: Gym websites
  • Available on: TemplateMonster
  • Number of pages: 5

If you want to build a website for a gym, whether your own gym or your client’s gym, Champio is the perfect Template Kit you can use. This Template Kit consists of 5 pages. On the homepage of this Template Kit, there is a section to display your last articles in case you often write blog posts regarding fitness. Prepare your images and import the templates and your website is ready.

10. Grandbuild

  • Creator: ZEMEZ
  • Ideal for: Construction company websites
  • Available on: TemplateMonster
  • Number of pages: 5

You can use Grandbuild to create a website for a construction company. The creator of Template Kit applies some animation effects to make your website looks more interesting, including the flip effect on the section that displays the projects you have done. The creator also makes use of the setting options available on the Button widgets from JetElements, which allow you to create an attractive button with an animation effect. This Template Kit uses orange as its base color.

11. Wizzaro

  • Creator: ZEMEZ
  • Ideal for: Consulting business websites
  • Available on: TemplateMonster
  • Number of pages: 5

Wizzaro is a Template Kit that is aimed at consultant businesses. This Template Kit adopts blue as its base color. There is an attractive animation effect on the top side of the homepage of this Template Kit. Unlike Samplic, which is also aimed at consulting businesses, Wizzaro comes with a pricing plan section. There is also a section to display your latest blog posts as well as your clients’ testimonial.

Wizzaro requires more Elementor add-ons than Samplic. In addition to JetElements, you also need to install JetBlog and JetTabs in order to make your templates perfectly imported.

12. Justicon

  • Creator: ZEMEZ
  • Ideal for: Law firm websites
  • Available on: TemplateMonster
  • Number of pages: 5

Justicon is a perfect Template Kit to build a law firm website with Elementor. This Template Kit is especially great if you are the sort of person who loves something classic since this Template Kit adopts the classic black and white concept. With this Template Kit, you will have a minimalist, yet elegant website. This Template Kit consists of 5 templates.

13. Hottrip

  • Creator: ZEMEZ
  • Ideal for: Travel agency websites
  • Available on: TemplateMonster
  • Number of pages: 5

If you run a travel agency, Hottrip is a great Template Kit to create a website for your business. You can use your website to sell your trip packages. There is also a page created to display detailed information about individual packages. This Template Kit requires JetTabs and JetElements add-ons in order to make the templates perfectly imported.

14. Markent

  • Creator: ZEMEZ
  • Ideal for: Digital agency websites
  • Available on: TemplateMonster
  • Number of pages: 5

Markent is a great Template Kit to create a website of a digital agency. This Template Kit — which consists of 5 templates — has a modern, creative look. On the top as well as the bottom sections of the homepage, you will see an elegant purple gradient. If you ever studied color theory, purple represents creativity. Which is perfect for a digital agency in which creativity is the breath. There is a section on the homepage that uses tabbing navigation. You need to install JetTabs add-on to make this navigation feature work. In addition, this Template Kit also requires JetBlog and JetElements.

Featured image

How to Create a Website Homepage with Elementor

The homepage is the most vital element of a website. It is the first thing your visitors see when they visit your website. Everything on your website homepage affects the perception of your visitors about your business. With Elementor, you can create your website homepage without having to deal with CSS or HTML code. As you have probably known, Elementor has a visual editor that allows you to create a webpage in the front end. Everything is drag and drop, no need to write any single line of code.

New to Elementor? No worries. In this post, we will show you how to create a website homepage with the world’s most popular page builder plugin. We will create a website homepage like the following.

You can use the free version of Elementor to create a website homepage like the one above. However, there is no bad if you want to upgrade your Elementor version to pro since the pro version Elementor has more features. With Elementor Pro, you will be able to create a custom header, custom footer, custom 404 page, custom single post template, popup, and so on. Read here to find the differences between Elementor Free and Elemenfor Pro.

It takes 4 sections to create a homepage like the one above.

  • Section 1: To place the company name and tagline.
  • Section 2: To place the service description.
  • Section 3: To place the team description.
  • Section 4: To place the clients’ logo carousel and closing section (the “Need more details?” sentence).

Let’s get started.

First off, login to your WordPress dashboard and create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. You will be taken to the Elementor editor after clicking the button.

To make it easy for you to identify your homepage later, we suggest you give the page title like “homepage” “front page” or something similar.

Before start working the Elementor editor, set the page layout by clicking the gear icon on the bottom side of the left panel. Set the page layout on the Page Layout option. In this example, we set the page layout to Elementor Full Width. This option will remove the sidebar of your theme (if any) and retain only the footer and header.

Section 1

  • Click the plus button to add a new section. Select the single-column structure option.
  • Go to the left panel. On the Layout section under the Layout tab, set the content width to Full Width. Also set the height to Fit To Screen
  • Go to the Style tab and set the background on the Background section. We will use an image as the background of the top section. For a better result, you can prepare a large image with a dimension of 1200px or wider. You can click the image selector to select an image.
  • Still on the Background section, set the image size to Cover.
  • Now go to the Background Overlay section and set the background overlay. In this example, we use the gradient overlay (orange and black). Set the background overlay opacity on the Opacity option.
  • Once done setting the background overly, add the Heading widget to the canvas area.
  • Go to the left panel to change the default text. You can change the text on the Title field. Also set the alignment on the Alignment option (bottom-most).
  • To change the font color, font style, and font size you can go to the Style tab. Click the color selector on the Text Color option to change the font color and click the pencil icon on the Typography option to change the font style and size.
  • Add another Heading widget for the company tagline. You can repeat the steps above to customize the new Heading widget.

Section 2

  • Add a new section by clicking the plus button. Select the single-column structure option.
  • Add the Inner Section widget. From this step, you will have two columns on Section 2.
  • Add the Image widget to the left column and select the image you want to use (make sure you have prepared the image).
  • Go to the Style tab to set the image size. You can set the size by adjusting the Width value and Max Width value on the Image section.
  • Add the Heading widget to the right column. Customize the heading by going to the Style tab on the left panel as you have done in Section 1 above.
  • Add the Text Editor widget to the right column. Place it beneath the Heading widget. Replace the default text with your own text. You can also go to the Style tab to customize the text.
  • Once done with the Text Editor widget, add the Button widget to the right column. Place it beneath the Text Editor widget.
  • Go to the left panel to customize the button. You can add a link to another page on the Link field. To change the button size, you can select from the dropdown menu on the Size option.
  • To change the button color and the border radius, you can switch to the Style tab. Set the button text color by clicking the color selector on the Text Color option and the button background color on the Background option. To set the border radius, you can go to the Border Radius option.
  • Add the Spacer widget above the Inner Section to give extra space between Section 1 and Section 2.
  • Set the space value from the left panel.
  • Add another Spacer widget beneath the Inner Section.

Section 3

  • Add a new section by clicking the plus button. Select the single-column structure option.
  • Add the Inner Section widget. From this step, you will have two columns inside section 3
  • Add the Heading widget to the left column. Replace the default text with your own text. Go to the Style tab on the left panel to customize the heading.
  • Add the Text Editor widget to the left column and place it beneath the Heading widget. Replace the default text and customize the text from the Style tab on the left panel.
  • Copy the Button widget from section two and paste it to the left panel on section 3 (beneath the Text Editor widget). This can save you time rather than creating the new button from scratch.
  • Activate the Button widget you have just copied (by clicking its handler) and change the link.
  • Add the Image widget to the right column and select the image you want to use (make sure you have prepared the image).
  • Go to the Style tab on the left panel to set the image size.
  • Activate the left column of the Inner Section by clicking its handler and go to the Advanced tab on the left panel. Change the left margin to about 40 to slide it slightly to right.
  • Activate the section (section 3) by clicking its handler and go to the Style tab. Change the background to your liking. We choose a soft blue solid background in this example.
  • Add the Spacer widget above and beneath the Inner Section widget. Change the space value to about 40.

Section 4

  • Add a new section by clicking the plus button. Select the single-column structure option.
  • Add the Heading widget. Replace the default text and set the alignment to right. Go to the Style tab on the left panel to customize the heading.
  • Add the Image Carousel and place it beneath the Heading widget.
  • Go to the left panel and select the images. In this case, the images are the logos of your clients’ company.
  • Go to the left panel to customize the carousel. You can set the number of images per slide on the Slides to Show option, image size on Image Size option and navigation style on the Navigation option. You can play around with the left panel to customize the carousel.
  • Add Inner Section and place it beneath the Image Carousel widget. Set the column ratio to about 70%:30%.
  • Add Heading widget to the left column of the Inner Section you have just added above. Replace the default text and go to the Style tab to customize the heading.
  • Add Text Editor widget to the left column of the Inner Section. Place it below the Heading widget. Replace the default text and go to the Style tab to customize the text.
  • Copy the Button widget from section 3 (or section 2) and paste it to the right column of the Inner Section widget.
  • Activate the Button widget you have just copied by clicking its handler and go to the left panel. Replace the link on the Link field under the Content tab.
  • Switch to the Advanced tab and set the top margin to about 60.
  • Add Spacer widget and place it above the Inner Section widget. Set the space value to about 40.

Done!

You can now publish your page by clicking the PUBLISH button on the bottom side of the left panel. Before publishing your page, you can also preview it first by clicking the eye icon. You can preview your page on desktop, tablet, and smartphone by clicking the device icon.

How to use the homepage on your WordPress

After publishing your page, the next step you need to do is use it on your WordPress site. To set the homepage you have just created as the homepage of your WordPress site, return to the WordPress dashboard by clicking the three-line icon on the top-left corner of the Elementor editor and click EXIT TO DASHBOARD.

On the WordPress dashboard, go to Settings -> Reading.

On the Your homepage displays option, set to A static page (select below) and select the homepage you have just created from the dropdown menu on the Homepage option.

Essential Addons Review: A Multipurpose Elementor Add-on with Creative Widgets

Plan to create a new website with WordPress and Elementor? If yes, you might want to take a look at the Essential Addons. It is one of the most popular Elementor add-ons with over 3 million downloads. How great is this add-on? Read on to figure out.

The pro version of Elementor offers tens of widgets that you can use to create your website. But sometimes, they are not enough. You need more widgets to unleash your creativity. Essential Addons offers 60+ additional widgets to your Elementor, allowing you to unleash your best potential.

A brief intro about Essential Addons

Essential Addons is one of the products developed by WPDeveloper. This add-on was released in 2017, about a year after Elementor was born. Essential Addons is not built specifically for Elementor. Instead, this plugin is also available for Cornerstone, another page builder for WordPress. For Elementor, Essential Addons is available as a freemium add-on. The free version of this add-on is available on the plugin directory of WordPress.

The widgets

An Elementor add-on comes with a set of additional widgets. Coupled with the native Elementor’s widgets, you can use them to create any kind of website. As mentioned earlier, Essential Addons comes with 60+ widgets. Some widgets are unique and not available on Elementor by default. Some have similarities to Elementor’s native widgets, but with different setting options. For instance, Essential Addons has a widget Creative Button. The same widget already offered by Elementor. But, Essential Addons offers a differentiation by allowing you to create a button with a wide range of animation effects.

If you want to create a dynamic website — such as a blog or online magazine — you will also have more options to display your dynamic content. You can, for instance, add a section on your homepage to display the latest posts in a grid mode with the EA Post Grid widget. Or, you can also use the EA Post Grid widget to display the posts on the sidebar — or any section — and filters the posts by category, tag or author.

The following are the widgets offered by Essential Addons.

Free widgets

Post GridInfo BoxProgress Bar
Post TimelineFlip BoxFeature List
Fancy TextDual Color HeadlineFluentForm
Creative ButtonsCall to ActionFacebook Feed
CountdownPricing TableSticky Video
Team MembersTwitter FeedBetterDocs Category Grid
TestimonialsData TableBetterDocs Category Box
WooCommerce Product GridFilterable GalleryBetterDocs Search Form
Contact Form 7Image AccordionAdvanced Data Table
Gravity FormsContent TickerEvent Calendar
Ninja Forms Advanced Tabs weForms
Caldera Forms Advanced Accordion Tooltip
WPFormsTypeformWoo Checkout
Formstack

Pro widgets

Post BlockContent TimelineFancy Divider
Lightbox & ModalData TableCounter
Testimonial SliderTwitter Feed CarouselTeam Member Carousel
Image ComparisonDynamic Filterable GalleryPost Carousel
Interactive PromoSmart Post ListLogo Carousel
Instagram Gallery & FeedMailchimpProtected Content
Advanced Google MapContent ToggleOffcanvas
Static ProductOne Page NavigationAdvanced Menu
Flip CarouselPrice MenuImage Scroller
Interactive CardsImage Hotspots
  • Widgets to create a dynamic website

Essential Addons is not aimed specifically at a certain website. You can use it to build any type of website. From a static website to a dynamic website. However, we find this add-on is great to build a dynamic website. There are several widgets that you can use to display the posts on your website in a wide range of ways.

  • EA Dynamic Gallery – You can use this widget to display the featured images of your post with a link to the posts.
  • EA Post Block – You can use this widget to display posts on a certain section. Posts can be filtered by category, tag or author.
  • EA Post Carousel – Display posts in a carousel.
  • EA Post Grid – Pretty similar to EA Post Block.
  • EA Smart Post List – You can use this widget to display posts on a sidebar area of your website.

In addition to the widgets above, there are also handy widgets you can apply on a dynamic website such as Content Ticker to display what’s trending today. There is also an option to add reading progress on your website.

  • Handy widget for a one-page website

Essential Addons is also great to create a one-page website such as a portfolio website or a one-page company website. Normally, you need several sections to create a one-page website with Elementor. EA One Page Navigation is a handy widget you can use for a one-page website. It allows your visitors to easily jump from a section to other sections effortlessly with a single click, instead of performing a deep mouse scroll.

  • Widgets to integrate your social media accounts with your website

Today, nearly all businesses use social media to promote their products/services. Essential Addons allows you to integrate the social media accounts of your business with your WordPress site. There are at least three widgets offered by this add-on that you can use to integrate your social media accounts:

  • EA Facebook Feed
  • EA Instagram Feed
  • EA Twitter Feed
  • EA Twitter Feed Carousel

Other features

Unlike premium Elementor add-ons like JetElements, Essential Addons doesn’t offer pre-made templates. But, features like the option to disable certain widgets are available.

After installing Essential Addons, you will have 60+ additional widgets on Elementor. Along with Elementor’s native widgets, you will have more than 100 hundred widgets. We are pretty sure that you won’t need them all. Plus, some Essential Addons (or at least the similar ones) are basically already available on the Elementor Pro.

Essential Addons allows you to streamline your Elementor by disabling the widgets you don’t need.

A crucial thing to note. If you disable a widget used on a published page, the widget will disappear on the page. So, if you want to disable an Essential Addons widget, you better do so before start working with Essential Addons.

Essential Addons also allows you to integrate your WordPress with MailChimp in use you need this service. Or, if you use LeardDash, there is an EA LearnDash Course List widget that you can use to showcase your online courses on your WordPress site.

Almost forgot, Essential Addons also has the following features:

  • Content Protection: Allows you to apply restrictions of Elementor content from being accessed by unauthorized people. This feature allows you to lock an important section of your page with a password.
  • Duplicator: Allows you to close a post. Handy if you you want to create multiple posts in a short of time

Technical support

By the time we bought the Essential Addons — it was Saturday — there was a little issue regarding the download process. The download link didn’t work. Reflexively, we tried to contact WPDeveloper to get some help. Since it was Saturday, we didn’t get the instant reply and had to wait until Monday. On Monday, once the technical support team got back to work, the problem solved. We had excellent service from the technical support team. They replied to the message we left via the live chat (we left the message on Saturday), providing an explanation about the download issue. They then gave us an alternative link to download the add-on.

What we want to say is that WPDeveloper has great technical support. If you experience a technical issue on weekdays, you can use the live chat feature to get an instant reply. Or, if you can wait, you can also create a support ticket.

Pricing

With 60+ widgets and the features like we covered above, Essential Addons charges $39.97 a year for a single site and $69.97 for multiple sites. Or, if you hate the subscription-based model, Essential Addons also offers a one-time purchase option for $169.97.

$39 is not too expensive in our perspective. There are several Elementor add-ons that charge more than that. Besides, Essential Addons also gives a 25% renewal discount.

The verdict

With 60+ additional widgets, Essential Addons is a great add-on to enhance your experience in building a website with WordPress+Elementor. There are several widgets — such as EA Post Block and EA Post Grid — that are pretty handy to create a dynamic website. Or, you can also use widgets like EA One Page Navigation to provide a great user experience if you want to create a one-page website. This add-on also has excellent technical support to help you to fix technical issues.

Overal score:

5 out of 5 stars (5 / 5)

Two Ways to Install Divi Theme/Builder in WordPress

Divi is one of the most popular WordPress themes. Same as other popular WordPress themes like Total and Newspaper, Divi also comes with a built-in theme builder called Divi Builder. Divi itself is a great theme to build a static website although you can use it to build a dynamic website.

Available as a paid theme, you can get Divi on elegantthemes.com. The developer of Divi (Elegant Themes), adopts a subscription model. After being a subscriber on elegantthemes.com, you will have access not only to Divi Theme and Divi Builder, but also other products such as Monarch and Bloom.

Just like other WordPress themes and plugins, each product you download from elegantthemes.com is available in a ZIP format. In this post, we will show you how to install both Divi Theme and Divi Builder.

The important thing to know

As mentioned, after being an Elegant Themes subscriber, you will have access to all products developed by Elegant Themes, including Divi Theme and Divi Builder.

Divi Theme and Divi Builder are two different products. You can install Divi Builder without Divi Theme in case you want to use it on a different WordPress theme.

If you prefer to install Divi Theme, you don’t need to install Divi Builder, though. The Divi Builder is an integral part of the Divi Theme and Extra Theme.

How to install Divi

There are two ways to install Divi on your WordPress. We will cover them all for you.

# Method 1: Install Divi via the WordPress dashboard

Assuming you have downloaded Divi from elegantthemes.com, follow the steps below to install it on your WordPress.

  • Install Divi Theme

Login to your WordPress dashboard and go to Appearance -> Themes. Click the Add New button on the top side.

On the next step, click the Upload Theme button and select the ZIP file of the Divi Theme. Click the Install Now button to start installing.

Go back to Appearance -> Themes and hover your mouse over the newly installed theme (Divi in this case) and click Activate to activate it.

  • Install Divi Builder

Login to your WordPress dashboard and go to Plugins -> Add New. Click the Upload Theme button on the top side followed by the Choose File button to select the ZIP file of the Divi Builder. Click the Install Now button to install the plugin. Activate immediately once installed.

# Method 2: Install Divi via FTP

The ZIP file of Divi Theme and Divi Builder have a size of 8.45 MB and 7.58 MB. If you use shared hosting, chances are you won’t be able to install them via the WordPress dashboard. If this is the case, you can install Divi via FTP.

Before being able to use FTP, you need to have an FTP account first. You can read this article to learn how to create an FTP account.

Also, you need to install an FTP client on your computer. There are a bunch of free FTP client apps out there. In this example, we use WinSCP.

  • Install Divi Theme via FTP

Launch WinSCP and login with your FTP account. Don’t forget to change the protocol to FTP if you use FTP instead of SFTP. Click the Login button.

WinSCP has a dual-panel interface, the left panel for local files and the right panel for remote files (files on your server). On the right panel, go to the “themes” folder of your WordPress site you want to install the Divi Theme to (double-click the folder to get in). Once you are there, drag the ZIP file of the Divi Theme to this folder.

Once the ZIP file is uploaded, login to the control panel of your web hosting (cPanel in most cases) and open the File Manager.

Find the ZIP file on the “themes” folder as described above. Right-click and select Extract.

You can now go to Appearance -> Themes to activate the Divi Theme.

  • Install Divi Builder via FTP

In WordPress, plugins are installed under the “plugins” folder with the full path of “wp-content/plugins”. So, to install the Divi Builder, you can go to the “plugins” folder on the right panel of WinSCP and drag the ZIP file of Divi Builder here.

Once uploaded, open the File Manager of cPanel and find the ZIP file of the Divi Builder on the “plugins” folder. Right-click and select Extract.

You can now go to Plugins -> Installed Plugins on your WordPress dashboard to activate the Divi Builder plugin you have just installed.

How to Use Elementor Widgets/Templates as Gutenberg Blocks

With Elementor or other page builders in general, you can create a beautiful page on your WordPress site without having to deal with CSS code. However, it’s impossible to create all of your website contents with Elementor. Especially if you run a dynamic website such as a blog or news portal. You keep needing Gutenberg — the default editor of WordPress — to write the articles.

As you know, Elementor comes with a bunch of unique widgets. The good news is, you can use an Elementor widget on the Gutenberg editor as a block. This is great if you want to add a visual content — such as pie chart — or other types of content in a unique way in your article. In addition to widget, you can also use an Elementor template as a Gutenberg block.

Here are the steps to use an Elementor widget/template as a Gutenberg block.

Step 1: Install the Elementor Blocks for Gutenberg plugin

Before being able to use an Elementor widget or template as a Gutenberg block, you need to install the Elementor Blocks for Gutenberg plugin first. It is an official plugin developed by the Elementor team, aiming at helping you to get the most out of Elementor on your WordPress site.

To install this plugin, go to Plugins -> Add New and find the plugin via the search box. Click the Install Now button to install it on your WordPress and activate it immediately once installed.

Step 2: Create a global widget/template

Once the plugin is installed, you can start creating a global widget or template you want to use it as a Gutenberg block. Please note that the global widget is only available on the Elementor Pro. So, if you use Elementor Free, you can only use an Elementor template as a Gutenberg block.

  • Creating an Elementor template

To create a new template in Elementor, go to Templates -> Add New.

Select the type of template you want to create and give it a name. Click the CREATE TEMPLATE button to start creating.

On the next step, you can choose whether to use a template offered by Elementor or create the template from scratch. Once the template is done, click the arrow button next to the PUBLISH button on the bottom side of the left panel and select Save as Template.

You will be asked to give your template a name once again. Simply type your preferred name and click the SAVE button.

  • Creating an Elementor global widget

In Elementor, a global widget is a widget that has been customized. You can use a global widget every time you want to create a new page with Elementor. Global widget is great if you want to use the same customized widgets for different pages since you don’t need to make the settings from the beginning.

To create a global widget, you can create a new page (Pages -> Add New) and edit it with Elementor. Or, you can also edit an existing page. On the Elementor editor, add a widget you want to make it as a global widget.

Customize your widget. Once done, right-click the widget on the Navigator and select Save as a Global.

On the next step, you will be asked to give your global widget a name. Enter your preferred name and click the SAVE button.

You can see the global widgets you have created on the Global tab on the left panel on the Elementor editor.

Alternatively, you can go to Templates -> Saved Templates. Click the Global Widget tab to see your global widgets.

Step 3: Use the Elementor global widget/template on Gutenberg

Once done with the global widget or template, you can start using it on the Gutenberg editor. To do so, create a regular post or page in WordPress (Posts -> Add New). Add a new block by clicking the plus button and select Elementor Library.

Select the global widget/template you want to use from the dropdown menu. Wait a moment until Elementor is done loading the global widget/template and it will be added to your post.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.