If I tell you: a page builder plugin which has more than 700,000 active installations, and that promises to have “no design limits”, what do you think about?

Elementor, my dear Watson!

The Elementor page builder, designed by the Pojo Themes team, has quickly become a reference for WordPress website design. For some, it even overshadows competitors like Beaver Builder, Divi Builder or Visual Composer, which have already been tested by WPMarmite.

The plugin is so successful that its designers recently decided to stop selling themes, to focus solely on Elementor!

Today, my dear Sherlocks, I suggest you see what Elementor is made of. And believe me, the interrogation will be tough.

Because, though some particularly admire the plugin, others don't exactly have the same opinion.

As a true Miss Marple of the page builder, I relied on objective analytical criteria to conduct my investigation.

Come on: take out your grey raincoat and your magnifying glass: we're going on a tough investigation of a page builder which has become a reference!

Inspector Gadget investigating on Elementor

Here is the program:

Transparency point: The different links to Elementor Pro and its paid extensions are affiliate links. That is to say, if you buy one of these plugins, WPMarmite will receive a commission. This allows us to pay for the research and writing work of the blog editors, and to buy and test other WordPress plugins.

Your best WordPress projects need the best host!

WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.

Elementor page builder

WordPress site builders who choose to use a page builder are motivated by the fact that they can start from the ground up, without having to get their hands in the technical mud.

Before diving into the subject, let's take a quick look at what the term encompasses, and then define what Elementor is, in a few lines.

What is a page builder?

A page builder is a plugin or an element of a theme that allows, thanks to widgets (image, text, button, video etc.) and ready-to-use page templates, to design your website without coding. It is very often used by drag and drop.

Elementor, what is it?

Elementor is a WordPress page builder in the form of a plugin. It allows you to create the design of a WordPress website without coding, thanks to the use of ready-to-use WordPress templates that can be dragged and dropped into your content. All changes are visible in real time.

What are the pre-integrated widgets and templates?

A variety of widgets for various and varied needs

In the free version of Elementor, you will of course find all the basic module types that are expected from a page builder. Whether that is:

  • structural elements (columns, dividers, titles, etc.)
  • the most used content widgets (buttons, icons, image widgets, shortcodes, etc.)
  • or widgets specific to WordPress (posts, categories, comments widgets, etc.)

… they're all there!

This free version also includes more specific widgets, quite cool although common: “accordion” to integrate a dynamic Frequently Asked Questions on a page, “progress bar” which allows to highlight skills or the progress of certain projects for example…

Enough to meet various and varied needs for any type of website.

Elementor general modules in the free version
Some of the Elementor free version widgets

In the Pro version of the plugin, there are additional widgets, some of which have even become essential for many website creators.

Buttons for sharing social networks, portfolios, sliders…

The 21 additional modules available in the Pro version of Elementor
The 21 additional widgets available in the Pro version of Elementor

Other more original widgets are added to the list of 21 Pro widgets, such as price tables to display your pricing, a box that allows the visitor to log in to the website, or animated titles that will boost your WordPress pages. Personally, I'm a big fan!

Example of Elementor modules
Isn't it beautiful, my animated title, above my FAQ accordion and my price table?

A wide variety of templates to be inspired by

From the most useful elements in a page builder there are the templates pre-integrated into the plugin, which allow you to start from a specific structure and design to be customized later.

In Elementor, the free version already includes some interesting templates, for all types of pages: homepages, one-page sites, resumes, “About” pages, Landing Pages…

The paying version offers more, in a rich library with varied layouts.

Elementor library

Another interesting element is a library of block templates, which enables you to integrate a pre-constructed structural element into a page. Frequently Asked Questions, call-to-action, header, customer testimonial…

A wide variety of elements that make it easier to structure the page, and to really focus on customizing the design.

This rich library of templates is regularly updated with the plugin, as indicated by Elementor's charming avatar as we scroll to the end of the list.

Elementor smiley

The possibility to create your own models

In addition to the many widgets and templates integrated into the plugin, we particularly appreciate the functionality that allows you to save a page or block as a “template”.

It comes in quite handy, when you have made an effort to customize the design of an element, and you want to reuse it on another page.

A click on the “Save” icon on the block or page you are interested in, and you have your own library of custom templates!

The option to save templates in the Elementor plugin
How easy it is to reinsert this line of icons and texts with this option!

Well, great: Elementor integrates a whole range of interesting widgets and templates. But what about the plugin's manageability, its handling and interface?

How easy is it to handle Elementor?

It is not enough for a page builder to offer good tools to be a good page builder. It also has to offer a fluid and easy experience to the website designer! And let me tell you, Elementor is not to be outdone. Let's dive right in.

Join the WPMarmite subscribers

Get the last WPMarmite posts (and also exclusive resources).

A pleasant working interface, quite simple to use

With an airy interface, Elementor really offers a pleasant working space. The plugin's features, such as the module bar, can easily be hidden or reduced, allowing you to really see the front-end rendering, without being polluted by the work interface.

In Elementor, as in many page builders, you operate by drag and drop. Block structuring is also simple: when adding a section, you simply choose the number of columns, and then start working directly in it.

Drag and drop on Elementor
Create two columns to integrate an image and a text block in no time.

For now, seems like a no-brainer.

And to make it easier to build the page, Elementor allows you to choose its default colors and fonts from the beginning, as well as some elementary settings (width of the content to insert in the page, default space between widgets…).

As a result, all the widgets integrated in the page are formatted according to these predefined criteria.

Style and settings options on Elementor
The few customization parameters that Elementor offers on each of the created pages

Editor's note: Most page builders allow you to choose these elements in their initial settings. Elementor's bonus is to be able to choose them on each page, and thus create different designs on different pages easily, if necessary.

You made a mistake on your page, by inserting a module you didn't want, or by applying unwanted features to it? Don't worry about it! Unlike Visual Composer, which requires you to install a specific plugin to get a “go back” button, Elementor takes care of it. All you need is:

  • Either use the keyboard shortcut Cltr + Z on Windows or Cmd + Z on Mac;
  • Either view the history of your actions: as on a Google Doc, you can track all the elements you have added or modified, and choose the version that suits you.
History of your Elementor page
Elementor allows you to view the entire history of the page creation

A perfect WYSIWYG interface

Yes, you read it right: from my point of view, Elementor's What You See Is What You Get is absolutely irreproachable, unlike Gutenberg, for example.

In other words: all the elements you view in the page builder's interface give the same look and feel on your website, once the page is published.

This WYSIWYG features dynamic animations, which animate the module when a change is applied to it.

And here's the reason why this WYSIWYG is perfect: the plugin allows you to visualize the effects in the creation interface when you move the mouse or scroll the page, for example.

Elementor is truly a dynamic page builder, keeping its initial promise: to simplify the creation of WordPress sites for web development enthusiasts.

A big plus compared to other page builders, which require that you constantly see a preview in the browser to evaluate the final rendering of the page.

A very high degree of personalization

Yes, when working on Elementor, you feel good. And in addition, you can go quite far customizing the different widgets, whether in terms of location, design or animation.

Some customization functions allow you to easily achieve a unique design. The types of separation between the different sections structure the page created.

To illustrate this, I let you appreciate the small geometric effect given by three of the separation forms available on Elementor: “triangle” for the first, “Tilt Opacity” for the second, and “Tilt” for the third.

An overview of the level of customization that can be achieved with the Elementor page builder

I invite you, if you use Elementor, to have fun with others, such as zig-zags and pyramids, which, if properly handled, can really help you structure a page in an elegant way.

The colour filters to be applied to the images, which opacity can be adjusted, decorate the page with a design in the colours of your graphic design.

The block shadows give depth to some key elements… Sometimes it feels like being in a PhotoShop or InDesign document, but without the somewhat rustic look of these well-known interfaces.

It is also possible to animate a number of these widgets, even when you are not a seasoned website creator.

Zoom effects, appearance, fade-in… Be careful though, even if it can be tempting to test so many customization possibilities.

Elementor's animations make your web page more dynamic
It's getting pretty animated on my Elementor test page!

A page builder that will make you click!

Since everything is rarely perfect in the world of page builders, now is the time to qualify the appreciation we have of Elementor. Indeed, it will take a lot of clicks to achieve a final result that suits you.

Between adding your module, switching between the “Content” and “Style” tabs, structuring your margins and paddings… Yes, you will probably strengthen your right index finger!

Note that you can limit this number of clicks by using the template registration features, and by qualifying your custom fonts and colors from the beginning.

So far, it makes you want to try Elementor, doesn't it? But how does this beautiful tool fit into your current theme? That is what we will now investigate.

Build your website with Elementor

Design easily the look and feel of your WordPress website with the famous page builder. Try Elementor

How does Elementor adapt to themes?

“Elementor works well with all the themes which respect the coding standards of WordPress.”

This is what the Elementor developers guarantee us. If you want to keep your current theme with the page builder, there is a good chance that it will adapt to it.

However, the same developers have taken the care to provide us with a list of themes that have been developed with Elementor compatibility in mind:

  • Generate Press: a free theme
  • Astra Theme: a theme that includes 10 pre-integrated site templates for Elementor
  • OceanWP: a theme with several basic templates
  • Hestia: a theme that focuses on graphic rendering
  • Page Builder Framework: a theme specially designed to work with page builders
  • Tesseract: another free theme (also available in Premium version) compatible with Elementor
  • Rife Free: a theme with 20 website templates

But here again, Elementor seems to push the limits of the traditional page builder. Let me explain something to you.

We can agree that a page builder, by definition, builds a page.

However, it is normal to want to customize elements common to different pages, which design is often not supported by page builders: headers, menus, blog post structures, footers…

By associating a page builder and a theme, we sometimes struggle to harmonize these different elements with the created pages, and we are sometimes satisfied with the installation of another plugin to manage them.

With the Pro version of Elementor, we discover an interesting feature to solve this problem: the “Global Widget”. Elementor allows you to create some of these elements in its interface itself, and to designate them as “global”, so that they can be used on all the pages you want.

An overview of the Global Widget feature of the Elementor builder page

Quite handy, isn't it?

And there's more. Since version 2.0, a “theme builder” is available. By this I mean that it is possible to design headers, footers and any other area of your site to replace those of the original theme.

This means that you can start from a very basic theme, such as Twenty Seventeen, and customize it completely (or only partially).

On top of that, you can choose the types of pages on which these new parts will be applied to (the home page, the posts, the whole website or else).

To see what it looks like, watch this video:

How is User Experience on a site using Elementor?

Until now, there is little to complain about in regard to the design of a site with Elementor.

But, because your website is meant to be seen by others, you have to ask yourself what experience you're offering your visitors when you choose this page builder.

Let's have a look at this!

Influence on site performance

Offering a great experience to visitors on your website is mostly about providing them with a smooth, trouble-free navigation.

And for that, the page loading speed must be optimal!

So I tested Elementor's technical performance, by testing the page I had created with Elementor, then disabling the plugin and then re-testing the same page containing the same elements, but without formatting.

The conclusion is clear:

  • The page where Elementor was activated lost only 0.1s of load time compared to the one where the plugin was activated.
  • The number of requests triggered remained the same, 5.

From my point of view, no need to worry about the performance of a website created with Elementor!

Speed up your website with WP Rocket

Turn your site into a rocket with the most powerful caching plugin recognized by WordPress experts.

SEO Optimization

Like most page builders, Elementor lets you be in charge of your SEO.

A large number of widgets included in Elementor allow you to choose the HTML tag you want to add to it: <hn> tags that optimize on-page SEO, but also <div>, <span> and <p>, which allow you to structure the content properly.

In overall, you'll get a page of which we really manage the code, to explain to Google and others how it is built.

SEO title
The choice of a tag on a title widget with Elementor

You will notice that Elementor even allows you to add a title tag <h1> to a text module. Be careful with that, as it can have negative consequences for your SEO: a page must only contain one h1 tag.

As for images and their alternative texts, essential for on-page SEO, they are managed via the Media Library of the WordPress interface itself, when you insert the media on the page.

And for everything else, you may want to use Yoast, our favorite plugin to manage your SEO.

Responsiveness

Elementor automatically creates pages adapted to all types of devices. The plugin even allows you to go further: you can switch to WYSIWYG tablet or mobile visualization, to check the look and feel on these devices.

A very handy feature to avoid making mistakes, and to think of your website in “mobile first” terms, as Google recommends.

As a result, you'll get a page that offers a beautiful experience to visitors on all devices, and make search engines happy to be able to read a really responsive site.

The responsive rendering preview setting on Elementor

And because sometimes we don't want to give the same experience to our visitors depending on whether they are on a desktop or a mobile device, Elementor allows you to hide certain widgets according to the device, from the “Advanced” tab.

Responsive mode

Editor's note: If I didn't encounter any problems during my Elementor test from this point of view, make sure you test the responsiveness on your website.

Is it scalable?

If you are embarking on the Elementor adventure, chill out: with more than 2 million active installations and a team of developers working hard on a regular basis, your plugin will be regularly updated.

We also appreciate the Trello Board of the Elementor community, where we find all kinds of interesting resources:

  • Adapted plugins and themes or even specially designed for Elementor
  • Code snippets to add to your website if necessary
  • Resources to learn how to use the plugin
  • CSS and iconographic resources…

A real gold mine, open to all, and duly supervised by Elementor's teams to offer concrete and well-oriented advice.

You can also join the official Elementor Facebook group, where you will get support.

What about the value for money?

We've already noted the quality of the free version of Elementor, in which the widgets and the quality of customization will suit most site designers very well.

But the paid version of the page builder available at $49 for 1 website, will convince you, thanks to:

  • Many additional templates to avoid starting from a blank page;
  • Essential widgets, such as the forms, call-to-action module, as well as the price tables;
  • The theme builder and the “Global Widget” feature that allow you to easily reuse entire parts on all pages.

Along with Elementor have come out a lot of add-ons and widgets that can be interesting if you want to push the experience further. Here are two of those that the Elementor community highly recommends:

Elementor Extras add-on
  • Elementor Extras (€26, around $29). This plugin will add a few widgets to your current panel: a module to easily create tables, original pre-styled titles, or engaging photo galleries. Just see if you could use these in your project.
Modules contained in the Elementor Extras plugin
The Elementor Extras plugin's widgets
Ultimate addons for Elementor
  • Ultimate Addons for Elementor ($55 / year or $249 lifetime). Yes, the price of this add-on is monstrous, we grant you that. But, as a result, you have lifelong access to multiple widgets, some of which could well become references (I'm thinking in particular of WordPress developers who use Elementor for their customers). Options to visually customize Contact Form 7 or Gravity Forms. A module to create modal pop-ups. A pre-integrated Google Maps widget. IIn short: with this plugin, you may save a certain budget that you would have spent in other plugins.

There are dozens of others, which more or less meet all the structural and design expectations of a website designer. But know that, with Elementor Pro, you should be able to get by with a good value for money.

Our final opinion

So, what do we think of this page builder, my dear Watson? Conclusion of the investigation in a few key points.

Elementor's strengths

  • The perfect WYSIWYG interface, especially in terms of animations, which makes it possible to truly know what the final result will look like. Dynamic visualization provides a pleasant workspace, where it is almost relaxing to build your page.
  • The ability to customize content in detail. The effects, the styling, the advanced settings… With Elementor, you really feel like you have control over almost everything, and you can have fun with the design of your WordPress website.
  • A free version that already offers many widgets, and an affordable paid version that adds others, among the most essential and original.

Elementor's weaknesses

  • The fact that you have to click a lot to achieve the desired result. However, this can often be said about other page builders. And then, for WPMarmite readers who don't know how to code: how many clicks would it take you to find on Google the code snippet or plugin that really suits the element you want to integrate into your website?
  • A responsive rendering that needs to be checked. Just test it in your browser to be sure you have a mobile-ready result.

Elementor: for whom?

  • For novice website creators. Being able to trust WYSIWYG makes Elementor a flagship page builder for those like me who don't have coding skills, or even design skills.
  • For beginner bloggers. With blogging-oriented widgets, such as the one that displays blog posts in specific categories, bloggers will appreciate the ease of displaying their content in the best possible way.
  • For WordPress developers. Yes, a page builder for developers: it is possible, and is now the choice of many agencies that can no longer do without Elementor. The interface is pleasant to use for them, in particular thanks to the functions which make it possible to save modules, reusable on several pages, to save a lot of time in the design of customer websites.

I was personally seduced by Elementor, which fulfilled what I expected from the plugin: a page builder quite easy to use, which allows me to visualize my page in real time in a reliable way.

This test made you want to give it a try?

Get the free version of Elementor for a first opinion or jump straight into the deep end with the pro version.

And most importantly, don't hesitate to share your experience of this page builder with us: fun times spent with the plugin, darker facts… We want to know everything!