Elementor : Enquête sur un constructeur de page WordPress qui intrigue

Si je vous dis : un plugin de constructeur de page qui présente plus de 700000 installations actives, et qui promet d’être “sans limite de conception”, vous me dites ?

Elementor, mon cher Watson !

Le page builder Elementor, conçu par l’équipe de Pojo Themes, est rapidement devenu une référence pour la conception de sites WordPress, au point de faire quelque peu d’ombre aux Beaver Builder et autres Visual Composer, que la Marmite a déjà testés pour vous.

Le plugin connaît d’ailleurs un tel succès que ses concepteurs ont récemment décidé d’arrêter de vendre des thèmes, pour se consacrer uniquement à Elementor !

Qu’à cela ne tienne, mes petits Sherlock en herbe : je vous propose aujourd’hui de voir ce qu’Elementor a dans le ventre. Et croyez-moi, l’interrogatoire va être musclé.

Parce que, si certains admirent particulièrement le plugin, d’autres n’hésitent pas à le mettre sur le banc des accusés de manière virulente. Ainsi Maxime de WPChef avait fait part à notre chef cuistot Alex de ses déboires avec Elementor :

En véritable Miss Marple du constructeur de page, pour mener mon enquête, je me suis appuyée sur des critères objectifs d’analyse.

Allez : sortez votre imperméable gris et votre loupe : on part sur l’enquête musclée d’un constructeur de page devenu référence !

Et pour ce faire, nous gardons toujours les mêmes critères de test, que vous retrouverez dans le sommaire :

• Quels modules et templates pré-intégrés ?
  1. Une variété de modules pour des besoins divers et variés
  2. Une grande diversité de templates pour s’inspirer
  3. La possibilité de créer ses propres modèles
• Quelle maniabilité ?
  1. Une interface de travail agréable, assez simple à prendre en main
  2. Une interface WYSIWYG irréprochable
  3. Une personnalisation très poussée
  4. Un page builder qui fera beaucoup travailler votre souris !
• Quelle adaptation aux thèmes ?
• Quelle expérience utilisateur pour un site utilisant Elementor ?
  1. Influence sur la performance du site
  2. Optimisation du SEO
  3. Responsiveness
• Quelle évolutivité ?
• Quel rapport qualité/prix ?
• Notre avis final
  1. Les points forts d’Elementor
  2. Les points faibles d’Elementor
  3. Elementor : pour qui ?

1/ Quels modules et templates pré-intégrés ?

Les créateurs de sites WordPress qui choisissent d’utiliser un constructeur de page sont motivés par le fait de pouvoir partir d’une base, sans avoir besoin de mettre les mains dans le cambouis technique. Examinons de près ce qu’Elementor a à offrir du point de vue des modules et des templates.

Une variété de modules pour des besoins divers et variés

Dans la version gratuite d’Elementor, vous retrouverez bien sûr tous les types de modules basiques que l’on attend d’un constructeur de page. Qu’il s’agisse :

• d’éléments structurels (colonnes, diviseurs, titres…)
• des modules de contenu les plus utilisés (boutons, icônes, module d’image, de shortcodes…)
• ou de modules spécifiques à WordPress (modules d’articles, de catégories, de commentaires…)

… ils sont tous là.

On note aussi dans cette version gratuite des modules plus spécifiques, assez appréciables bien que courants : “accordéon” pour intégrer une Foire Aux Questions dynamique à une page, “barre de progression” qui permet de mettre en avant des compétences ou l’avancement de certains projets par exemple… De quoi répondre à des besoins divers et variés pour tout type de site.

Certains des modules proposés dans la version gratuite d’Elementor

Dans la version Pro du plugin, on voit apparaître des modules supplémentaires, dont certains sont même devenus incontournables pour un bon nombre de créateurs de sites. Boutons de partage réseaux sociaux, portfolio, sliders…

Les 21 modules supplémentaires disponibles dans la version Pro d’Elementor

D’autres modules, plus originaux s’ajoutent à la liste de 21 modules Pro, tels que des tables de prix pour afficher les tarifs de vos offres, une boîte qui permet au visiteur de se connecter au site, ou encore des titres animés qui viendront dynamiser vos pages. Personnellement, j’en suis gaga !

Il est pas beau, mon titre animé, au-dessus de mon accordéon FAQ et ma table de prix ?

Une grande diversité de templates pour s’inspirer

Autre élément des plus utiles dans un constructeur de page : les templates, ces modèles pré-intégrés au plugin, qui permettent de partir d’une structure et d’un design spécifique à personnaliser par la suite.

Dans Elementor, la version gratuite inclut déjà quelques templates intéressants, pour tous types de pages : pages d’accueil, sites en one-page, CV, page “à propos”, Landing Pages… La version payante, elle, en rajoute encore, dans une bibliothèque riche aux mises en page variées.

Y’en a, du template de page, dans la version Pro d’Elementor !

Autre élément intéressant : une bibliothèque de templates de blocs, qui permet d’intégrer un élément structurel pré-construit à une page. Foire Aux Questions, call-to-action, header, témoignage client…

Une grande variété d’éléments qui permettent de faciliter le travail de structuration de la page, et de vraiment se concentrer sur la personnalisation du design.

Cette riche bibliothèque de templates est régulièrement mise à jour avec le plugin, comme nous l’indique le charmant avatar d’Elementor lorsque l’on défile jusqu’à la fin de la liste.

La possibilité de créer ses propres modèles

Au-delà des nombreux modules et templates intégrés à l’extension, on appréciera particulièrement la fonctionnalité qui permet d’enregistrer une page ou un bloc comme “modèle”.

Pratique lorsque l’on s’est évertué à personnaliser le design d’un élément, et qu’on souhaite le réutiliser sur une autre page. Un clic sur l’icône “Sauvegarder” sur le bloc ou la page qui vous intéresse, et vous voilà avec votre propre bibliothèque de templates personnalisés !

Facile de réinsérer cette ligne d’icônes et de textes avec cette option !

Bon, super : Elementor intègre toute un panel de modules et de templates intéressants. Mais qu’en est-il de la maniabilité du plugin, de sa prise en main et de son interface ?

2/ Quelle maniabilité ?

Il ne suffit pas qu’un page builder propose de bons outils pour être un bon constructeur de page : encore faut-il proposer une expérience fluide et aisée au concepteur du site ! Et de ce point de vue, Elementor n’est pas en reste. La preuve dans cette partie.

Une interface de travail agréable, assez simple à prendre en main

Avec une interface aérée, Elementor propose vraiment un espace de travail agréable. Les fonctionnalités du plugin, comme la barre contenant les modules, peuvent être aisément masquées ou réduites, ce qui permet de véritablement se rendre compte du rendu en front, sans être pollué par l’interface de travail.

Sur Elementor, comme sur de nombreux constructeurs de page, on travaille en glisser-déposer. La structuration des blocs est elle aussi simple : lors de l’ajout d’une section, on choisit tout simplement son nombre de colonnes, pour ensuite commencer directement à travailler dedans.

Création de deux colonnes pour intégrer une image et un bloc de texte, en un rien de temps.

Niveau ergonomie, on s’oriente donc sur un sans-faute.

Et pour faciliter la construction de la page, Elementor permet dès le début de choisir ses couleurs et polices par défauts, ainsi que quelques réglages élémentaires (largeur du contenu à insérer dans la page, espace par défaut entre les widgets…).

Résultat : tous les modules intégrés à la page se mettent en forme selon ces critères pré-définis.

Les quelques paramètres de personnalisation que propose Elementor sur chacune des pages créées

Vous faites une erreur sur votre page, en insérant un module que vous ne vouliez pas, ou en lui appliquant des caractéristiques non désirées ? Pas de souci ! Contrairement à Visual Composer, qui demande d’installer un plugin spécifique pour avoir un bouton “retour en arrière”, Elementor pense à vous. Il vous suffit :

• Soit d’utiliser le raccourci clavier préféré des têtes-en-l’air (Cltr + Z sur Windows ou Cmd + Z sur Mac) ;
• Soit de visualiser l’historique de vos actions : comme sur un document Google Docs, vous pouvez suivre tous les éléments que vous avez ajouté ou modifié, et choisir la version qui vous convient.

Elementor permet de visualiser l’ensemble de l’historique de la création de la page

Une interface WYSIWYG irréprochable

Oui, vous avez bien lu : de mon point de vue, le What You See Is What You Get d’Elementor est absolument irréprochable, contrairement à Gutenberg par exemple. En d’autres termes : tous les éléments que vous visualisez dans l’interface du constructeur de page donnent le même rendu sur votre site web, une fois la page publiée.

Ce WYSIWYG présente des animations dynamiques, qui animent le module lorsqu’on lui applique un changement : pratique pour savoir que votre modification a été appliquée.

Et quand je vous dis que ce WYSIWYG est parfait, c’est qu’Elementor va très loin : le plugin vous permet de visualiser dans l’interface de création les effets au passage de la souris ou au défilement de la page, par exemple.

On est vraiment devant un constructeur de page dynamique, qui tient sa promesse initiale : simplifier la création de sites WordPress pour les béotiens du développement web.

Un gros plus par rapport à d’autres page builders, qui demandent qu’on déclenche sans cesse un aperçu dans le navigateur pour se rendre compte du rendu final de la page.

Une personnalisation très poussée

Oui, sur Elementor, on se sent bien. Et en plus, on peut aller très loin dans la personnalisation des différents modules, que ce soit en termes d’emplacement, de design ou d’animation.

Certaines fonctions de personnalisation permettent d’atteindre de manière simple un design unique. Les formes de séparation entre les différentes sections structurent la page créée. Pour illustrer cela, je vous laisse apprécier le petit effet géométrique donné par trois des formes de séparation disponibles sur Elementor : “triangle” pour la première, “Tilt Opacity” pour la deuxième, et “Tilt” pour la troisième.

Je vous invite, si vous utilisez Elementor, à vous amuser avec d’autres, telles que les zig-zag et les pyramides qui, bien maniées, peuvent vraiment permettre de structurer une page de manière élégante.

Les filtres de couleur à apposer sur les images, dont on peut régler l’opacité, habillent la page d’un design aux couleurs de votre charte graphique. Les ombres à intégrer sur les blocs donnent une profondeur à certains éléments-clés… On a parfois l’impression d’être dans un PhotoShop ou un InDesign, mais sans l’aspect quelque peu rustre de ces interfaces bien connues.

Il est également possible d’animer un certain nombre de ces modules, même lorsque l’on n’est pas un créateur de site aguerri. Effets de zoom, d’apparition, de fade-in… Attention toutefois à l’effet sapin de Noël, même s’il peut être tentant de tester autant de possibilités de personnalisation.

Ça s’anime pas mal, sur ma page-test d’Elementor !

Un page builder qui fera cependant beaucoup travailler votre souris !

Mais comme tout est rarement tout rose au pays des constructeurs de page, voici venu le moment de nuancer l’appréciation qu’on se fait d’Elementor. Il vous faudra en effet beaucoup de clics pour arriver à un résultat final qui vous convient.

Entre l’ajout de votre module, le passage entre l’onglet “Contenu” et l’onglet “Style”, la structuration de vos marges et de vos paddings… Oui, vous allez sans doute muscler votre index droit !

Notons tout de même qu’il est possible de limiter ce nombre de clics en utilisant les fonctionnalités d’enregistrement de modèles, et en qualifiant bien dès le début ses polices et couleurs personnalisées.

Jusque là, ça donne envie d’essayer Elementor, n’est-ce pas ? Mais comment s’adapte donc ce bel outil à votre thème actuel ? C’est ce que nous allons désormais investiguer.

3/ Quelle adaptation aux thèmes ?

“Elementor fonctionne bien avec tous les thèmes qui respectent les standards de développement de WordPress”

C’est ce que nous certifient les développeurs d’Elementor. Si vous souhaitez garder votre thème actuel avec le page builder, il y a donc de fortes chances qu’il s’y adapte.

Cependant, les mêmes développeurs ont pris le soin de nous indiquer une liste des thèmes qui ont été développés avec une compatibilité Elementor en tête :

• Generate Press : un thème gratuit
• Astra Theme : un thème qui comprend 10 templates de sites pré-intégrés pour Elementor
• OceanWP : un thème comprenant plusieurs templates de base
• Hestia : un thème qui se focalise sur le rendu graphique
• Page Builder Framework : un thème pensé spécialement pour fonctionner avec les constructeurs de page
• Tesseract : un autre thème gratuit (et aussi disponible en version Premium) compatible Elementor
• Rife Free : un thème comprenant 20 templates de site web
• Twenty Sixteen : l’un des célèbres thèmes natifs de WordPress

Mais là encore, Elementor semble repousser les limites du page builder traditionnel. Laissez-moi vous expliquer.

Vous m’accorderez qu’un constructeur de page, par définition, construit une page. Or, il est fréquent de vouloir personnaliser des éléments communs à différentes pages, dont le design n’est souvent pas pris en charge par les constructeurs de page : headers, menus, structures d’articles de blog, footers…

En associant un constructeur de page et un thème, on lutte donc parfois à harmoniser ces différents éléments aux pages créées, et on se satisfait parfois de l’installation d’un autre plugin pour les gérer.

Avec la version Pro d’Elementor, on découvre une fonctionnalité intéressante pour résoudre ce problème : le “Global Widget”. Elementor vous permet de créer dans son interface même certains de ces éléments, et de les désigner comme “globaux”, pour qu’ils soient utilisés sur toutes les pages que vous souhaitez.

Pratique, n’est-ce pas ?

Et il y a encore mieux. Depuis la version 2.0, un « constructeur de thème » est disponible. Par là j’entends qu’il est possible de concevoir des en-têtes, pieds de page et n’importe quelle autre zone de son site pour remplacer celles du thème d’origine.

Cela signifie que vous pouvez partir d’un thème très basique, comme Twenty Seventeen et le personnaliser entièrement (ou seulement en partie). Cerise sur le gâteau, on peut choisir les types de page sur lesquels ces nouvelles parties doivent s’appliquer (la page d’accueil, les articles, tout le site ou autre).

Pour voir ce que ça donne, regardez cette vidéo :

4/ Quelle expérience utilisateur pour un site utilisant Elementor ?

On trouve donc assez peu à redire, jusqu’alors, à la conception d’un site avec Elementor. Mais, parce qu’on ne construit pas un site pour le regarder seul derrière son écran après, et se féliciter du beau travail accompli, il faut bien se demander quelle expérience on propose à ses visiteurs lorsqu’on choisit ce constructeur de page. Voyons donc voir ça.

Influence sur la performance du site

Proposer une belle expérience aux visiteurs de son site web, c’est avant tout leur procurer une navigation fluide, sans encombres. Et pour ça, la vitesse de chargement des pages doit être optimale !

J’ai donc testé la performance technique d’Elementor, en testant la page que j’avais créée avec Elementor, puis en désactivant le plugin pour ensuite re-tester cette même page contenant les mêmes éléments, mais sans mise en forme.

Le constat est sans appel :

• La page où était activé Elementor ne perdait que 0,1s de temps de chargement par rapport à celle où le plugin était activé.
• Le nombre de requêtes déclenchées rester le même, au nombre de 5.

De mon point de vue, pas de bile à se faire donc quant à la performance d’un site créé avec Elementor !

Optimisation du SEO

Comme la plupart des constructeurs de page, Elementor s’évertue à laisser la main au concepteur du site sur sa gestion du SEO.

Un grand nombre de modules inclus dans Elementor permettent de choisir la balise HTML que l’on souhaite y apposer : balises <hn> qui optimisent le référencement de la page, mais aussi les balises <div>, <span> et <p>, qui permettent de bien structurer le contenu.

Au programme : une page dont on gère réellement le code, pour bien expliquer à Google et consorts comment elle est construite.

Le choix d’une balise sur un module de titre avec Elementor

Vous remarquerez qu’Elementor permet même d’apposer une balise de titre <h1> sur un module de texte. À ce propos, mon collègue cuistot Julien nous met en garde contre une pratique qui peut avoir des dérives négatives pour votre référencement :

“Attention : avec Elementor, le résultat n’est pas toujours propre, puisque le plugin nous laisse l’opportunité de rajouter plusieurs balises h1. On peut parfois se retrouver avec deux titres, ce qui n’est pas terrible du point de vue SEO.”

Quant aux images et leurs textes alternatifs, essentiels au SEO d’une page, on les gère sous Elementor via la Bibliothèque de Médias de l’interface WordPress elle-même, lorsque l’on insère ses visuels sur la page.

Et pour tout le reste, vous savez qu’il existe Yoast SEO, notre chouchou des plugins pour gérer son référencement.

Responsiveness

Théoriquement, Elementor permet de créer des pages automatiquement adaptées à tous les types de support. Le plugin permet même d’aller plus loin, avec la possibilité de passer en visualisation WYSIWYG tablette ou portable, pour s’assurer du rendu sur ces formats-ci.

Une fonctionnalité très pratique pour ne pas commettre d’erreur, et penser son site en termes “mobile first”, comme Google de préconise.

Résultat : une page qui propose une belle expérience aux visiteurs sur tous les supports, et des moteurs de recherche heureux de pouvoir lire un site vraiment responsive.

Et parce que parfois on ne veut pas donner le même rendu à ses visiteurs selon qu’ils sont sur ordinateur de bureau ou sur portable, Elementor vous permet de masquer certains modules selon le support, depuis l’onglet “Avancé”.

5/ Quelle évolutivité ?

Si vous vous lancez dans l’aventure Elementor, soyez rassuré : avec 700 000 installations actives et une équipe de développeurs qui travaille d’arrache-pied régulièrement, votre plugin sera régulièrement mis à jour.

Même si le plugin est traduit en Français, vous devrez cependant faire face à une documentation toujours en Anglais dans le texte, ainsi qu’un SAV anglophone, bien que très réactif et sympathique, accessible depuis votre compte Elementor.

On apprécie également le Trello Board de la communauté Elementor, où l’on trouve tout type de ressources intéressantes :

• Les plugins et thèmes adaptés, voire conçus spécialement pour Elementor
• Des snippets de code à ajouter à votre site si besoin
• Des ressources pour apprendre à manier le plugin
• Des ressources CSS, iconographiques, ou encore en rapport avec les polices de caractère…

Une vraie mine d’or, ouverte à tous, et dûment surveillée par les équipes d’Elementor pour proposer des conseils concrets bien orientés.

Vous pouvez également rejoindre le groupe Facebook officiel des “Elementors”, où vous serez épaulé dans vos questions.

6/ Quel rapport qualité/prix ?

On apprécie déjà la qualité de la version gratuite d’Elementor, où les modules et la finesse de personnalisation conviendra très bien à la plupart des concepteurs de sites.

Mais la version payante du constructeur de page, disponible à 49$ pour 1 site web, saura convaincre grâce à :

• De nombreux templates supplémentaires pour éviter de partir d’une feuille blanche ;
• Des modules réellement incontournables, comme le module de formulaires ou d’appel à l’action, ainsi que les tables de prix ;
• Le constructeur de thème et la fonctionnalité “Global Widget” qui permettent de réutiliser simplement des parties entières sur toutes les pages ;

Dans le sillage d’Elementor sont sortis de nombreux add-ons et widgets qui peuvent être intéressants si vous souhaitez pousser l’expérience. En voici deux parmi ceux que la communauté Elementor recommande chaudement :

• Elementor Extras (26€). Une extension qui rajoutera quelques modules à votre panel actuel : un module pour créer facilement des tables, des titres pré-stylisées originaux, ou encore des galeries photo bien engageantes. À vous de voir si ces éléments pourraient vous servir dans la création de votre site.

Les modules contenus dans le plugin Elementor Extras

• Ultimate Addons for Elementor (49$ / an ou 199$ à vie). Oui, le prix de cet addon est monstrueux, on vous l’accorde. Mais, à la clé, vous avez un accès à vie à de multiples modules, dont certains pourraient bien devenir des références (je pense notamment aux développeurs WordPress qui utilisent Elementor pour leurs clients). Des options pour personnaliser de manière visuelle ses formulaires Contact Form 7 ou Gravity Forms. Un module pour créer des pop-up modales. Un widget Google Maps pré-intégré. Bref : avec ce plugin, vous risquez d’économiser un certain budget que vous auriez dépensé dans d’autres extensions.

Il en existe des dizaines d’autres, qui remplissent peu ou prou toutes les attentes structurelles et design d’un concepteur de site web. Mais sachez que, déjà avec Elementor Pro, vous devriez pouvoir vous en sortir avec un bon rapport qualité/prix.

7/ Notre avis final

Alors, qu’est-ce qu’on en pense, de ce constructeur de page, mon cher Watson ? Conclusion de l’enquête en quelques points-clés.

Les points forts d’Elementor

• L’interface WYSIWYG irréprochable, notamment en termes d’animations, qui permet de vraiment savoir ce que va donner le résultat final. La visualisation dynamique donne un espace de travail agréable, où il devient presque relaxant de construire sa page.
• La capacité de détail de la personnalisation du contenu. Les effets, la stylisation, les paramètres avancés… Avec Elementor, on a vraiment la sensation d’avoir la main sur presque tout, et de pouvoir s’amuser avec le design de son site WordPress.
• Une version gratuite qui propose déjà de nombreux modules, et une version payante abordable qui en rajoute d’autres, parmi les plus essentiels et originaux.

Les points faibles d’Elementor

• Le fait que l’on doive générer beaucoup de clics à la souris pour arriver au résultat voulu. Toutefois, c’est un élément que l’on voit souvent reproché aux page builders. Et puis, pour les lecteurs de la Marmite qui ne savent pas coder : combien de clic vous faudrait-il pour trouver sur Google le snippet de code ou le plugin qui convient vraiment à l’élément que vous souhaitez intégrer à votre site ?
• Un responsive qui demande qu’on y porte un peu plus attention, et qu’on le teste pour être certain de vraiment avoir un résultat mobile-ready.

Elementor : pour qui ?

• Pour les créateurs de sites novices. Le fait de pouvoir faire confiance au WYSIWYG fait d’Elementor un constructeur de page phare pour ceux qui, comme moi, n’ont pas de compétences en code, ou même en design.
• Pour les bloggeurs débutants. Avec des modules orientés blogging, comme celui qui permet d’afficher des articles de blog suivant des catégories précises, les bloggeurs apprécieront la facilité de mettre en avant leur contenu de la meilleure manière qui soit.
• Pour les développeurs WordPress. Eh oui, un page builder pour les développeurs : c’est possible, et c’est le choix de bon nombre d’agences qui ne peuvent plus se passer d’Elementor. L’interface est agréable à utiliser pour eux, notamment grâce aux fonctions qui permettent d’enregistrer des modules, réutilisables sur plusieurs pages, pour gagner un temps fou dans la conception des sites clients.

J’ai personnellement été séduite par Elementor, qui remplit bien ce que j’attendais de lui : un constructeur de page assez simple à manier, qui me permet de visualiser ma page en temps réel de manière fiable.

Ce test vous a donné envie de tenter l’expérience ?

Procurez-vous la version gratuite d’Elementor pour vous faire un premier avis ou bien plongez directement dans le grand bain avec la version pro.

Télécharger Elementor Pro

Et surtout, n’hésitez pas à partager votre expérience de ce page builder avec nous : bons moments passés avec le plugin, anecdotes plus sombres… on veut tout savoir !