Elementor vs Gutenberg 2025: Comparaison des Builders avec WPDistrib

⚠️ Avertissement

Cette page peut sembler simple visuellement, et c’est intentionnel.

Ceci est une page construite avec Elementor.
🧩Extension nécessaire : Elementor.
💬Aucun autre plugin n’est requis.
⏱️Temps de réalisation: 10 minutes (sans les images et textes mis en forme déjà préparé sous Notion)

Elle sert à explorer et à analyser les fonctionnalités de l’éditeur de page Elementor.

Le contenu présenté est le résultat d’une expérimentation destinée à évaluer leurs capacités respectives.

Voir la même page créée avec Gutenberg ici.

Introduction

Présentation de WPDistrib

WPDistrib est un pack préconfiguré qui s’installe par-dessus une installation fraîche de WordPress.

Ce pack transforme un WordPress basique en une solution complète, configurée pour gérer efficacement un site web.

Il intègre un ensemble d’extensions soigneusement sélectionnées, permettant de se concentrer sur le contenu, le design, et la création sans se soucier des aspects techniques comme la maintenance, les sauvegardes ou la sécurité, qui sont entièrement gérés par le pack.

À partir de WPDistrib, deux sites ont été créés:

Gutenberged : Ce site utilise exactement WPDistrib v6.7.1, qui repose sur les outils natifs de WordPress, comme l’éditeur Gutenberg et le thème Full Site Editing 2025.
Elementored : Ce site est basé sur WPDistrib v6.7.1, mais avec l’ajout d’une extension supplémentaire, Elementor, qui remplace Gutenberg comme builder principal.

L’objectif de ce travail d’analyse est de déterminer si Elementor Free, dans sa version gratuite, pourrait être intégré nativement dans WPDistrib à l’avenir.

La philosophie de WPDistrib repose en effet sur le choix d’extensions gratuites et open-source disponibles sur WordPress.org, pour créer dès le départ un WordPress amélioré.

Cette approche garantit la gratuité, sans compromis sur les performances, en mettant un accent particulier sur la rapidité de chargement des pages, notamment sur smartphone.

Pourquoi cette comparaison Elementor vs Gutenberg 2025?

Ce comparatif entre Gutenberg et Elementor vise à évaluer deux solutions majeures pour construire des pages sous WordPress.

Avec l’évolution constante des outils d’édition, il est essentiel de comprendre leurs forces, leurs limites et leur impact sur la productivité et les performances.

Gutenberg, intégré nativement dans WordPress, est une solution gratuite qui s’appuie sur les fonctionnalités des thèmes Full Site Editing (FSE).

Elementor, en revanche, est une extension tierce qui offre une approche puissante, mais limitée dans sa version gratuite, avec un modèle qui incite à adopter sa version Pro.

L’objectif est d’expérimenter et de fournir une analyse objective pour permettre aux utilisateurs de choisir l’outil le plus adapté à leurs besoins, en fonction de leur projet et de leur expérience.

Méthodologie de la comparaison

Deux sites miroirs ont été créés : un site avec Gutenberg et un site avec Elementor.

L’objectif de cette page est de mettre en évidence les similarités et de voir ce qu’il est possible de réaliser avec les deux outils.

Chaque page est construite en miroir avec des blocs similaires ou identiques, et les éléments sont analysés pour garantir une correspondance aussi fidèle que possible entre les deux outils.

Les fondamentaux des Builders

🚀 Chargement des Builders

Gutenberg : Lorsqu’une nouvelle page est créée dans WordPress, l’éditeur Gutenberg s’ouvre immédiatement, étant natif à la plateforme. Le temps de chargement est rapide, permettant de commencer à travailler sans délai notable.
Elementor : En revanche, avec Elementor, le chargement de l’éditeur est sensiblement plus long. Lorsqu’une nouvelle page est créée ou que l’éditeur Elementor est lancé, il faut attendre plusieurs secondes supplémentaires, le temps que l’interface complète de l’éditeur visuel se charge. Ce délai, généralement plus long que celui de Gutenberg, rend l’expérience globalement moins conviviale, surtout pour les utilisateurs cherchant à travailler rapidement.

⚙️ Paramétrages globaux

Couleurs

En ce qui concerne la gestion des couleurs globales, il n’y a pas de différence significative entre Elementor et Gutenberg.

Gutenberg: Avec le thème Full Site Editing (FSE) 2025, Gutenberg permet de définir jusqu’à 8 couleurs globales directement au niveau du thème. Ces couleurs peuvent être personnalisées et utilisées pour tous les blocs de la page. Dans cette page miroir, les couleurs d’Elementor ont été reproduites en ajoutant les quatre couleurs principales d’Elementor (Primary, Secondary, Text, Accent) comme couleurs globales sous Gutenberg.

Elementor : Elementor permet de gérer les couleurs globales directement dans l’extension. La version gratuite propose quatre couleurs prédéfinies que l’on peut personnaliser ou étendre avec des couleurs supplémentaires. Cependant, les réglages globaux des couleurs d’Elementor remplacent ceux du thème actif, ce qui peut poser problème si le thème a déjà une palette prédéfinie.

Polices

Une différence notable se fait au niveau des polices.

Gutenberg : Grâce au thème 2025, Gutenberg permet d’accéder à une large sélection de Google Fonts, ainsi qu’à des options d’importation de polices personnalisées (même si cette fonctionnalité peut être capricieuse). Pour ce comparatif, la police Roboto Slab a été utilisée comme alternative à Arial, qui est utilisée par défaut sous Elementor.

Elementor : La version gratuite d’Elementor limite les choix de polices aux classiques (Arial, Verdana, Georgia, etc.). Les polices supplémentaires nécessitent soit une extension tierce, soit l’achat de la version Pro. Cela peut être contraignant pour les utilisateurs cherchant une personnalisation avancée.

🤹‍♂️ Facilité d’utilisation

Navigation dans la structure

Gutenberg : Le mode Liste de Gutenberg est une barre latérale fixe qui permet de naviguer facilement dans la structure de la page sans cacher le contenu. Cela rend l’édition fluide et intuitive, même sur des pages complexes.

Elementor : La fenêtre Structure d’Elementor est une fenêtre glissante qui masque une partie du contenu lorsqu’elle est ouverte. Elle n’est pas fixe et nécessite des ajustements constants pour être retrouvée ou repositionnée, ce qui ralentit le workflow.

Position de l’éditeur

Gutenberg : L’éditeur principal de Gutenberg est placé à droite, mais il ne propose pas d’option pour modifier cette position.

Elementor : L’éditeur d’Elementor est toujours à gauche, également sans option de personnalisation. Une configuration qui permettrait de choisir entre gauche et droite serait un ajout appréciable pour les deux outils.

Modification et conversion des blocs

Gutenberg : Gutenberg permet de convertir facilement un bloc d’un type à un autre. Par exemple, un titre peut être transformé en paragraphe ou en liste tout en conservant le contenu. Cela facilite grandement les ajustements.

Elementor : Elementor ne propose pas de fonctionnalité similaire. Si un titre doit être transformé en paragraphe, il faut créer un nouveau widget texte, copier le contenu, et supprimer l’ancien widget. Cette rigidité complique les modifications rapides et diminue l’efficacité.

Gestion et sélection des blocs

Gutenberg : La liste des blocs reste toujours accessible, même après l’injection d’un bloc, ce qui permet de construire des pages rapidement sans interrompre le flux de travail.

Elementor : Une fois un bloc ajouté, Elementor remplace la liste des blocs par les options de configuration du bloc sélectionné. Il faut alors rouvrir manuellement la liste pour insérer un nouveau bloc, ce qui ralentit considérablement la création. De plus, Elementor Free affiche des widgets Pro non accessibles, obligeant les utilisateurs à scroller pour trouver des blocs utilisables, ce qui ajoute une frustration supplémentaire.

Visibilité du titre de la page

Gutenberg : Dans l’éditeur Gutenberg, le titre natif de la page WordPress est toujours visible en haut de l’écran. Cette visibilité permanente permet de savoir immédiatement sur quelle page ou quel article on travaille, ce qui est particulièrement pratique lorsqu’on gère un grand nombre de contenus.

Elementor : Dans Elementor, le titre de la page n’est pas éditable directement dans l’interface d’édition. Pour accéder au titre, il faut passer par les Post Settings (Paramètres de l’article) dans le menu latéral. Ce menu permet également de configurer d’autres propriétés comme le résumé ou l’image mise en avant, mais cette étape supplémentaire peut rendre la gestion des titres moins intuitive. Ne pas voir immédiatement le titre peut compliquer le suivi et la gestion, surtout lorsqu’on édite plusieurs pages à la suite.

Intégration de RankMath

Gutenberg : Gutenberg propose une intégration fluide avec RankMath, permettant de configurer facilement les paramètres SEO (focus keyword, méta-description, etc.) directement dans l’éditeur WordPress. Cette intégration rend la gestion du SEO rapide et efficace, sans nécessiter de manipulations supplémentaires.

Elementor : Dans Elementor, RankMath n’est pas intégré à l’éditeur. Pour configurer les paramètres SEO, il faut revenir à l’éditeur WordPress natif, ce qui impose des allers-retours fastidieux entre les interfaces. Cette absence d’intégration rend l’utilisation de RankMath peu pratique avec Elementor, un problème notable pour WPDistrib, où RankMath est l’outil SEO par défaut. Cela peut poser un frein aux utilisateurs recherchant une solution SEO fluide et directement accessible dans leur éditeur.

Intégration de contenu depuis un traitement de texte

Lorsqu’il s’agit d’intégrer du contenu mis en forme depuis un traitement de texte (comme Notion ou Microsoft Word), la différence entre Gutenberg et Elementor est frappante.

Gutenberg : Avec Gutenberg, un simple Ctrl+V suffit pour importer tout le contenu. La mise en forme est immédiatement appliquée dans les bons blocs : les titres sont reconnus comme des blocs titres avec les balises appropriées, les listes deviennent des blocs listes, et même les tableaux sont interprétés correctement. Tout est structuré de manière instantanée et efficace, permettant de commencer à travailler immédiatement sans aucune retouche.

Elementor : Elementor, en revanche, intègre tout le contenu dans un seul bloc texte brut. Bien que la mise en forme puisse sembler visuellement présente, les balises ne sont pas correctement assignées (par exemple, tous les titres sont traités comme du texte brut sans distinction de hiérarchie). De plus, il considère l’ensemble comme un seul bloc, rendant les modifications ou ajustements beaucoup plus compliqués. Pour structurer correctement le contenu, il faut post-traiter en recréant manuellement chaque bloc : ajouter des widgets titres, insérer des blocs texte entre les sections, et reformater les listes. Ce processus est long, fastidieux et peu productif. Si Elementor est un outil puissant pour créer des pages complexes et visuellement attrayantes, il n’est absolument pas adapté à la création de pages textuelles, comme des articles ou des documents à forte structure rédactionnelle. Pour ce type de contenu, Gutenberg est la solution incontournable grâce à son efficacité et sa gestion optimale des blocs.

📷 Gestion des images

Gutenberg: Lorsqu’une image est insérée dans Gutenberg, il est possible de lui attribuer un lien spécial avec l’option Expand on click. Cela active automatiquement un effet lightbox, permettant à l’image de s’agrandir au clic pour être visualisée dans sa totalité. Cet effet est intégré par défaut et ne nécessite aucune extension supplémentaire.

Par ailleurs, lors de l’ajout d’une image, Gutenberg propose automatiquement de la configurer en full size (taille maximale). Cela garantit que l’image s’affiche dans la meilleure résolution possible, un comportement logique et pratique pour éviter de devoir ajuster manuellement chaque image.

Elementor: En revanche, dans Elementor, lorsqu’une image est insérée, sa résolution est automatiquement réduite (par exemple, en taille moyenne). Pour afficher l’image en pleine résolution, il faut revenir dans les réglages de l’image et sélectionner manuellement l’option full size. Cela ajoute une étape supplémentaire, même lorsque l’image est déjà compressée et optimisée pour un affichage en haute résolution.

De plus, l’effet lightbox, qui permettrait de zoomer sur l’image, n’est pas activé par défaut dans la version gratuite d’Elementor. Cela peut être une limitation liée à Elementor Free, nécessitant potentiellement l’achat de la version Pro ou l’installation d’une extension tierce pour reproduire cet effet.

🔄 Temps de chargement et sauvegarde des Builders

Gutenberg: Gutenberg se distingue par sa rapidité, non seulement au chargement de l’éditeur, mais aussi lors de la sauvegarde des pages. Une fois le bouton “Mettre à jour” cliqué, la page est instantanément sauvegardée et prête à être consultée. Même en cas de rafraîchissement immédiat, le contenu sauvegardé s’affiche correctement, sans décalage ni problème de rendu.

Elementor: Elementor, en revanche, montre des signes de lourdeur dans son code. Lors de la sauvegarde d’une page, le délai de traitement est plus long. Si la page est rafraîchie trop rapidement après avoir cliqué sur “Mettre à jour”, le contenu risque de ne pas s’afficher correctement car la sauvegarde n’est pas encore terminée. Ce délai, combiné au temps de chargement plus long de l’éditeur, peut impacter l’expérience utilisateur, surtout sur des projets nécessitant des modifications fréquentes et rapides.

🚫 Problèmes d’ergonomie dans Elementor

Absence d’ascenseur pour naviguer

Lorsque l’éditeur Elementor est utilisé, la navigation dans une page longue repose uniquement sur la roulette de la souris. Aucun ascenseur visible n’est proposé pour descendre ou remonter rapidement dans le contenu, ce qui rend la manipulation peu ergonomique, surtout pour des pages complexes ou longues. Cette absence d’un élément aussi basique complique l’expérience utilisateur et alourdit le travail d’édition.

Bandeau promotionnel envahissant

Un autre point frustrant est la présence d’un bandeau persistant en bas de l’éditeur. Celui-ci invite constamment à passer à la version Pro pour “profiter pleinement d’Elementor”. Ce type de sollicitation publicitaire est non seulement intrusif, mais il pollue également l’interface de travail en occupant un espace précieux sur l’écran.

Ces limitations montrent une volonté d’Elementor de pousser les utilisateurs vers sa version Pro, mais de manière intrusive et contre-productive. En comparaison, Gutenberg, qui est entièrement gratuit, offre une expérience bien plus fluide et ergonomique, sans distractions commerciales ni manquements à des fonctionnalités aussi fondamentales que la navigation verticale. Ces défauts ternissent l’expérience globale avec Elementor Free.

🛠️ Gestion de la suppression de blocs

Gutenberg : Gutenberg permet une gestion simple et efficace de la suppression de plusieurs blocs à la fois. Il est possible de sélectionner plusieurs blocs en maintenant la touche Shift ou en utilisant le mode Liste pour effectuer une sélection multiple. Une fois les blocs sélectionnés, ils peuvent être supprimés en un seul clic, ce qui est particulièrement pratique pour restructurer rapidement une page ou supprimer des sections inutiles.

Elementor: Dans Elementor, il est techniquement possible de sélectionner plusieurs blocs, mais uniquement en maintenant la touche Ctrl (ou Cmd sur Mac) et en cliquant sur chaque bloc individuellement dans le mode Structure. Cependant, cette méthode devient rapidement fastidieuse lorsqu’il faut supprimer plusieurs blocs à la suite, car il faut cliquer autant de fois qu’il y a de blocs à sélectionner. Contrairement à Gutenberg, il n’est pas possible d’utiliser la touche Shift pour sélectionner une plage de blocs d’un seul geste, ce qui rend le processus beaucoup moins fluide et efficace.

Bilan intermédiaire: Elementor vs Gutenberg 2025

Critère	Gutenberg	Elementor Free
Couleurs	➕ Gestion complète et personnalisée, jusqu’à 8 couleurs globales.	➕ 4 couleurs globales par défaut, qui remplacent les réglages du thème actif.
Polices	➕ Large choix grâce aux Google Fonts et polices personnalisées.	➖ Limité aux polices classiques. Polices supplémentaires disponibles uniquement via la version Pro.
Intégration de contenu provenant d’un traitement de texte	➕ Formats collés automatiquement reconnus en blocs (titres, listes, paragraphes, tableaux). ➖ sauf les images!	➖ Contenu collé intégré dans un seul bloc texte brut, sans identification des styles, nécessitant une reconfiguration manuelle.
📷 Gestion des images	➕ Possibilité d’ajouter des images rapidement grâce aux raccourcis (`/i`). Effet lightbox intégré au clic, avec affichage par défaut en pleine résolution (full size).	➖ Ajout d’images via glisser-déposer, sans raccourci clavier. ➖Résolution réduite par défaut, nécessitant un réglage manuel pour passer en full size. Effet lightbox absent dans la version gratuite.
🔄 Temps de chargement et sauvegarde	➕ Chargement rapide de l’éditeur et sauvegarde instantanée, garantissant une page prête à être consultée immédiatement après publication ou mise à jour.	➖ Chargement plus long (2 à 3 fois plus) de l’éditeur. Sauvegarde plus lente : si une page est rafraîchie immédiatement après mise à jour, le contenu peut s’afficher incorrectement.
🚫 Problèmes d’ergonomie	➕ Barres latérales fixes pour la gestion des blocs, navigation intuitive. Raccourcis clavier pour ajouter des blocs et des fonctionnalités avancées, comme l’insertion rapide.	➖ Absence d’ascenseur pour naviguer sur des pages longues. Bandeau promotionnel pour la version Pro occupant un espace visuel et perturbant l’expérience utilisateur.
Facilité d’utilisation	➕ Bonne gestion de la structure, conversion flexible des types de blocs. Navigation fluide grâce à des barres latérales fixes.	➖ Glisser-déposer intuitif, mais absence de conversion directe des types de blocs. Utilisation d’une fenêtre glissante pour la structure des blocs, ce qui complique la navigation.
Intégration SEO	➕ Intégration native avec RankMath, configuration facile dans l’éditeur.	➖ RankMath non intégré, nécessite des allers-retours avec l’éditeur natif.

Résumé

Gutenberg continue de s’imposer comme une solution flexible, rapide et adaptée aux projets rédactionnels et aux utilisateurs recherchant un workflow fluide et ergonomique. Ses fonctionnalités natives, comme l’intégration fluide de contenu depuis un traitement de texte, la gestion intuitive des images et une sauvegarde instantanée, renforcent son efficacité.

Elementor, malgré sa puissance visuelle et son glisser-déposer intuitif, montre des faiblesses importantes dans sa version gratuite : un code lourd, des fonctionnalités limitées, une intégration SEO absente et une navigation parfois peu ergonomique. Ces limitations freinent son adoption pour des projets nécessitant des mises à jour rapides ou une structuration avancée.

Verdict intermédiaire

Elementor vs Gutenberg 2025: Gutenberg surpasse Elementor Free dans la plupart des domaines fondamentaux pour un Builder.

🥅 Gutenberg 1 - Elementor Free 0

Cependant, l’analyse des atouts graphiques d’Elementor reste à explorer. Une étude comparative des capacités visuelles entre les deux outils sera réalisée dans une étape suivante, en mettant l’accent sur la création de blocs complexes et des designs percutants.