Elementor : on a testé le constructeur de page n°1 du marché

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

Elementor, mon cher Watson !

Lancé en 2016, ce plugin – car cela en est un – connaît une croissance fulgurante et s’arrache comme des petits pains. Ses utilisateurs en sont gagas et on passerait presque pour un has been à ne pas s’en servir. 

Pour autant, mérite-t-il autant d’éloges ? Est-ce vraiment un outil à posséder absolument, ou de la poudre de perlimpinpin ?

Pour le savoir, mes petits Sherlock en herbe, je vous propose aujourd’hui de découvrir ce qu’Elementor a dans le ventre. Et croyez-moi, l’interrogatoire va être musclé.

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 d’un constructeur de page devenu LA référence sur le marché.

Initialement rédigé en mai 2018, cet article a été mis à jour en novembre 2020 pour refléter au mieux les dernières évolutions d’Elementor, qui a notamment subi une refonte majeure fin août 2020. Les versions d’Elementor testées ici sont la 3.0.13 (gratuite) et 3.0.6 (Pro).

Point transparence : Les différents liens vers Elementor Pro et ses extensions payantes sont des liens d’affiliation. C’est à dire que si vous achetez un de ces plugins, WPMarmite touchera une commission. Cela permet de rémunérer le travail de recherche et d’écriture des rédacteurs du blog et de constituer une cagnotte pour acheter et tester d’autres plugins WordPress.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Essayez o2switch

Elementor, c’est quoi ?

Elementor est un constructeur de page pour WordPress qui se présente sous la forme d’un plugin. Il permet de concevoir des pages complexes sur WordPress sans coder, grâce à l’utilisation de modèles de page tout prêts ou en partant de zéro, à ajouter en glisser déposer dans votre contenu. Tous les changements sont visibles en temps réel.

Un constructeur de page, appelé « page builder » en anglais permet, grâce à des modules (image, texte, bouton, vidéo etc.) et des modèles prêts à l’emploi, de concevoir l’apparence visuelle de votre site sans mettre les mains dans le code (ou très peu). Il s’utilise très souvent en glisser-déposer. On vous en présente neuf incontournables dans cet article.

Je viens de vous dire qu’Elementor est un page builder ? Que dis-je ? Elementor est THE page builder.

Il fait partie d’un cercle très fermé : celui des extensions cumulant plus de 5 millions d’installations actives. Elles sont seulement huit dans ce cas : Yoast SEO, Jetpack, Akismet, Contact Form 7, WooCommerce, Classic Editor et Really Simple SSL.

2016 et… dix secondes

Encore plus fou, peut-être : son succès phénoménal a été atteint en à peine quatre ans. Conçu par l’équipe de Pojo Themes en 2016, Elementor a littéralement tout avalé sur son passage : les parts de marché des constructeurs de page, et bon nombre de ses concurrents, à qui il fait pas mal d’ombre (Beaver Builder, Divi Builder, ou WPBakery Page Builder).

Pojo Themes a aussi développé ou contribué au développement de 11 extensions, dont Activity Log (100 000 installations actives) ou One Click Accessibility (40 000 installations actives). Par contre, l’équipe ne vend plus de thèmes, pour se consacrer uniquement à Elementor.

Comme la plupart des produits, Elementor a d’abord été créé pour répondre à un problème. Les membres de Pojo Themes, des professionnels du web, étaient frustrés par le processus de création d’un site WordPress, et notamment le manque de flexibilité au niveau du design.

Comme ils l’indiquent sur la page À Propos du site officiel d’Elementor, “chaque changement mineur devait être fait manuellement, avec beaucoup de code et de devinettes.”

Pour répondre à cela, devinez quoi ? Elementor a vu le jour. Avec une mission : “simplifier radicalement la construction d’un site web” avec “un minimum de tracas et un maximum de plaisir”.

Actuellement, l’équipe d’Elementor estime qu’un nouveau site web est créé toutes les dix secondes à l’aide de son constructeur de page. Une stat difficile à vérifier, mais qui témoigne de l’engouement spectaculaire pour ce constructeur de pages.

Dire que l’outil a séduit ses utilisateurs est un euphémisme. Sur sa page dédiée du répertoire officiel, Elementor enregistrait l’excellente note de 4,8/5 au moment de rédiger ses lignes. 

Un modèle open-source freemium

Basé sur le modèle open-source, comme WordPress, Elementor est un constructeur de page freemium. C’est-à-dire qu’il dispose à la fois :

• D’une version gratuite : celle présente sur le répertoire officiel.
• D’une version payante (on dit aussi premium) proposant 3 offres tarifaires, que l’on détaillera ensuite dans une partie dédiée.
  Evidemment, la version Premium, appelée Elementor Pro, est beaucoup plus fournie que la version gratuite, cela va de soi.
  Et pour info, Elementor Pro est une extension additionnelle d’Elementor : vous devez donc avoir installé la version gratuite avant, pour vous en servir. 

Que vous utilisiez l’une ou l’autre des versions, Elementor propose les mêmes caractéristiques globales : 

• Il s’utilise sans coder (ou presque pas).
• Des modèles (« templates » en anglais) vous permettent de ne pas partir de zéro.
• Le processus de création de vos pages se fait en direct. Cela signifie que vous disposerez d’un aperçu en temps réel de tous les changements opérés sur votre contenu. Vous n’aurez pas besoin de rafraîchir votre page, ou de l’ouvrir dans un nouvel onglet.
• Il fonctionne avec tous les thèmes (ou presque).
• Elementor dispose de sa propre interface : vous n’utiliserez pas celle proposée nativement par WordPress. 

En parlant de l’interface, je vous propose de la découvrir dans la partie suivante. 

Quelle maniabilité ?

Une fois débarqué sur l’interface d’Elementor pour la première fois, vous constaterez que votre écran est divisé en deux sections.

Sur la gauche, vous disposez d’une colonne de réglages qui vous offre la possibilité d’agir sur l’apparence de votre page en ajoutant des éléments (Widgets, en anglais), c’est-à-dire des blocs de contenus prêts à l’emploi (ex : Titre, Image, Vidéo, Bouton etc.).

Sur la droite, vous avez un aperçu du rendu visuel de votre page.

Comme pas mal de ses concurrents, Elementor adopte une hiérarchie au niveau des éléments qui structurent votre page : 

1. Vous ajoutez une section.
2. Vous lui agrégez un certain nombre de colonnes (1 à 10).
3. Vous incorporez vos éléments dans vos colonnes pour commencer à travailler dedans.

Voici un premier exemple visuel pour vous faire une première idée :

Une interface de travail agréable, 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 colonne contenant les éléments, peuvent être aisément masquées ou réduites, ce qui permet de véritablement se rendre compte du rendu, sans être pollué par l’interface de travail.

Sur Elementor, comme sur de nombreux constructeurs de page, on travaille en glisser-déposer. Vous choisissez l’élément de votre choix en cliquant dessus avec votre souris, puis vous le faites glisser où bon vous semble au sein de votre page.

Regardez avec ce widget Google Maps, par exemple :

Niveau ergonomie, on est plutôt pas mal.

Vous faites une erreur sur votre page, en insérant un élément que vous ne vouliez pas, ou en lui appliquant des caractéristiques non désirées ?

Pas de souci ! 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.

Si l’historique est très pratique, Elementor prend aussi soin de ses utilisateurs en leur proposant plusieurs fonctionnalités très pratiques, qui facilitent la prise en main de l’outil. 

Personnellement, j’ai particulièrement apprécié : 

• La présence d’un Finder, qui permet de rapidement mettre la main sur ce que vous recherchez. Seul petit bémol, à mes yeux : ce Finder n’est pas capable de vous recommander des widgets. Dommage.
• Les réglages avancés que vous pouvez appliquer sur un élément, une section, une colonne etc. C’est ici que vous ajusterez précisément vos marges, la largeur et l’espacement entre vos éléments et colonnes. Sans oublier la présence d’effets de mouvement et les réglages responsive.

• L’utilisation du clic droit pour déclencher l’ouverture d’un menu contextuel destiné à accomplir des actions rapides (ex : modifier, copier, dupliquer, enregistrer etc.). Une option (très) rare chez la concurrence (Divi le propose aussi, par exemple).

• Le navigateur pour avoir accès en un coup d’œil au squelette de sa page. Pour les contenus très longs, cela aide à avoir une vision globale de son contenu.

Une interface WISYWIG irréprochable

Oui, vous avez bien lu : de mon point de vue, Elementor propose une interface What You See Is What You Get (Ce que vous voyez est ce que vous obtenez) absolument irréprochable.

On apprécie particulièrement la possibilité de pouvoir procéder à des changements en ligne, directement sur les textes contenus au sein de la page. Mais aussi le fait de pouvoir redimensionner manuellement les colonnes, par exemple :

Comme vous pouvez le voir ci-dessus, 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 : l’extension 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 ou les adeptes du no-code.

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

Formez-vous à WordPress en 8 semaines

Apprenez à concevoir des sites WordPress sécurisés, rapides et conformes aux obligations légales avec la formation à distance la plus généreuse du marché (éligible aux financements)

Découvrir le programme

Le Design System

Autre élément majeur dont je voulais vous parler dans cette partie sur la maniabilité : le Design System, lancé à l’occasion de la sortie d’Elementor 3.0, en août 2020. 

Le Design System est en quelque sorte un moyen de définir votre charte graphique, pour vous en resservir facilement ensuite.

C’est à partir de cette interface que vous pouvez agir sur le design et l’apparence visuelle de votre site créé avec Elementor.

Elle se décompose en 3 parties. La première vous aide à personnaliser des couleurs et des polices globales sur tout votre site.

Comment cela fonctionne ? Vous définissez une couleur principale, puis des couleurs secondaires (le principe est le même pour la typographie).

Elles s’appliqueront ensuite sur tout votre site automatiquement. Le gain de temps est très important, puisque vous n’avez plus à vous embêter à procéder élément par élément, par exemple (sauf pour ajuster plus précisément).

La deuxième partie de l’interface concerne les “styles du thème”, qui ne sont réellement utiles que lorsque vous utilisez le Theme Builder (on en reparlera plus tard). Ici, Elementor vous laisse la main sur :

• La typographie (couleur, taille, style, hauteur de ligne, espacement, famille de police etc.)
• Les boutons (couleur, typographie, ombre, bordure, marge)
• Les images (bordure, opacité, ombres, filtres CSS)
• Les champs des formulaires (couleur, typographie, ombre, bordure, marge)

Troisièmement, vous pouvez procéder à des réglages plus classiques comme l’ajout d’un logo et d’une favicon (comme dans l’outil de personnalisation), ou l’apparence de la mise en page (ex : largeur du contenu).

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 éléments, 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 deux des formes de séparation disponibles sur Elementor : “montagnes” pour la première, et “Pyramides” pour la deuxième.

Je vous invite, si vous utilisez Elementor, à vous amuser avec d’autres, telles que les zig-zag et les triangles 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 fondu… Attention toutefois à l’effet sapin de Noël, même s’il peut être tentant de tester autant de possibilités de personnalisation.

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

Pour maîtriser Elementor sur le bout des doigts, ne plus le subir, et créer des sites professionnels de A à Z, WPMarmite propose une formation vidéo dédiée sur le sujet.

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

Quels widgets et modèles pré-intégrés ?

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

Dans la version gratuite d’Elementor, vous retrouverez un large éventail de widgets, à savoir :

• Widgets basiques : Titre, Éditeur de texte, Image, Bouton… ;
• Widgets généraux : Que l’on peut classer ainsi :
  • Widgets de contenu : Galerie, Carrousel, Onglets, Accordéons… ;
  • Widgets de persuasion : Témoignage, Notation, Barre de progression… ;
  • Widgets techniques : Code court, HTML personnalisé… ;
• Widgets WordPress : ceux que vous connaissez déjà dans l’outil de personnalisation.

De quoi répondre à des besoins divers et variés pour tout type de site.

Dans la version Pro du plugin, on voit apparaître des widgets supplémentaires, dont certains sont même devenus incontournables pour un bon nombre de créateurs de sites.

Par exemple, vous pourrez insérer des tables de prix pour afficher les tarifs de vos offres, des appels à l’action, des comptes à rebours, ou encore des formulaires.

En parlant de formulaires, le widget « Formulaire » propose d’ailleurs des fonctionnalités assez poussées. 

Il vous offre le choix parmi 20 types de champs différents, y compris certains avancés (mot de passe, téléchargement de fichier, etc.)

Vous avez bien sûr la main sur le design et l’apparence visuelle : choix des couleurs, de l’espacement, de la typographie, de l’arrière-plan etc.

Cerise sur le gâteau : Elementor permet même de créer des formulaires étape par étape. Le principe ? Dès que l’un de vos visiteurs remplit un premier champ, le deuxième s’affiche et ainsi de suite.

Ce widget pour créer des formulaires vous a mis l’eau à la bouche ? Dans la formation Maîtrisez Elementor, je vous explique par exemple quand et comment vous servir de ce widget, mais aussi à quel moment privilégier votre extension de formulaire favorite.

Une grande diversité de modèles pour s’inspirer

Autre élément des plus utiles chez un constructeur de page : les modèles, 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 modèles intéressants, pour tous types de pages : pages d’accueil, sites en one-page, CV, page « à propos », Landing Pages…

Pour en profiter, vous devrez obligatoirement créer un compte gratuit chez Elementor.

La version payante, elle, en rajoute encore, dans une bibliothèque riche aux mises en page variées.

Au total, on a recensé 230 modèles au moment d’écrire ces lignes, dont une quarantaine gratuits.

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

Les blocs

Par-delà les modèles, vous trouverez aussi une bibliothèque de blocs, qui permet d’intégrer un élément structurel pré-construit à une page (à l’instar des compositions de WordPress). 

Cette grande variété de blocs (environ 300) facilite le travail de structuration de la page, et de vraiment se concentrer sur la personnalisation de l’apparence.

Pour vous simplifier la vie, Elementor les a classés en 20 catégories : À Propos, Foire Aux Questions, Appel à action, En-tête, Témoignage client etc. :

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

Enfin, on appréciera particulièrement la fonctionnalité qui permet d’enregistrer une page ou une section 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 droit sur le bloc ou la page qui vous intéresse, et vous voilà avec votre propre bibliothèque de modèle personnalisés !

Bon, super : Elementor intègre toute un panel de widgets et de modèles intéressants. De quoi pas mal vous amuser. Mais j’ai encore mieux vous : il est possible d’aller beaucoup, beaucoup plus loin avec Elementor.

Découvrez pourquoi dans les lignes suivantes.

Des constructeurs au sein du constructeur

Le constructeur de thème

Depuis le lancement de sa version 2.0, en 2018, Elementor intègre dans sa version Pro ce qu’on appelle un Theme Builder (Constructeur de thème).

Grâce à lui, il est possible de concevoir TOUTES les parties de votre thème, pour remplacer celles d’origine. Et pas uniquement le contenu de vos pages. Vous avez aussi la main sur : 

• L’en-tête (header) ;
• Le pied de page (footer) ;
• Les pages d’archive (blog, catégorie, étiquette, etc.) ;
• La page 404 ;
• La page des résultats de recherche ;
• Les pages de publications et d’autres types de contenus.

Cela signifie que vous pouvez partir d’un thème très basique, comme Twenty Twenty, et le personnaliser entièrement (ou seulement en partie).

Attention : L’usage du Theme Builder nécessite un minimum de connaissances en webdesign et en ergonomie, pour conserver une mise en page cohérente et éviter de partir dans tous les sens. Ces principes de base sont notamment abordés dans la formation WPChef et approfondis dans Maîtrisez Elementor.

C’est déjà très appréciable, et Elementor a mis la barre encore plus haut lors du passage à sa version 3.0, fin août 2020.

À cette occasion, ses concepteurs ont refaçonné l’interface de leur Theme Builder, en centralisant au même endroit toutes les options présentes.

En un coup d’œil, vous avez désormais accès à toutes les parties de votre site, rendant le processus de création encore plus intuitif.

Comme l’explique Elementor, chaque partie du site dispose d’un aperçu automatique, avec une capture d’écran du modèle réel. Cela vous permet d’avoir un aperçu visuel de l’ensemble de votre site, afin que vous puissiez identifier le modèle exact que vous souhaitez modifier.

Pour bien comprendre le mode de fonctionnement du Theme Builder, voici une vidéo explicative publiée sur la chaîne YouTube d’Elementor :

Cet outil très puissant dispose aussi de fonctionnalités pour rendre dynamique l’affichage des différentes parties de votre page.

Grâce à lui, il est par exemple possible de créer plusieurs en-têtes en fonction de vos pages, ou encore des mises en page prédéfinies pour telle ou telle page de votre site.

Le constructeur WooCommerce

Après le Theme Builder, place au constructeur WooCommerce, le WooCommerce Builder (disponible en version Pro uniquement).

Pour fonctionner, cette option nécessite au préalable que WooCommerce soit activé sur votre site. Autrement dit, vous devez déjà posséder une boutique en ligne, ou avoir dans l’idée d’en créer une pour en tirer profit.

Si WooCommerce vous fait de l’oeil, Alex vous aide à mettre le pied à l’étrier en vous expliquant comment le paramétrer dans cette vidéo :

Extension e-commerce la plus populaire sur WordPress (5 millions d’installations actives, comme Elementor), WooCommerce reste difficile à personnaliser visuellement lorsque l’on débute, sauf si vous possédez un thème qui s’y prête.

Sur vos pages produits, par exemple, les options natives sont très limitées. En schématisant, et sans passer par le code, vous aurez du mal à modifier grand-chose, couleurs, typographie et arrière-plan mis à part.

Elementor lève en quelque sorte toutes ces barrières en vous permettant de créer des pages produits et d’archives de produits sur-mesure.

Pour cela, vous pouvez déjà vous servir de plusieurs éléments dédiés comme Titre du produit, Prix du produit, Ajout au panier etc.

Elementor permet aussi de concevoir des pages Panier, Commande et Mon Compte mais on aimerait qu’ils aillent plus loin sur ce point (peut-être dans une future version ?).

Le constructeur de pop-up

Si le Theme Builder et le WooCommerce Builder sont deux éléments marketing majeurs d’Elementor Pro, vous ne serez pas en reste si le marketing est votre coeur de métier, justement. 😉

Dans sa version Pro uniquement, Elementor propose aussi un constructeur de popup (Popup Builder), pour vous aider à multiplier vos conversions.

Une conversion est une action précise que vous souhaitez que votre visiteur accomplisse, comme télécharger un livre blanc, cliquer sur un bouton, payer un produit etc.

Une popup désigne une fenêtre qui apparaît automatiquement sur une page web, en fonction d’une action faite par l’utilisateur.

Généralement, elle permet d’atteindre 3 objectifs : capturer des emails, mettre en avant une offre promotionnelle, ou inciter à l’action.

Pour en bénéficier, vous devez la plupart du temps passer par une extension ou un outil tiers. Pour info, on vous en présente quelques-uns dans cette ressource.

Avec Elementor Pro, cette fonctionnalité est directement embarquée avec le constructeur de page, qui propose près de 150 modèles prêts à l’emploi. Idéal, si vous manquez d’inspiration.

Et là encore, le Popup builder n’a rien à envier à la concurrence : 

• Il est possible de créer quasiment n’importe quel type de fenêtre popup : en plein écran, en ligne, en barre flottante, en slide-in (la fenêtre glisse sur la droite ou la gauche de votre écran) : il y a de quoi vous contenter. 😉
• Comme tout bon constructeur de popup qui se respecte, vous pouvez déterminer quand et comment vos popups vont s’afficher. Par exemple : au clic, sur tout le site, lorsque l’utilisateur quitte votre site, au scroll, après une certaine quantité de pages consultées etc.

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.

Quelle adaptation aux thèmes et aux plugins ?

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, parmi lesquels :

• Generate Press
• Astra
• OceanWP 
• Neve 
• Page Builder Framework 
• Tesseract
• Rife Free etc.

À la recherche de thèmes WordPress optimisés pour Elementor, ou de modèles de pages pour lancer votre projet ? Direction notre article « Existe-t-il un thème idéal pour Elementor ? ». On vous y explique notamment quoi penser du thème maison d’Elementor, le fameux Hello, et pour qui il est vraiment conçu. 

Adaptation aux extensions

Après les thèmes, place aux extensions.

Le répertoire officiel WordPress en comptait près de 60 000 lors de la rédaction de cet article, et ils sont indispensables pour un débutant, notamment.

Grâce à eux, et sans coder, vous allez pouvoir ajouter de nouvelles fonctionnalités sur votre site.

Retrouvez notre top 25 des meilleures extensions WordPress dans cette ressource.

Avec Elementor, une bonne nouvelle, pour commencer : il est compatible avec presque toutes les extensions, y compris les célèbres WPML, WooCommerce etc.

Mais si vous avez bien lu, il y a une petit hic : j’ai dit “presque”. Ce qui signifie qu’il existe des conflits avec certains d’entre-eux.

Rassurez-vous, il s’agit d’une très faible minorité. Elementor vous signale les incompatibilités connues sur une page dédiée. 

Et si jamais il vous arrivait un souci entre une extension et Elementor, vous pouvez dormir sur vos deux oreilles. En cas d’erreur, consultez notre guide dédié pour vous aider à sortir du bourbier.

Un large panel d’extensions tierces pour aller encore plus loin

Avec Elementor Pro, vous avez pu constater que les possibilités créatives étaient quasiment illimitées.

Dans la majorité des cas, cela sera suffisant pour concevoir un site professionnel aux petits oignons.

Mais peut-être, si vous êtes gourmand et désirez pousser l’expérience encore plus loin, souhaiteriez-vous disposer d’encore plus de fonctionnalités dans votre boîte à outils.

C’est possible grâce à des plugins tiers – non développés par l’équipe d’Elementor -, aussi appelés addons.

Pour info, Elementor en recommande une quinzaine sur son site officiel. On vous en a sélectionné quatre qui nous ont tapé dans l’oeil :

• Ultimate Addons for Elementor (à partir de 55$/an ou 249$ à vie). Derrière cette extension, on retrouve l’expertise et le sérieux de Brainstorm Force, l’entreprise derrière le thème Astra (1 millions d’installations actives), notamment. Pour chacun des packs proposés, on apprécie de pouvoir utiliser le plugin sur un nombre illimité de sites. Vous retrouverez également des options pour personnaliser de manière visuelle vos 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.

• Crocoblock (de 80$/an à 750$ à vie) : une boîte à outils tout-en-un contenant une suite de plugins (Jet plugins), des modèles de sites, et même un thème gratuit (Kava). Au-delà de son offre très large et éclectique, CrocoBlock (lire notre test) est intéressant car il propose un ensemble de packs que l’on peut acheter individuellement en fonction de ses besoins.

• Extras for Elementor (à partir de 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.

• Unlimited Elements for Elementor (freemium) : Cette extension freemium est déjà très complète en version gratuite, puisqu’elle propose une centaine de widgets couvrant pas mal de besoins. Si vous en voulez encore plus, rien ne vous empêche de vous procurer la version Pro. Le tarif annuel démarre à 39$ pour un site, et un tarif à vie est proposé à partir de 99$.

Et pour aller encore plus loin sur le sujet, allez donc faire une petite balade sur notre sélection des meilleurs addons pour Elementor. Autre possibilité : découvrir vos propres trouvailles sur le répertoire officiel deWordPress.  

Intégration à l’éditeur de WordPress

Intéressant, n’est-ce pas ? Mais face à votre écran, une question vous taraude peut-être : comment ce bon vieux Elementor s’intègre-t-il à Gutenberg ?

Réponse : très bien, mon capitaine. Avant de développer, petit rappel rapide. Gutenberg est l’éditeur par défaut de WordPress depuis le lancement de la version 5.0 de WP, fin 2018.

C’est avec l’éditeur que vous pouvez créer vos pages et vos articles, grâce à son fameux système de blocs. 

Mais attention : Gutenberg n’est pas un constructeur de page, comme vous l’explique Alex dans cette vidéo :

Si les possibilités offertes par l’éditeur ne vous conviennent pas, vous avez la possibilité d’utiliser Elementor pour la mise en page (c’est l’un ou l’autre, mais pas les 2 en même temps).

En revanche, cela n’empêche pas des synergies entre ces 2 éditeurs.

La preuve avec l’extension gratuite Elementor Blocks for Gutenberg, créée par l’équipe d’Elementor. 

Grâce à ce plugin, vous pouvez insérer des modèles Elementor sous la forme de blocs.

Croyez-moi, c’est hyper-pratique. D’ailleurs, WPMarmite ne se prive pas de s’en servir. 😉

Tous les encarts présents sur le blog ont été insérés à l’aide de cette extension, par exemple (sans parti pris 😉 ).

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

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 ça.

Quelle expérience utilisateur ?

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 restait 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 !

D’autant plus que ses concepteurs prennent ce critère très au sérieux. La sortie de la version 3.0 du constructeur de page a par exemple apporté de sérieuses améliorations au niveau de la vitesse de chargement des pages.

Bien entendu, si vous créez une page d’un kilomètre de long avec des images énormes et des effets dans tous les sens, les performances risquent d’en prendre un coup. Mais ça sera de votre faute, pas celle d’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 référencement naturel (SEO).

Un grand nombre d’éléments 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 <header>, <footer> et <div>, qui permettent de structurer le contenu selon vos convenances.

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

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 est très mauvais 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 Médiathèque de l’interface WordPress elle-même, lorsque l’on insère ses visuels sur la page.

Pour le reste de vos optimisations, bonne nouvelle : Rank Math, SEOPress, ainsi que Yoast SEO, intègrent directement leurs réglages sur l’interface d’Elementor !

Une fois dans l’interface d’édition, rendez-vous dans les réglages de la publication (l’icône engrenage en bas à gauche). Un onglet Yoast SEO est désormais disponible :

Vous retrouverez l’interface du plugin de référencement (déjà présente dans l’éditeur de WordPress).

Parmi les réglages qui vous sont proposés, vous trouverez donc…

• Requête cible : c’est le mot-clé autour duquel vous avez optimisé votre contenu, et à partir duquel Yoast vous fera ses recommandations d’optimisations.
• Analyse de la lisibilité : une fonctionnalité qui vous indique (de manière plus ou moins pertinente) si votre page est bien organisée, et agréable à lire… mais à ne pas trop prendre au pied de la lettre !
• Analyse SEO : c’est ici que vous trouverez les recommandations du plugin (en termes de sémantique ou de longueur de contenu notamment). Attention : cette analyse peut s’avérer peu fiable en version gratuite, les fonctionnalités du plugin étant limitées.
• Les aperçus Google, Facebook, et Twitter : ils s’ouvrent dans une pop-up, et vous permettent d’optimiser vos méta-données pour ces canaux.
• Schéma : un réglage qui permet de signaler aux moteurs de recherche de quel type de page il s’agit (A propos, FAQ, navigation…) pour les aider à bien positionner votre page dans les résultats de recherche.
• Avancé : quelques réglages à propos de l’indexation de la page, de l’autorisation des robots à suivre les liens présents dessus, ou encore de l’URL canonique de votre page.
• Contenu Cornerstone : pour indiquer à Yoast SEO qu’il s’agit de l’un de de vos piliers (l’un de vos contenus les plus centraux dans votre stratégie SEO).

Que du bonheur, de ne pas devoir ressortir de l’interface d’Elementor pour soigner votre référencement !

Responsive

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

Vous pouvez aussi utiliser les raccourcis clavier Cmd + Shift + M sur Mac et Ctrl + Shift + M sur PC pour basculer d’un support à l’autre.

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é”.

Si je n’ai pas rencontré de problèmes lors de mon test d’Elementor de ce point de vue, veillez tout de même à bien tester le responsive sur votre site. Pour cela, servez-vous de cet outil gratuit : le test d’optimisation mobile de Google.

Support et assistance

Si Elementor reste un constructeur de page intuitif, flexible et adapté aux débutants, une courbe d’apprentissage sera nécessaire pour pouvoir en tirer toute la puissance.

À certains moments, il se peut que vous vous heurtiez à des blocages à l’usage. Eh oui, on ne devient pas un professionnel d’Elementor en un claquement de doigts.

Pour vous aider dans ces moments de solitude, vous pourrez vous appuyer sur un large panel de ressources variées : 

• Une documentation très fournie (Help Center) couvrant les grands domaines et fonctionnalités d’Elementor (installation, éditeur, design, mise en page, Theme Builder, templates etc.).
• Une centaine de tutoriels vidéo à retrouver sur la chaîne YouTube d’Elementor, pour ceux qui préfèrent les explications visuelles.
• Des tutoriels écrits détaillant comment créer tel ou tel type de site, en fonction de votre niche (ex : musique, café, barbier, médical etc.).
• Une Foire aux Questions (FAQ).
• Un groupe Facebook privé de plus de 80 000 membres, où vous pourrez trouver des réponses à vos questions, et les poser !

Par ailleurs, on apprécie également ce tableau Trello créé par un utilisateur néerlandais d’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 le voyez, tout cela est déjà sacrément bien fourni. Par contre, on notera quelques limites. 

Toutes ces ressources sont disponibles uniquement en anglais. C’est aussi le cas du support (assistance). Bien que très réactif et sympathique, les membres du SAV ne vous répondront pas en français.

Vous pouvez les contacter par e-mail en soumettant ce que l’on appelle un « ticket ». Contrairement à Divi, par exemple, Elementor ne propose pas un système de discussion instantané (live chat). 

Evolutivité et communauté

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

J’en veux pour preuve l’analyse de leur “changelog”, qui recense toutes les mises à jour (MAJ) opérées depuis le lancement initial du constructeur de page. 

S’il vous prend l’envie d’y jeter un oeil, vous constaterez que les MAJ sont fréquentes : en moyenne, plusieurs fois par mois.

Cela témoigne d’une volonté de l’équipe d’Elementor de faire évoluer et d’améliorer constamment leurs plugins (aussi bien la version gratuite que la version Pro).

Utiliser Elementor, c’est aussi rejoindre une communauté dynamique et enthousiaste, qui grossit de jour en jour.

Si jamais l’envie vous prend de vous y impliquer, vous ne serez pas en reste. Au-delà du groupe Facebook officiel, vous trouverez aussi :

• Une communauté de développeurs
• Des meetups Elementor. On en recense un pour l’instant en France, à Paris.
• Des utilisateurs désireux de traduire le plugin. Il existe même un groupe Facebook officiel dédié à cela : Elementor Translators.

Enfin, Elementor propose même son propre réseau-maison professionnel, appelé Elementor Experts (en version Beta, pour le moment).

S’y côtoient des développeurs, webdesigners ou encore webmarketeurs utilisant Elementor. Chacun peut exposer ses réalisations, et proposer ses services pour travailler sur des missions rémunérées.

Une bonne manière d’allier l’utile à l’agréable.

Quel rapport qualité/prix ?

D’un côté, Elementor est disponible en version gratuite. Les widgets et la finesse de personnalisation conviendront très bien à la plupart des concepteurs de sites.

La version gratuite est conseillée pour ceux qui veulent commencer à prendre le pouls du page builder, afin de voir s’il peut leur correspondre.

Elle sera suffisante si vous souhaitez procéder à quelques retouches sur vos pages, par exemple en ajoutant des éléments spécifiques à certains endroits (ex : un bouton). Vous pourrez aussi créer des landing pages pour vos projets en quelques clics.

Si vous ne souhaitez pas être limité et désirez avoir le contrôle sur tous les aspects de votre site (de l’en-tête au pied de page), la version Pro sera indispensable, puisqu’elle embarque le fameux Theme Builder sans lequel rien de tout cela ne serait possible. Et bien sûr, vous aurez un choix beaucoup plus large de templates et de blocs.

Si vous voulez concevoir des sites web professionnels de A à Z, pour vous et/ou vos clients, tournez-vous vers Elementor Pro :

Elementor Pro est disponible sous 3 offres tarifaires : Personal (49$/an), Plus (99$/an) et Expert (199$/an).

Le choix entre l’une ou l’autre des versions va dépendre de l’usage que vous souhaitez en faire, car les fonctionnalités embarquées sont exactement les mêmes dans chaque offre.

Vous souhaitez utiliser Elementor Pro sur un site seulement ? L’offre Personal est pour vous.

Vous avez besoin d’Elementor pour créer 3 sites, mais pas plus ? Tournez-vous vers l’offre Plus.

Pour de la production à plus grande échelle, choisissez l’offre Expert, qui permet de créer jusqu’à 1 000 sites.

Bon à savoir : Elementor ne propose d’offre permettant la création de sites de façon illimitée, comme le font la plupart de ses concurrents. Mais bon, si vous atteignez la barre des 1 000 sites créés à l’année, passez-moi un coup de bigot ! 😉

Vous ne trouverez pas non plus d’offre à vie (Lifetime), comme c’est le cas chez Divi, par exemple.

Avec Elementor, vous devez payer chaque année pour pouvoir continuer à bénéficier du support, des mises à jour et de l’accès aux modèles Pro. Mais chaque renouvellement annuel engendre l’application d’une réduction de 25% sur la facture totale.

Vous hésitez à franchir le cap ? Sachez qu’Elementor propose une garantie satisfait ou remboursé de 30 jours.

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.
• Les possibilités en termes de personnalisation. Les effets, la stylisation, les réglages 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 widgets, et une version payante abordable qui en rajoute d’autres, pour aller encore plus loin.
• Un large catalogue de modèles pour éviter de toujours partir d’une feuille blanche.
• Son constructeur de thème (version Pro) pour créer des sites intégralement avec Elementor.
• Des mises à jour régulières qui vous assurent un produit évolutif et pérenne dans le temps.
• Une communauté hyper-active pour vous aider à trouver des réponses à vos questions.

Les points faibles d’Elementor

• La traduction n’est pas parfaite, notamment au niveau du constructeur de thème (cela sera certainement corrigé à l’avenir). Le fait que la documentation et le support soient uniquement en anglais est aussi regrettable (mais compréhensible malgré tout).
• Avec les innombrables options proposées par Elementor, son potentiel d’exploitation est énorme et quasi-inépuisable. Du coup, pour en tirer profit à 100%, il faudra y consacrer un minimum de temps.

Si cela vous intéresse, WPMarmite propose une formation complète dédiée sur le sujet (avec 20h de cours réparties en 192 vidéos) :

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

Elementor : pour qui ?

• Pour les créateurs de sites novices. Pouvoir faire confiance au WYSIWYG place Elementor comme un constructeur de page phare pour ceux qui, comme moi, n’ont pas de compétences en code ;
• Pour les marketeurs. Ces derniers apprécieront les multiples modèles de landing pages, ainsi que le constructeur de pop-up ;
• 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 intuitif et 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.

Note : pour utiliser Elementor Pro en français, procurez-vous la traduction chez WPTrads.

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

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 40000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Eléonor Biriotti

Une main littéraire dans un gant 2.0 : passionnée de littérature et ancienne professeur de Lettres Modernes, les mots, c'est mon dada ! Désormais Content Manager en freelance, spécialiste de l'Inbound marketing et du BtoB, j'accompagne des entreprises dans leur stratégie webmarketing, et leur rédige des contenus aux petits oignons pour attirer des leads.