Published by on June 12, 2019 • 0 Comments • Lire en Français

If I tell you: a page builder plugin that has more than 700,000 active installations, and that promises 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 some competitors like Beaver Builder or Visual Composer.

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, if 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 who has become a reference!

Enquêtons sur le page builder 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 you to pay for the research and writing work of the blog editors, and to buy and test other plugins

1/ What are the pre-integrated widgets and templates?

WordPress site creators who choose to use a page builder are motivated by the fact that they can start from a base, without having to get their hands dirty in code. Let's take a closer look at what Elementor has to offer in terms of 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 it is:

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

… they're all here.

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

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

In the Pro version of the plugin, there are additional widgets, some of which have even become essential for many site creators. Buttons for sharing social networks, portfolios, sliders..

Les 21 modules supplémentaires disponibles dans la version Pro d’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 connect to the site, or animated titles that will boost your pages. Personally, I'm a big fan!

Plutôt sympa, ces modules originaux
Isn't it beautiful, my animated title, above my FAQ accordion and my price table?

A wide variety of templates to be inspired by

Another most useful element in a page builder is 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 paid version adds more, in a rich library with varied layouts.

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-ction, 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 extension, 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!

L'option de sauvegarde de modèles dans le plugin Elementor
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?

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

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.

Create two columns to integrate an image and a text block in no time.

For now, seems like a no-hitter.

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 pre-defined criteria.

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[/cocorico_message]

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 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. 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 reasong with 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 truely 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.

Un aperçu du niveau de personnalisation que l'on peut atteindre avec le constructeur de page Elementor

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 that can be put on images, whose opacity can be adjusted, decorate the page with a design in the colours of your graphic charter. 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 site creator. Zoom effects, appearance, fade-in… Be careful, however, even if it may be tempting to test so many possibilities of personalization.

Les animations proposées sur Elementor dynamisent votre page web
It's getting pretty animated on my Elementor test page!

A page builder that will make you click!

But since everything is rarely all perfect in the world of page builders, now is the time to nuance 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.

3/ How does it adapt to themes?

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

This is what the Elementor developers certify 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 took care to indicate a list of themes that were 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.

You will grant me that a page builder, by definition, builds a page. However, it is common to want to customize elements common to different pages, whose design is often not supported by page builders: headers, menus, blog article 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.

Un aperçu de la fonctionnalité Global Widget du page builder Elementor

Quite handy, isn't it?

And here is even better. 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 articles, the whole site or other).

To see what it looks like, watch this video:

4/ How is User Experience on a site using Elementor?

Until now, there is little to complain about the design of a site with Elementor. But, because your site 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 report is without appeal:

  • 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 site created with Elementor!

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: tags <hn> that optimize SEO on-page, but also tags <div>, <span> and <p>, which allow you to structure the content properly.

Overall, you'll get a page whose code is really easy to handle. You'll be able 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 medias 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 media. 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 site 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.

Le paramètre de prévisualisation du rendu en responsive sur 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, Elementor allows you to hide certain widgets according to the support, 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 responsive on your site.

5/ 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:

  • Plugins and themes adapted, or even specially designed, for Elementor
  • Code snippets to add to your site 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.

6/ What about the plugin's pricing?

We already appreciate 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 sheet of paper;
  • Really 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 allows you to easily reuse entire parts on all pages.

With Elementor came to market many add-ons and widgets. Those can be interesting if you want to expand the experience. Here are two of the ones that the Elementor community strongly recommends:

L'add-on Elementor Extras
  • 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.
Les modules contenus dans le plugin Elementor Extras
The Elementor Extras plugin's widgets
L'add-on Ultimate addons for Elementor
  • Ultimate Addons for Elementor ($49 / year or $199 lifetime). Yes, the price of this addon 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. In short: with this plugin, you may save a certain budget that you would have spent on other extensions.

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

7/ 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 really 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 site.
  • A free version that already offers many widgets, and an affordable paid version that adds others, among the most essential and original.

Elementor's weak points

  • The fact that you have to click a lot to achieve the desired result. However, this critic can often be made about other page builders. And also, if you don't know how to code, imagine how many clicks you would need to find on Google the code snippet, or plugin that really suits the element you want to integrate into your site…
  • 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 site creators. Being able to trust WYSIWYG makes Elementor a flagship page builder for those like me who don't have coding skills, or even designer skills.
  • For beginner bloggers. With blogging-oriented widgets, such as the one that displays blog articles 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 it now is the choice of many agencies, that can no longer do without Elementor. The interface is pleasant to use, thanks in particular to the functions that allow widgets to be saved, reused on several pages, to save a lot of time in the design of customer websites.

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

Did this test make you want to try the experiment?

Get the free version of Elementor for a first opinion, or dive straight in with the pro version.

Download Elementor Pro

And above all, don't hesitate to share your experience of this page builder with us: good moments spent with the plugin, darker anecdotes… We want to know everything!