Elementor: the definitive guide

In this guide, we're going to take a look at one of the most used page builders for WordPress: Elementor. We'll see the features it offers in the free and paid versions, how to install it and how to start using it.

In addition, in this article we'll also see an overview of the widgets available, we'll delve into the use of the Theme Builder and also mention some alternatives to this page builder.

In this article, you'll find out which are the best WordPress themes compatible with Elementor and where to find templates to start building your website.

What is Elementor

Elementor Page Builder or more simply known as Elementor is a WordPress plugin that is part of the page editors and it can be used without having to intervene in the code.

Elementor is, in fact, a page editor that is part of the visual page builder category. This means that to use it you won't need to know HTML or PHP and you'll be able to use all the functions that this plugin makes available simply through an interface.

Besides, acting directly on the front-end you'll be able to see step by step the changes you're making, and you'll always have under control the construction of your web page. This is similar to other WordPress-specific theme builders, such as the Avada Live for the Avada theme.

Elementor is quite recent as a plugin, its debut, in fact, dates back to 2016 and to this day this plugin is used in over five million websites.

Elementor provides a free version and a paid version, the Pro version, let's see what are the differences between the two.

Elementor vs Elementor Pro

With the free version, you get the editor, a set of about 30 templates and a set of widgets (around 40) that can be useful for building your site.

In addition, the free version also includes responsive editing, which means you'll be able to customize your site according to the device on which it will be viewed.

Elementor Pro is the paid, and more comprehensive version of the plugin, this one provides you with five plans based on the number of websites.

The first one, Essential, is valid for a single site and costs $49 per year, the Advanced plan is for three sites and costs $99.

Expert plans support up to 25 sites ($199 / year), Studio plans support up to 100 sites ($499 / year) and to top it off there is the Agency plan that is valid for up to a thousand sites at a cost of $999.

The pro license can be renewed annually, however, you can cancel the subscription at any time. Canceling the subscription will no longer allow access to future updates, but all the work done on your website will be maintained.

These plans differ only in the number of sites where you can use the plugin. The pro version, in each case, provides additional widgets and templates, as well as more than ten kits with templates for the entire website.

Through these template kits (which got enriched in 2019 with a series of kits released monthly) you can create an entire website on WordPress.

In these kits, you can find all the templates to build the entire site starting from the homepage to the footer.

The kits also allow you to easily customize the error pages and insert custom popups, such as the one with the suggested articles or, for example, a popup to invite a user to subscribe to the newsletter.

Another big difference between the free version and the Pro version is the Theme Builder, which is the possibility to completely customize the theme of the site, but we will come back to this feature later.

As mentioned when talking about kits, the Pro version of Elementor also allows you to create popups. In addition, the paid version also gives you access to the WooCommerce Builder which allows you to edit every single element of your eCommerce.

This Elementor feature includes several eCommerce-specific widgets such as the one to show product ratings, product image gallery, shopping cart widget, related products and many more.In this regard, if you want to learn more about this topic, I recommend reading the article on how to create an eCommerce with Woocommerce and our complete guide to eCommerce.

Along with these additional features, the Pro version includes support and updates for one year following the subscription.

While I've outlined the additional features and numerous functions of the Pro version so far, you should know that the basic version of Elementor already has huge potential in itself, and I'll shortly explain why.

Elementor: how does it work?

Elementor is a page builder, so its function will be to create pages for your website. In the plugin, you can choose whether to create a page from scratch or to start from a pre-existing template.

The main feature of this web page editor is its ease of use. To use it, in fact, you do not need any previous knowledge.

Elementor is designed to be used by everybody, therefore it provides you with contents divided into categories or blocks. Each of these blocks is already preset and lets you create and customize any element: from galleries to text, including buttons, social icons and so on.

Along with the different categories of blocks, the plugin also has a history feature that allows you to go back over your steps if you realized that you made some changes by mistake.

Moreover, as I told you at the beginning, every change you make to the site is viewable in real-time. At any time you can have a preview of how your site will look on any device: desktop, smartphone and tablet.

How to install Elementor

As we already know Elementor is a WordPress plugin, so in order to work, it will need to be installed on this CMS.

If you're getting ready to create your own site, you can consider choosing a WordPress hosting. Then you will have WordPress already installed and you will be ready to start working on your site right away.

To install this plugin, simply go to the WordPress plugin section and search for 'Elementor' using the search bar.

The first steps with Elementor

Once you have installed and activated Elementor, by clicking on the plugin you will launch the main interface. Alternatively you can proceed by creating a new page and clicking on the 'Edit with Elementor' button.

The first thing to do, to get started then, will be to choose whether to start from scratch and begin creating the different sections or use one of the templates already available.

In the latter case, after choosing the template we like best from the library, we can focus on customizing it.

In both cases, however, page construction with Elementor is based on a system of blocks that can be positioned within the page by dragging them to the desired location.

On the left portion of the screen, you will have all the widgets that you can drag and drop onto the screen in front of you.

To understand how to insert the different elements on the page imagine that you have a grid in front of you where you can arrange them. In this grid you can place the elements one on top of the other or create an internal section to place the elements in parallel, thus creating columns.

Each column can be customized in size (setting a number from 1 to 100), but remember that the total width of all columns must be 100.

In addition, each section and each widget you insert can be moved at any time by dragging and dropping. You can also duplicate individual widgets to insert more than one in the same section or move them to a new one.

To do this, just right click on the element of your interest, and select 'Duplicate', with this same procedure you can also delete the different elements.

In the left panel, at the bottom, you'll also find the history function: this will keep in memory the last operations you've done and will allow you to undo them easily if you need to.

At any time you can also save the changes you've made, without having to publish them online, just choose 'Save as Draft' from the available saving options by clicking on the up arrow next to the 'Publish' button.

For each element at your disposal you'll have three tabs: content, style and advanced.

Elements and widgets

In the editor, there are several elements that allow you to insert text fields, images, buttons and much more. We can choose to show or hide the different blocks in desktop, mobile and tablet versions. To enable/disable the different elements you just need to go to the 'Responsive' option of the 'Advanced' panel of each element.

The Header and Text Editor elements allow you to insert blocks of text on the page that can be edited by choosing the color, font and size, and you can also insert animations.

To distance the different elements from each other you can insert Dividers, these consist of horizontal elements available in various styles from the classic line to specific patterns.

Inside the divider, you can also insert text, or an icon, which can be placed in the center and thus cut the divider in half, or on the left or right. Also in this case you can choose the color of both the divider and the elements inside it.

To separate the elements we can also choose to use a Spacer, in this case, this element will give us the possibility to insert an empty space, of a size of our choice.

Another class of elements that can surely be very useful in our site is that of Buttons. Buttons could contain a combination of text and icons and you can also set the position of the icons by choosing whether to place the icon before or after the text.

Buttons traditionally have a background color and you can also set a different color for the border. Again, the color of the icons and texts are still customizable.

As with other elements, you can choose the alignment for buttons, and in this case, you must set a destination link where you will redirect the user who will click on the button. Through the link options, you can, moreover, set the button so that upon clicking the link a new window will open.

Among the basic elements, you can also find a Google Maps widget that allows you to enter the location of your business.

It is also possible to insert a carousel, i.e. a gallery of sliding images that can move automatically, thanks to Autoplay or through a click. The images of the carousel can be resized and can also contain captions.

Another interesting element is the Counter, it is an animated element that goes from a preset starting number to a final number. For example, it can be useful to use it to show completed projects. Along with other customization options, you can also choose the duration of the animation.

You can also make Tabs, each of which you can customize. In this way, for example, you can create a menu of dishes and make a tab for each type (Appetizers, Starters, etc.).

Each tab must have a title and some content, which could be text-only but it may also include media like images, videos, etc.

With the Testimonials widget, you can insert a review or a comment, the name of the person and even a photograph of him or her. To this element, you can also combine, as in the example below, the Rating element that allows you to express a rating in terms of stars (on a rating scale from 0 to 5 or to 10).

There are also other useful widgets such as the search bar, calendar, recent articles and comments in the Elements on WordPress.

The widgets I've mentioned are all part of the free version of Elementor and are just a few of the many available. Let's see, instead, which ones are unlockable by upgrading to the Pro version.

Elements of the Pro version

As I've mentioned before, Elementor Pro provides you with additional widgets. Compared to the free version, you will be able to insert and customize login panels, a countdown widget, a carousel for customer reviews and so on.

One of the most interesting widgets I would like to introduce you to is the Contact Forms widget.

This block allows you to create a form through which you can invite the user to subscribe to your newsletter or to contact you. This feature is very useful for example to insert contact forms on the page 'Contact Us'.

With this feature, you can set a first email address (default) and if you want a secondary email where you will receive the message entered by the user.

You can also choose to redirect the user to a new page, which will open automatically after completing the form, where you can thank him for contacting you.

You can also connect an email marketing platform, such as MailChimp, Drip, Convertkit and so on so that it works in an integrated way with Elementor.

This will allow you to collect the data obtained through the contact form and send it to an email marketing management system automatically.

Template library

As predicted, to start building your site you can also decide to start from a template that is already made. To do so, just start creating a new page by choosing one of the available templates.

Once you've imported the template you like, editing it and adding other elements will be even faster. Alternatively, instead of a full-page template, you can also choose to import individual blocks complete with graphics.

Using ready-made graphics will save you a bunch of time, but that doesn't mean you won't be able to customize the templates you've chosen.

In both cases, in fact, both single blocks and complete templates, after you've inserted them you can change them to your liking: in images, colors and text font.

Elementor: Templates not in the library

In addition to those in the official Elementor library, there are numerous other templates for both the Basic and Pro versions, made available by other services and plugins, let's see which are the main ones.

Envato Elements

Envato Elements is a service that provides numerous resources that can be useful in the development of a project. In Envato, you'll find audio resources, video templates, templates for presentations, 3D graphics, images, and, coming to what concerns us, numerous preset graphics and resources for WordPress.

In particular, complete kits compatible with Elementor have also been added recently.

There are more than 360 Template Kits adaptable to different types of sites from restaurants and gyms to sites for professionals, such as photographers and wedding planners, just to name a few. In addition, among the different templates available some would let you create a portfolio.

To access the resources made available by Envato, you have to subscribe monthly, the individual plan starts at €14.50 per month.

Monster Template

Here, we are talking about a marketplace where you can locate a design you are interested in and buy it to use for your web project.

On the site there are several themes for various CMS and eCommerce (WordPress, WooCommerce etc) and, as you may have already guessed, there are also numerous templates for Elementor.

With Monster Template you can purchase individual themes or templates that interest you individually, prices vary from template to template.

The platform has also made available subscription plans (monthly or yearly). With these plans you can access the resources and download them as many times as you want.

Here are the available plans:

• Creative for $6.80 per month or $82 per year
• All-in-one at $14.90 per month ($179 per year) also includes themes for WordPress and other CMSes
• All-in-one ∞ same resources as the all-in-one option, but with a lifetime license that can be purchased for $599

Launch Party

Launch Party provides completely free templates for Elementor (and also for the Theme Builder).

Unfortunately, the site may be deactivated soon, as the creator has announced that he can no longer support the project after the arrival of version 3.0 of Elementor.

Update: As expected, LaunchParty is no longer available.
The video tutorials will still be available until December 31, 2020, and you can still download the templates, from this page (the project founder's personal website).

Elementorism

The Elementor section of CSSIgniter includes an assortment of both free and paid templates. There are preset templates available for landing pages, portfolios and event pages, for example.

Except for the free templates, the templates are accessible only through an annual subscription. You can subscribe by choosing only the templates for Elementor (currently $34.30) or just the WordPress themes, or opt for the license which grants access to all products.

Elementor Theme Builder

With the Pro version of Elementor you'll also have access to the Theme Builder and thus have the possibility to build a theme tailored to your website.

This feature will allow you to create blocks and even entire custom pages and save them, so you can use them on multiple websites.

You can choose what kind of a template you want to create from those available: from a single section to a full page, but also individual elements such as popups, header, footer and archive pages.

With the Theme Builder, you can also create templates for individual products of your WooCommerce site and create fully customized 404 error pages, if you want you can learn more by reading what are error pages.

You can set up templates to use for search results pages within your site, and Elementor's Theme Builder will also allow you to create an additional template for a single article or post.

This will ensure that within a single article you can use sections that are not common to the rest of the site. In this way, for example, you'll have the possibility to use different templates for articles in different categories.

As far as single posts are concerned, the Theme Builder allows you to exploit all the elements that can be useful to you, such as post Title, Content, Article Summary, Comments, Featured Image, Author Box and so on.

In fact, from time to time, depending on the type of template you are going to create, the Theme Builder will provide you with different widgets.

Best Themes for Elementor

One of the advantages of this plugin is that it can adapt to practically any theme available for WordPress.

However, to get better performance from your site it is recommended to use one of the themes suggested by the developers themselves. Let's see some of them together.

Hello Elementor

Hello is the theme that perhaps offers the greatest compatibility with Elementor. As revealed by the developers themselves, most of the tests on the new versions of Elementor were performed using this theme.

The theme is particularly suitable for the creation of landing pages, whose main feature must be to load quickly. Here is a small overview showing the speed of Hello compared to two other themes (Divi and Avada).

Layers

Among the free themes available to you that are suitable for Elementor is Layers. This theme integrates with other marketing tools helping you increase traffic and conversions to your website.

OceanWP

This is another free theme recommended to be used in conjunction with Elementor (and Elementor Pro). This theme is suitable for creating professional sites, of any theme, and it also integrates very well with WooCommerce.

OceanWP provides several layouts and even ready-made graphics that can be imported and then edited via Elementor.

The theme also has additional extensions that can be obtained by purchasing one of the pro licenses available: the personal one, valid for one site, the business one for three sites and finally the agency one for up to 25 sites.

Astra Theme

This theme features great loading speed and it is also optimized for search engines. I've already told you in other articles about how to speed up WordPress  and optimize your site and explained the importance of having a fast site.

The Astra theme not only integrates with Elementor, but also with many other popular plugins, such as YoastSeo and WooCommerce.

GeneratePress

Once again, this is a theme available in a free and a pro version. GeneratePress is a theme that makes lightness its strong point, along with code stability.

The premium version includes all additional modules and full access to the library with ready-made templates that will help you build your website.

Alternatives to Elementor

Gutenberg

If you are still not aware, Gutenberg is the official WordPress editor starting with version 5.0, although it was already available with previous versions in the form of plugins.

Gutenberg is based on blocks: the title, the paragraph, the image and so on, each of these elements is treated as a standalone block within a page.

The standard blocks are therefore the title, text, cover, featured image, tables, quoted text, bulleted lists, other media within the text and galleries.

Then there are blocks that allow embedding, that is, it allows you to embed social media posts or YouTube videos. In addition to the default blocks, you can also insert custom blocks.

Once you have inserted the blocks you need you can use Gutenberg as if it were a page builder. The editor offers you the possibility to reposition the blocks as you like.

For each block, moreover, there are additional settings that allow you to intervene, for example, on the background color (which must be one for each block), on the color of the font used and so on.

Also, if you need to move several blocks together, you can simply highlight them to move or edit them without having to act on individual modules.

Compared to Gutenberg, Elementor lets you customize your pages more thoroughly. First of all, with Elementor you have the possibility to divide your content into columns, so next to the sections you can make further subdivisions that allow you to create more elaborate content.

Besides, Elementor gives you the possibility to preview the changes you're making, letting you save a lot of time.

Also, Elementor gives you the ability to preview the changes you are making, allowing you to save a lot of time.

Compared to Gutenberg, this plugin also provides you with other elements such as tabs and buttons. Adding the Theme Builder features takes the power of Elementor to a much deeper level of processing your website.

Oxygen Builder

This page builder for WordPress is available in the Basic version for $99. This is an unlimited license and therefore it does not need to be renewed periodically.

Then there is the WooCommerce plan that includes the integration of the page builder with WooCommerce, and finally, the Agency version to build professional websites for your clients.

One of the advantages of the Oxygen license is that there are no limits on the number of sites on which the page builder can be used.

Oxygen does not need compatibility with WordPress themes because it automatically disables themes. Excluding WordPress themes makes the website feel light and page loading is even faster.

Moreover, considering that this plugin also allows you to edit every part of the site, including the header and footer, more than a page builder it can be called a 'site builder'.

Oxygen presents a library with pre-set templates, or even single modules, that you can use to start building your website. Alternatively, with the theme builder, you can also create your own template from scratch.

Conclusion

In this guide, we've seen everything that Elementor has to offer as a page builder, while also dwelling on the many additional resources that can be useful to you as you get started on building your website.

What about you, which page builder do you use? Have you ever tried Elementor? Let me know in the comments below.