Formation « Créer un site WordPress avec le Full Site Editing »

Elementor vs FSE : quelles sont les différences fondamentales ?

Lecture : 11 minutes • 0

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.

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.

Le logo d'Elementor
Le logo d’Elementor

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

verrouillé Vidéo premium

Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

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.

Capture d'écran de la page des tarifs proposés par Elementor sur leur site officiel.
Les tarifs appliqués annuellement à l’extension Elementor

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 :

L'éditeur de modèles d'Elementor, qui montre les modèles de pages disponibles.
L’éditeur de modèles d’Elementor

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.

La page d'accueil d'Elementor, avec le menu principal ouvert. On y voit beaucoup de liens vers des offres d'hébergement.
La page d’accueil d’Elementor met pas mal en avant les hébergements

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 !

Information

Encore une fois, ce n’est pas un mal et si vous préférez cette approche, elle est tout à fait valable.

L’interface d’administration se complexifie

verrouillé Vidéo premium

Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

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.

L'interface de WordPress avec l'éditeur de blocs et un bouton discret pour basculer sur Elementor.
Le bouton bleu, en haut, pour basculer sur Elementor

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.

L'interface d'édition de contenus proposée par Elementor, avec une barre latérale à gauche proposant beaucoup d'options.
L’interface d’Elementor masque complètement celle de WordPress

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.

Les innombrables menus d'Elementor
Les menus d’Elementor dans l’administration de WordPress

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 :

Elementor propose une interface permettant de visualiser d'un coup tous les modèles de pages, articles, erreurs 404 disponibles.
Le constructeur de thèmes

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

L'interface des modèles de sections est très austère car elle utilise les listes classiques de WordPress.
L’interface des modèles dans Elementor, très classique

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 :

Elementor propose des kits que l'on peut importer. On voit ici plusieurs kits de thématiques différentes.
L’interface des kits d’Elementor

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 :

L'interface du FSE présente les pages et les compositions disponibles, listées sous forme de grille.
L’interface des modèles de pages et compositions du FSE

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

verrouillé Vidéo premium

Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

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 :

Le panneau des réglages du site d'Elementor, qui permet de régler les couleurs et typographies globales.
Le menu des réglages globaux

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

Le guide des styles d'Elementor avec à gauche les réglages de couleur, et au centre l'aperçu des couleurs sélectionnées.
Le style guide d’Elementor

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.

Le sélecteur de couleurs d'Elementor.
Le sélecteur de couleurs d’Elementor

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 panneau de réglages du bouton dans Elementor.
Les réglages globaux du bouton

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.

4 boutons bleus avec des variations de styles.
Exemples de boutons d’un design system

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 :

Elementor permet d'enregistrer des élements dans la bibliothèque de modèles, mais celle-ci se présente comme une liste sans aperçu en temps réel.
La bibliothèque de modèles d’Elementor

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 :

Gutenberg propose une interface bien pensée pour afficher les compositions disponibles avec un aperçu en direct, et triées par catégories.
Les compositions dans Gutenberg

Ç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

verrouillé Vidéo premium

Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

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.

Les différents menus proposant des centaines d'options pour chaque widget : taille, couleur, police, espacements…
Les réglages d’un widget Elementor

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.

Les menus de réglages de blocs de Gutenberg sont plus minimalistes.
Les réglages d’un bloc Gutenberg

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.

Conseil

Elementor a une approche ouverte par défaut, contrairement au FSE qui a une approche fermée, plus adaptée au respect de la charte graphique.

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 :

Le menu de gestion d'un bloc Gutenberg, qui n'apparaît que lorsque celui-ci est selectionné.
Les flèches haut/bas permettent de déplacer le bloc d’un cran

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

Capture d'écran des navigateurs de blocs/widgets d'Elementor (à gauche) et de Gutenberg (à droite).
Le navigateur d’Elementor à gauche, et de Gutenberg à droite

Les performances

verrouillé Vidéo premium

Cette vidéo est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

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.

Illustration représentant l'amélioration des performances d'Elementor au fil des versions.
Les performances d’Elementor

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.

Information

Souvent critiqué pour sa lourdeur et son HTML trop généreux, Elementor a fait de beaux efforts sur le sujet.

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 :

Déborah Donnier
Entrepreneure
Comm digitale

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.

Mon site : DDESIGN

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 :

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.

La sidebar Elementor présentant plusieurs Widget, dont le widget créé sur mesure
En bas à droite, le widget Capitaine WP créé sur-mesure

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

Le panneau des paramètres de widget d'Elementor, montrant les différents réglages que l'on a ajouté.
Les réglages de mon bloc sur-mesure

Conseil

C’est un très bon argument en faveur de l’approche hybride, c’est-à-dire lorsque vous utilisez un constructeur de pages pour les éléments communs, et que vous créez des blocs/widgets sur-mesure pour les besoins spécifiques.

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.

La page dédiée à la communauté sur le site officiel d'Elementor. On y voit plusieurs photos de gens dans des meetups.
La communauté autour d’Elementor

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

Laisser un commentaire