Elementor est considéré par beaucoup comme le meilleur constructeur de pages de tous les temps. Et c’est clair que le builder aux 17 millions d’installations actives a de bons arguments pour lui. L’objectif de ce cours est de comparer Elementor au Full Site Editing de WordPress, afin de comprendre les différences.
Sommaire du cours
Il y aura quelques critiques à l’égard d’Elementor dans ce cours, mais il n’en reste pas moins un outil abouti, et le but n’est pas de le dénigrer pour autant. Après tout, la diversité fait la force du CMS.
D’ailleurs WordPress n’avait qu’à réagir plus tôt, ce qui a laissé le temps à Elementor de s’imposer comme la référence pour beaucoup d’utilisateurs de WordPress. Cependant, il n’est pas dénué de défauts, dont certains qui vont seulement poser problème aux agences en recherche d’un process de création de sites efficace.

Selon moi, Elementor est adapté à un public qui recherche une grande flexibilité, au détriment de la rigueur et des standards du métier, ce qui en fait l’outil idéal du freelance, mais pas de l’agence.
C’est là que le FSE et Elementor vont s’opposer dans leur approche. Le FSE, malgré sa rigueur, va tenter d’être adapté à tous les publics : les no-coders, les freelances, et les agences.
Dans ce cours, je vais passer en revue ce qui me dérange dans Elementor face à l’approche native de Gutenberg et du FSE, tout en montrant tout de même les bons côtés.
Elementor est payant si on veut toutes les options
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
Le premier souci d’Elementor, c’est que si vous voulez l’utiliser dans les meilleures conditions, il faudra opter pour la version payante.
Les licences commencent à 59$ par an pour un site et jusqu’à 399$ par an pour 1000 sites. Un tarif vraiment avantageux pour les agences in fine.

Sans version payante, vous ne pourrez pas accéder à l’éditeur de thèmes. Vous ne pourrez donc pas :
- Utiliser les widgets avancés comme la liste des articles ;
- L’en-tête et le pied de page de votre site (header et footer) ;
- Les modèles d’archives, de custom post types et les publications ;
- Les modèles de pages e-commerce de WooCommerce ;
- Avoir accès à la bibliothèque de modèles prêts à l’emploi.
Vous serez donc bien limité pour faire votre site. C’est comme ça que la version pro est devenue incontournable.
Tout l’intérêt de l’éditeur de site réside dans le constructeur de thèmes :

C’est d’ici que vous pourrez réaliser tous vos modèles de pages. C’est d’ailleurs hyper bien réalisé et très clair. Par contre, c’est dommage que ce soit caché dans un sous-menu de l’administration, au vu de l’importance de cette fonctionnalité.
Elementor cherche à faire cavalier seul
Un autre détail qui me dérange avec Elementor, c’est qu’ils veulent de plus en plus faire cavalier seul, et s’affranchir de WordPress.
Ils ne peuvent pas bien sûr, car les créateurs de sites dépendent trop des extensions du CMS.
Mais jetez un oeil au site d’Elementor. Si vous regardez le menu ou le discours, on ne veut plus vous vendre un plugin WordPress, mais une solution d’hébergement.

Toutefois, c’est moins flagrant qu’avant : Elementor voulait absolument vous vendre leur offre d’hébergement mais aujourd’hui, le bouton Get Started vous pose quelques questions afin de savoir quel produit vous vendre.
Il n’y a que 8 références à WordPress sur la page d’accueil, et jamais dans les titres. Elementor se vend comme si c’était lui-même un CMS, et pas comme une extension de WordPress, reléguant WordPress à un simple outil.
Dans le fond, Elementor cherche à tout faire, et propose désormais un éditeur de pop-ups, de formulaires, un outil d’optimisation d’images…
Le but étant de s’affranchir au plus des dépendances externes. Ce qui n’est pas bête en soi !
L’interface d’administration se complexifie
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
L’un des soucis d’Elementor c’est qu’il ne remplace pas totalement l’éditeur natif. Lorsque l’on crée une page dans l’interface d’administration, on tombe d’abord sur l’éditeur de WordPress avant d’aller dans l’éditeur Elementor, grâce au bouton bleu en haut de l’interface.

On arrive ensuite sur Elementor qui est en plein écran : il ne reste plus rien de WordPress. On a vraiment changé d’outil, ce qui casse un peu la fluidité de l’expérience utilisateur.

Pour sortir de l’interface, et retourner sur WordPress, il faut d’abord cliquer sur le menu en haut à gauche, puis sur Quitter. Il faut donc 2 clics pour quitter l’interface, ce qui est dommage.
Des menus en pagaille
Dans le reste de l’interface d’administration, Elementor ajoute également de nombreux menus. Et tous ne se valent pas en terme d’importance.

Elementor ajoute 2 menus de niveau supérieur (Elementor et Modèles) qui ont chacun leur sous-menus. Et il y a énormément de rubriques. Là encore, les sections importantes sont noyées avec le reste.
On pourrait s’attendre à une meilleure organisation de la part d’un outil qui a déjà plusieurs années d’expérience. Cela dit, Elementor propose aujourd’hui énormément de fonctionnalités, ce qui justifie le nombre d’entrées, mais n’excuse pas l’organisation.
Des concepts pas évidents pour un débutant
Lorsqu’on débute sur Elementor, c’est difficile de faire la différence entre différents concepts comme les kits, les modèles de pages et la librairie de modèles.
Par exemple, ce qui me dérange, c’est que l’éditeur de modèles a une belle interface :

Mais la page des modèles enregistrés est une liste classique WordPress, sans aperçu en direct :

Pourtant lorsqu’on est dans l’éditeur, cette même interface est complètement différente.
Mais ce n’est pas fini, car il y a aussi l’interface des kits, qui permet d’importer des pages et une apparence complète sur tout le site :

C’est très pratique et il n’y a pas d’équivalent avec le FSE pour le moment. Mais du coup il ne faut pas confondre les kits (tout un site) avec des modèles (des sections de page).
De ce côté là, le Full Site Editing est beaucoup plus harmonieux, autant en terme de menus que d’interface. Les compositions et les modèles de pages se trouvent dans le même menu Apparence :

Vous l’avez compris, ce qui m’embête avec une solution externe comme Elementor, c’est l’alourdissement de l’interface, mais également toutes les incohérences d’expérience utilisateur qui en découlent.
Elementor et les styles globaux
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
L’un des points qui me pose le plus problème dans Elementor, c’est la manière dont on va pouvoir intégrer les styles globaux dans notre site. C’est assez éparpillé selon moi.
Mais là encore, Elementor s’est beaucoup amélioré de ce côté là. En allant dans le menu de l’éditeur, puis réglages du site, on retrouve quelques sections intéressantes :

Lorsque l’on affiche les couleurs globales, on obtient un aperçu sur un guide de styles (style guide) plutôt sympa :

Ce qui me frustre un peu cependant, c’est qu’on ne peut pas supprimer les couleurs système. On peut bien sûr les remplacer mais on aura forcément deux catégories de couleurs : les couleurs système et les personnalisées.
Pour autant, lorsqu’on va devoir choisir une couleur dans l’interface d’Elementor, on aura toujours la possibilité de choisir n’importe quelle couleur, sans restriction.

L’icône globe permet certes de sélectionner une couleur parmi les couleurs globales, mais le bouton juste à sa droite (en jaune sur la capture) permet quand même de sélectionner n’importe quelle couleur.
C’est là où Gutenberg aura l’avantage d’imposer une palette stricte, surtout pour une agence qui cherche à tout prix à éviter que son site devienne un sapin de noël.
Côté styles globaux, on va pouvoir configurer l’apparence des formulaires (ce que ne permet pas encore Gutenberg) ainsi que celle des boutons.

Le souci ici, c’est qu’on peux configurer uniquement un seul style de bouton. Pourtant, dans tout design moderne, on aura au moins 2 ou 3 styles de boutons différents.

C’est un peu dommage, pour le coup. Alors qu’avec le FSE, on pourra par contre définir autant de variations de styles que l’on veut pour chaque composant du site.
Les compositions et modèles réutilisables
Elementor et Gutenberg permettent tous deux de gérer des compositions, c’est-à-dire un regroupement de blocs/widgets qu’on va potentiellement réutiliser sur le site. Une section par exemple.
C’est très facile à faire dans les deux cas mais sur Elementor, il n’y a pas d’aperçu en direct pour sélectionner une composition :

On peut aisément s’y perdre lorsqu’on commence à en avoir beaucoup. L’interface du FSE a quant à elle plus de panache et permet même de les regrouper par catégories :

Ça montre d’autant plus l’importance qu’accorde WordPress au système de compositions réutilisables, qui est selon moi l’un des plus gros atouts du FSE aujourd’hui, avec les variations de styles de blocs.
La complexité de l’éditeur
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
L’éditeur d’Elementor est hyper complet. On peut presque tout faire grâce à l’interface de l’éditeur et ses centaines d’options : couleurs, espacements, typographie, conditions pour responsive, et même formes de séparation.

En partant de 0, on peut réaliser à peu près n’importe quel design. C’est très puissant. Oui mais voilà, cette approche n’est pas forcément du goût de tout le monde.
C’est vite très complexe, et bien trop fourni pour prendre le risque de laisser un tel éditeur dans les mains d’un client.
Certains préfèrent une interface plus minimaliste afin de limiter les possibilités de nos clients. C’est justement cette approche qu’à choisi le FSE.

Sur cette capture, on voit bien que l’interface est plus épurée : il y a moins d’options.
C’est parce que le FSE va se baser sur un fichier, le theme.json
, qui va permettre d’activer ou désactiver des fonctions de l’éditeur, comme j’ai pu l’aborder dans le précédent cours, lors de la visite guidée du FSE.
Mais du coup, est-ce qu’on peut quand même faire aussi bien qu’Elementor avec le FSE ?
Et la réponse est oui ! Le fait de contraindre l’éditeur ne vas pas réduire les possibilités pour autant. On va juste travailler différemment :
- Avec le FSE, on va préparer le terrain en amont et mâcher le travail du rédacteur ;
- Alors qu’avec Elementor, on travaille tout en même temps avec toutes les options disponibles.
Là encore, on a deux fonctionnements complètement différents qui s’opposent. Et là encore, chacun pourra y trouver son compte.
Le glisser-déposer est parfois capricieux
Le glisser-déposer est toujours un sujet complexe : personne n’est parfait ! Même Gutenberg a des soucis à ce niveau là, mais j’ai quand même plus de soucis à manipuler Elementor sur un design complexe.
Gutenberg permet cependant de déplacer les blocs entre eux grâce à des flèches très pratiques :

Les deux solutions concurrentes vont toutefois chacune proposer un navigateur pour permettre de facilement comprendre l’architecture des blocs/widgets et leur imbrication.

Les performances
Vidéo premium
Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?
L’un des points noirs d’Elementor, souvent pointé par les critiques, c’est le HTML généré qui est parfois anormalement complexe. Cela dit, depuis l’arrivée des conteneurs flex, il y a eu une grosse amélioration.
Côté performances, Elementor est souvent critiqué pour sa lourdeur. En front, il est capable d’appeler bon nombre de scripts et de styles pas forcément utiles à la page. Mais là encore, il a fait de gros efforts de performance.
Au niveau des core web vitals, on ne peut pas juger Elementor seul, mais votre site dans sa globalité : si vous optimisez bien les images, que vous mettez un système de cache comme WP rocket qui peut également retirer les CSS inutilisés, alors votre site pourra être rapide à charger.
Cela dit, la version 3.0 d’Elementor s’est concentrée sur les performances, et depuis il y a des améliorations à chaque nouvelle version.

Difficile de juger objectivement de toute manière, car chaque solution va prêcher sa paroisse. Elementor se défend bien à ce sujet avec des articles et vidéos dédiés à la performance.
Au final, vous pouvez très bien avoir un site performant quel que soit le builder derrière.
Des bugs et un support pas toujours réactif
Un autre souci d’Elementor, c’est que parfois il y a des bugs. Il est souvent arrivé à des personnes de ne plus pouvoir ouvrir une page pour la modifier, voir même d’en perdre le contenu.
Avec le temps c’est devenu rare, mais pas improbable. Il faut donc être attentif et bien faire ses sauvegardes.
Quant au support, il reçoit beaucoup de demandes, et parfois les réponses tardent à venir. Malgré tout, je trouve qu’Elementor est le constructeur le plus fiable du marché.
Les points forts d’Elementor
Histoire de me faire l’avocat du diable, il faut quand même reconnaître qu’Elementor possède des points forts, même si le FSE a depuis rattrapé son retard.
Mais je laisse d’abord la parole à Déborah Donnier, qui crée des sites Elementor de qualité depuis des années :

Le conseil de Déborah Donnier
Fondatrice DDESIGN Agence web 360 Et Podpreneurs studio de podcast
En 15 ans d’expérience dans l’expertise web et de manière générale la stratégie web, j’ai eu le temps de voir grandir et surtout évoluer le CMS WordPress.
Au début, il fallait tout coder, tout faire à la main. Puis les builders sont arrivés dans les années 2015 : d’abord les « constructeur de pages » puis les « constructeur de thèmes » avec Divi et notamment Elementor.
Quand j’ai testé ce dernier, ça a vraiment été une révolution puisque ça permettait de faire un tronc commun entre le développement et la souplesse d’utilisation.
Il faut se rappeler qu’à l’époque, WordPress ne proposait pas de constructeur natif. Les constructeurs tiers étaient très rigides et si on ne faisait pas du développement sur mesure, notre client ou les personnes avec un niveau no-code ne pouvaient pas les utiliser facilement.
Aujourd’hui, Elementor est présent dans presque toutes mes réalisations. Ça nous permet de construire des sites vitrines, des sites e-commerce, des grosses plateformes… Ça permet de répondre surtout à un besoin de clients avec très peu de temps de développement, de la souplesse, facilité de prise en main, mais avec un code propre tout en respectant les bonnes pratiques au niveau du site web.
La facilité de créer des widgets sur mesure en PHP
L’un des principaux avantages d’Elementor, c’est la facilité pour les développeurs de créer de nouveaux widgets sur mesure.
En plus, vous codez directement en PHP. Nul besoin d’apprendre React comme avec les blocs Gutenberg, même s’il est possible aujourd’hui de créer des blocs en PHP à partir de ACF.
La documentation officielle est d’ailleurs très bien faite :
Développer un widget Elementor en PHP
Documentation Elementor officielle pour la création de widgets sur mesure en PHP.
Elle vous montre comment déclarer des widgets qui apparaîtront ensuite dans le sélecteur de widgets (blocs), ainsi que la manière d’ajouter des options et réglages.

Lorsqu’on utilise ce widget, les réglages que vous aurez déclarés apparaissent :

Bien documenté et beaucoup de tutoriels
Grâce à son succès fulgurant et ses millions d’installations actives, Elementor a réuni une très grosse communauté autour de son éditeur.
Du coup, on va retrouver une belle documentation, beaucoup de groupes, discussions, meetups, mais aussi des tutoriels, vidéos sur Youtube et même des formations dédiées à Elementor, comme chez WP Marmite par exemple.

Aujourd’hui, la documentation autour du FSE est elle aussi très complète, et sa communauté grandissante. Un énorme travail a été fait par la communauté mais ça n’a pas été toujours le cas : j’ai longtemps galéré à trouver mes réponses lors de mes expérimentations.
En résumé
En tant que freelance, vous avez le choix de votre outil. Si vous faites du no-code, Elementor est carrément une bonne idée.
Mais si vous êtes une agence, il vaudrait mieux opter pour le FSE, pour les raisons suivantes :
- Configuration plus simple du design system et des styles globaux ;
- Maitrise de la complexité des options de l’éditeur ;
- Versionnement avec git des réglages dans le
theme.json
; - Solution native et gratuite, poussée par la communauté ;
- Moins de dépendances externes, moins de risques sur les performances ;
- Conçu pour s’interfacer sans friction avec les standards de l’industrie ;
- Meilleure expérience utilisateur par une meilleure intégration de l’éditeur ;
- Moins de risque de bugs ou de perte de données ;
C’est facile de pointer les défauts d’une solution, mais Elementor n’en reste pas moins un très bon outil. Après tout, le FSE n’est pas dénué de défauts lui non plus.
Mais avec une communauté autour de Gutenberg sans cesse grandissante de contributeurs et une vision globale claire, l’outil évolue rapidement et dans le bon sens.
Dans ce cours, j’ai tenté de pointer les soucis qui font que, selon moi, Elementor n’est pas l’outil le plus adapté à une agence. Dans la suite de la formation, vous comprendrez pourquoi le FSE est un outil conçu avant tout pour répondre aux plus grosses exigences des professionnels.
Dans le prochain cours, on va tenter de voir si le FSE est aussi adapté pour un no-coder qu’un outil comme Elementor.
0
Questions, réponses et commentaires