Gutenberg vs Elementor : y a-t-il un bon choix ? Peut-être. Mais cela dépend des fonctionnalités que vous attendez de votre constructeur de pages WordPress.

Nous allons vous expliquer les bases de Gutenberg et d’Elementor, puis nous ferons une comparaison directe entre les deux.

Continuez cette lecture pour un regard approfondi sur la comparaison entre Gutenberg vs Elementor, basé sur des années d’expérience d’utilisation des deux et des tests rigoureux.

Qu’est-ce que Gutenberg ?

Gutenberg est le constructeur de pages WordPress par défaut. Il a été introduit en 2018 et a remplacé ce qu’on appelle maintenant l’éditeur WordPress « classique », qui était l’éditeur de contenu texte riche/HTML d’origine sans aucune fonctionnalité de glisser-déposer.

Gutenberg était en fait une réponse à une vague d’extensions de constructions de pages tierces, notamment Elementor, Divi et Visual Composer, qui sont tous sortis pour remplacer l’éditeur classique.

Du point de vue des fonctionnalités, Gutenberg offre une bibliothèque de « blocs » facilement accessible pour faire glisser des éléments de contenu sur les pages et les articles.

L'onglet Blocs dans Gutenberg.
L’onglet Blocs dans Gutenberg.

Gutenberg est livré avec près de 100 blocs de contenu, dont certains permettent d’intégrer et d’incorporer des services tiers comme Twitter, Reddit et Amazon Kindle. Il est également possible de créer des blocs dynamiques pour mettre à jour automatiquement le contenu des blocs. Voici quelques exemples de blocs Gutenberg :

  • Paragraphe
  • Titre
  • Tableau
  • Image
  • Galerie
  • Vidéo
  • Boutons
  • Calendrier
  • HTML personnalisé
  • Derniers articles

La plupart des thèmes WordPress fonctionnent bien avec Gutenberg.

L’interface Gutenberg présente le contenu de la page ou de l’article en son centre, avec du contenu rendu (comme l’affichage de formulaires ou de boutons) lorsque cela est possible. Il s’agit d’une amélioration significative par rapport à l’éditeur classique, car Gutenberg prend en charge l’édition rapide de markdown parallèlement à une expérience utilisateur visuelle. Et si nécessaire, il y a un accès direct aux sections de codage personnalisé pour CSS et HTML.

Chaque bloc fournit sa propre longue liste de réglages, et Gutenberg dispose de panneaux rapides pour un contrôle puissant sur les paramètres du document et du bloc, comme les balises alt, les couleurs d’arrière-plan et la modération des commentaires.

Qu’est-ce qu’Elementor ?

Elementor est un constructeur de pages, tout comme Gutenberg. Cependant, Elementor précède Gutenberg en tant que l’une des applications tierces de construction de pages qui a finalement conduit à la création d’un constructeur de pages WordPress par défaut.

Introduit en 2016, Elementor a été un favori des concepteurs WordPress en raison de son interface de conception Web entièrement visuelle, de ses modèles de démarrage élégants (prêts à être importés) et de ses modules de contenu par glisser-déposer.

Elementor
Elementor

L’une des différences les plus immédiatement perceptibles entre Elementor et Gutenberg est qu’Elementor n’est pas intégré à WordPress. Il est fabriqué par une autre société et vous devez donc installer son extension gratuite (des versions premium sont également disponibles).

Vous remarquerez également qu’Elementor a des noms uniques pour ses fonctionnalités. Ce qu’ils appellent « blocs » dans Gutenberg est appelé « widgets » dans Elementor. À ce propos, Elementor peut se vanter d’avoir plus de 100 de ces widgets de contenu.

Exemples de widgets de contenu Elementor :

  • Article
  • Éditeur de texte
  • En-tête
  • Image
  • Texte
  • Témoignage
  • Toggle
  • Barre de progression

De nombreux widgets créent des intégrations entre un site WordPress et des applications tierces, telles que Stripe, Facebook et Sound Cloud.

Dans l’ensemble, Elementor est l’un des meilleurs constructeurs de pages WordPress avec une communauté dynamique de développeurs et d’utilisateurs. L’interface visuelle, par glisser-déposer, est difficile à battre, vous recevez des centaines de modèles de concepteurs, et toute l’édition se fait en direct.

Avec les widgets WooCommerce et les outils marketing pour les pages de destination et les formulaires, Elementor reste un mastodonte dans l’espace de construction de sites web, et cela se remarque lorsque vous comparez Gutenberg vs Elementor.

Gutenberg et Elementor comparés

Nous allons comparer Gutenberg vs Elementor dans des domaines tels que les fonctionnalités, l’interface utilisateur, les prix, et plus encore. Après notre examen, vous aurez une meilleure compréhension du constructeur de pages qui convient le mieux à vos besoins.

Fonctionnalités clés

Dans cette section, nous avons sélectionné ce que nous considérons comme les fonctionnalités « clés » d’un constructeur de pages, puis nous comparerons Gutenberg et Elementor dans chaque catégorie.

Fonctionnalité de glisser-déposer et codage : Gutenberg vs Elementor

Le problème avec les constructeurs de pages est qu’ils remplissent souvent l’interface avec des outils de création visuelle et repoussent les fonctionnalités plus avancées, comme l’édition de code, hors de vue.

Nous préférons voir un mélange des deux, où les débutants ont une interface en glisser-déposer élégante et facilement accessible, et les utilisateurs avancés peuvent utiliser le CSS sans avoir à fouiller pour trouver le bon champ.

La fonctionnalité de glisser-déposer de Gutenberg est simple et sans décalage. Il suffit d’un instant pour rechercher des blocs de contenu et les faire glisser – ou cliquer et les insérer – dans le contenu. Ensuite, les réglages du bloc apparaissent pour la personnalisation.

Des dizaines de blocs de contenu sont disponibles.
Des dizaines de blocs de contenu sont disponibles.

L’inconvénient est que, pour faire glisser des blocs déjà placés, vous devez d’abord sélectionner un bloc, puis cliquer sur une petite icône de déplacement et la maintenir enfoncée. Cela demande de la précision lors du clic, ce qui n’est pas nécessaire pour d’autres constructeurs de pages.

Utilisez l'icône de déplacement pour déplacer les blocs.
Utilisez l’icône de déplacement pour déplacer les blocs.

Lorsqu’il s’agit de coder, Gutenberg rend son éditeur de code facile à trouver.

L'éditeur de code est facilement accessible.
L’éditeur de code est facilement accessible.

Les utilisateurs ont constaté des problèmes avec les blocs qui gâchent leur code et des difficultés avec les blocs pré-construits, ce qui oblige les développeurs à produire des dizaines de blocs personnalisés.

Malgré les plaintes, le constructeur de pages s’est amélioré pour les codeurs et les outils sont bien là, mais avec une courbe d’apprentissage peut-être plus raide que ce qui était disponible dans l’éditeur classique.

Vous pouvez même ajouter des ancres HTML et des classes CSS supplémentaires directement à partir de l’onglet Bloc dans Gutenberg, ce qui nécessitait auparavant un parcours fastidieux à travers l’onglet HTML dans l’éditeur classique.

Ajustez les ancres HTML et les classes CSS.
Ajustez les ancres HTML et les classes CSS.

Elementor offre également une fonctionnalité de glisser-déposer. Il fonctionne avec la plupart des thèmes WordPress et présente une bibliothèque de blocs à insérer rapidement sur n’importe quelle page.

Liste des blocs de base.
Liste des blocs de base.

Comme Elementor utilise un système de grille semi-automatique, il est possible d’insérer des widgets dans la plupart des zones d’une page.

Déplacement d'un bloc de boutons dans l'éditeur.
Déplacement d’un bloc de boutons dans l’éditeur.

Déplacer des blocs de contenu précédemment placés est plus facile avec Elementor qu’avec Gutenberg. Il vous suffit de cliquer sur le bloc et de le maintenir enfoncé pour le déplacer.

Vous pouvez déplacer n'importe quel bloc en cliquant dessus et en le faisant glisser.
Vous pouvez déplacer n’importe quel bloc en cliquant dessus et en le faisant glisser.

L’insertion ou la sélection d’un widget de contenu affiche le contenu, le style et les paramètres avancés de ce widget. Quant au codage, il est simplifié grâce à de nombreux réglages de bloc. Par exemple, vous pouvez ajouter des ancres HTML, des attributs et des feuilles de style CSS personnalisées directement dans les réglages du widget ou de la page.

Insérez facilement des feuilles de style CSS personnalisées.
Insérez facilement des feuilles de style CSS personnalisées.

Elementor propose également des widgets de code HTML pour insérer tout code personnalisé que vous souhaitez dans une page web.

Vous pouvez utiliser la boîte de code HTML pour vos propres personnalisations.
Vous pouvez utiliser la boîte de code HTML pour vos propres personnalisations.

Dans l’ensemble, la fonctionnalité de glisser-déposer d’Elementor est plus forte que celle de Gutenberg. Cependant, les options de codage personnalisé semblent également accessibles dans les deux constructeurs de pages.

Modèles (pour les sites web, les blocs, les pages, les fenêtres contextuelles, etc 🙂 Gutenberg vs Elementor

Les modèles de constructeurs de pages permettent aux développeurs de construire des sites web à une vitesse fulgurante. Les modèles vous permettent de commencer avec des sites web professionnels ou des conceptions de pages au lieu de construire à partir de zéro.

De nombreux constructeurs de pages proposent des modèles pré-construits pour :

  • Les sites web complets
  • Les pages
  • Les articles de blog
  • Les sections de page
  • Les blocs de contenu
  • Les en-têtes
  • Les pieds de page
  • Les pages de destination
  • Et plus encore

Gutenberg manque cruellement de modèles pré-construits. L’onglet Compositions fournit des modèles de section utiles, mais c’est à peu près tout.

L'onglet Compositions.
L’onglet Compositions.

Cependant, il est possible d’installer des extensions tierces avec des modèles de départ pour les pages et les sites web complets. Des extensions telles que Gutentor, Twentig et Otter Blocks sont tout à fait adaptées.

Elementor, quant à lui, est alimenté par des centaines de modèles de départ dans son constructeur de thème.

Les modèles d’Elementor comprennent :

  • En-têtes
  • Pieds de page
  • Pages simples
  • Articles uniques
  • Archives
  • Pages de résultats de recherche
  • Pages de produits
  • Archives de produits
  • Pages 404
Les différents éléments de construction de thème d'Elementor.
Les différents éléments de construction de thème d’Elementor.

Presque tous les modèles d’Elementor nécessitent un abonnement premium, mais c’est abordable et meilleur que ce que vous obtenez avec Gutenberg.

Style : Gutenberg vs Elementor

Les fonctions de style de Gutenberg permettent des personnalisations rapides dans le panneau de blocs de droite, après avoir sélectionné le bloc que vous souhaitez modifier.

Styliser une image dans Gutenberg.
Styliser une image dans Gutenberg.

Les réglages de style sont assez basiques par rapport à Elementor, mais les éléments essentiels sont presque toujours présents, comme les options permettant de modifier les bordures et les dimensions des images, ou les réglages de couleur, de typographie et de marge pour les blocs de paragraphe.

Outre le CSS personnalisé pour tous les blocs, vous trouverez une barre d’outils flottante lorsque vous cliquez sur un bloc. Cette section permet de styliser le texte, de l’éditer avec HTML, de copier ce style et de le dupliquer.

La barre d'outils flottante.
La barre d’outils flottante.

Les réglages de style dans Elementor sont contenus dans trois onglets lorsqu’un widget est sélectionné. Ajustez les réglages de contenu pour le dimensionnement des images et du texte, puis passez aux zones avancées, avec tout ce qu’il faut pour les animations de survol, les filtres CSS et les masques, ainsi que les effets de transformation.

Ajustez le style de n'importe quel bloc sélectionné.
Ajustez le style de n’importe quel bloc sélectionné.

Il ne fait aucun doute qu’Elementor dispose d’une plus grande collection d’outils de style que Gutenberg. Cependant, ceux qui recherchent la plus grande simplicité se sentiront à l’aise avec les fonctionnalités de style disponibles dans Gutenberg.

Blocs de contenu/widgets : Gutenberg vs Elementor

Gutenberg est livré avec un peu plus de 90 blocs de contenu. Elementor en propose plus de 100.

Voici les catégories de blocs de Gutenberg :

  • Texte
  • Média
  • Conception
  • Widgets
  • Incrustations dans le thème

Vous disposez de tous les éléments essentiels (blocs de paragraphes, d’images et de boutons), ainsi que d’éléments uniques pour des éléments tels que Speaker Deck, Kickstarter, Boucle de requête, Couplet, Temps de lecture, et bien d’autres encore.

Elementor classe également ses widgets de contenu par catégories :

  • Basique
  • Pro
  • Général
  • Site
  • WooCommerce
  • WordPress

Ce ne sont pas les catégories les plus utiles, mais au moins elles sont organisées d’une certaine manière.

Les widgets de contenu standard, tels que les séparateurs, les sections et les titres, sont fournis. Il y a aussi des widgets uniques pour Google Maps, Mise en évidence de code, Données de produit WooCommerce, et plus encore.

Les éléments plus avancés comprennent les images de produits, les méta-produits et les ventes incitatives.
Les éléments plus avancés comprennent les images de produits, les méta-produits et les ventes incitatives.

Notre conclusion est que Gutenberg organise et explique ses blocs de contenu beaucoup mieux, mais Elementor fournit une plus grande quantité de blocs (widgets) avec des réglages plus forts.

Support WooCommerce : Gutenberg vs Elementor

WooCommerce est une extension tierce qui permet de transformer n’importe quel site WordPress en boutique en ligne. Lorsqu’elle est associée à un constructeur de pages, vous recevez souvent des blocs WooCommerce pour une plus grande personnalisation du panier d’achat, des pages de produits, et plus encore.

Gutenberg ne fait pas exception à la règle. Une fois que vous avez installé WooCommerce, une myriade de blocs Gutenberg apparaît pour renforcer la conception de votre boutique WooCommerce. Il y a des blocs de recherche de produits, des options pour afficher les filtres actifs et des façons d’afficher les produits les plus vendus. Nous avons dénombré 26 blocs Gutenberg/WooCommerce, et il existe plusieurs extensions tierces pour compléter cette liste.

Les blocs WooCommerce.
Les blocs WooCommerce.

Elementor fonctionne bien avec WooCommerce, mais cela a un prix. Vous devez avoir un abonnement Elementor Pro pour débloquer les widgets de contenu ou les modèles de page de WooCommerce. Cela dit, Elementor Pro est abordable, et les blocs offrent des outils de style plus puissants que tout ce qui se trouve dans Gutenberg.

Au moment de la rédaction de cet article, 20 blocs WooCommerce étaient disponibles dans Elementor. La liste comprend des images de produits, des boutons Ajouter au panier, des évaluations de produits et des galeries de produits.

Des blocs WooCommerce supplémentaires comme Panier et Titre de produit.
Des blocs WooCommerce supplémentaires comme Panier et Titre de produit.

Il y a même des widgets uniques comme Ventes croisées et Méta de donnée de produit.

Intégrations : Gutenberg vs Elementor

Il est important de ne pas confondre les intégrations avec la compatibilité. Nous aborderons la compatibilité des thèmes et des extensions plus loin dans cet article, mais les intégrations sont plutôt des liens vers d’autres applications, plateformes et logiciels, où des données sont envoyées vers ou depuis le constructeur de pages.

Par exemple, une intégration avec Facebook peut afficher un bouton permettant aux internautes de suivre votre page ou une liste de vos publications Facebook les plus récentes.

Gutenberg dispose d’une courte liste d’intégrations directes, utilisant principalement des blocs pour extraire du contenu de sources extérieures.

Voici un aperçu des 32 intégrations Gutenberg actuelles :

  • Openverse
  • Twitter
  • YouTube
  • WordPress
  • SoundCloud
  • Spotify
  • Crowdsignal
  • Dailymotion
  • Imgur
  • Issue
  • Kickstarter
  • Amazon Kindle
  • Pinterest
  • Reddit
  • Slideshare

Elementor dispose d’une solide liste d’intégrations, des plateformes médiatiques aux sites sociaux.

Voici quelques-unes des plus de 40 intégrations d’Elementor :

  • PayPal
  • Facebook (pour les commentaires, les intégrations, les pages et les boutons)
  • YouTube
  • Vimeo
  • Google Maps
  • SoundCloud
  • MailChimp
  • ActiveCampaign
  • ConvertKit
  • HubSpot
  • Zapier
  • Discord
  • Bibliothèques d’icônes personnalisées
  • Slack
  • ReCaptcha
  • Drip

Les deux ont des intégrations respectables, mais les intégrations d’Elementor semblent plus fortes et plus nombreuses. Vous pouvez utiliser les principaux fournisseurs de marketing par e-mail, vendre par l’intermédiaire de processeurs de paiement et vous connecter à votre logiciel de gestion de la relation client dans Elementor. Gutenberg, quant à lui, se concentre davantage sur les liens vers les bibliothèques de médias et les sites sociaux.

Interface utilisateur : Gutenberg vs Elementor

La prise en main de Gutenberg est aussi intuitive que celle de WordPress lui-même. C’est parce que Gutenberg est intégré automatiquement dans le tableau de bord de WordPress. Il n’est pas nécessaire d’installer une extension ou un module complémentaire. Ouvrez simplement un éditeur de page ou d’article, et Gutenberg se met au travail.

Ajoutez des blocs via la barre de recherche ou dans l'éditeur.
Ajoutez des blocs via la barre de recherche ou dans l’éditeur.

Vous pouvez rechercher et insérer des blocs en cliquant sur l’un des boutons « + » (Ajouter un bloc) disséminés dans l’éditeur. Vous y trouverez une barre de recherche, ainsi que divers onglets pour les blocs, les compositions et les médias. Vous remarquerez même que Gutenberg s’intègre aux fournisseurs d’images Creative Commons les plus populaires pour trouver gratuitement des graphiques appropriés.

La rapidité de la création de contenu fait de Gutenberg l’un des meilleurs constructeurs de pages pour les blogueurs et tous ceux qui publient en ligne. Vous pouvez écrire directement dans l’éditeur et utiliser le balisage et les raccourcis clavier pour insérer rapidement des éléments tels que des titres, des liens et des images.

Sans oublier que Gutenberg s’intègre à un large éventail d’autres éditeurs de texte tiers, ou que vous pouvez copier le contenu d’autres programmes directement dans Gutenberg (sans avoir à téléverser des images une seconde fois ou à ajuster le formatage).

L’onglet Page propose des réglages de publication et des réglages axés sur la page, tels que des outils pour les images mises en avant, les extraits et les commentaires.

L'onglet Image mise en avant.
L’onglet Image mise en avant.

Il est également facile d’ajuster les réglages relatifs aux blocs. Il vous suffit de cliquer sur l’onglet Bloc. Vous accédez alors aux fonctions de personnalisation propres au bloc que vous avez sélectionné. Par exemple, un bloc Image affiche tout, depuis les champs de texte Alt jusqu’aux paramètres des dimensions de l’image. C’est également dans ce bloc que vous pouvez ajouter des balises CSS, des ancres HTML ou des attributs de titre.

Utilisez l'onglet Bloc pour accéder à tous les réglages du bloc.
Utilisez l’onglet Bloc pour accéder à tous les réglages du bloc.

En ce qui concerne la facilité d’utilisation, Elementor n’est pas étranger au fait de rendre les choses intuitives. Cependant, il y a une courbe d’apprentissage, principalement en raison de la collection robuste de fonctionnalités fournies.

Dans l’éditeur, vous obtenez une réplique exacte de l’interface publique d’une page en tant qu’éditeur. Chaque widget de contenu d’Elementor peut être glissé ou modifié à partir de la bibliothèque.

Éléments Elementor classés par catégories.
Éléments Elementor classés par catégories.

Bien que les catégories manquent de noms utiles, vous pouvez trouver les widgets dans les catégories Basique, Pro, Général, Site, WooCommerce et WordPress. Un panneau « Favoris » vous permet d’enregistrer des widgets personnalisés pour les réutiliser plus tard.

La véritable facilité d’utilisation d’Elementor vient de son éditeur basé sur une grille, qui vous permet de glisser-déposer un élément à peu près n’importe où sur la page. De plus, vous pouvez faire glisser des sections entières, supprimer des sections ou en ajouter en cliquant dans l’éditeur.

Déplacement d'un bloc vers un autre emplacement.
Déplacement d’un bloc vers un autre emplacement.

Nous bénéficions également d’un accès rapide à la bibliothèque de blocs et de modèles. Enregistrez des modèles personnalisés pour les utiliser ultérieurement ou profitez des blocs et des modèles de page conçus par des professionnels. Beaucoup d’entre eux sont destinés à des situations spécifiques, comme si vous aviez besoin d’une page 404 ou d’un panier WooCommerce personnalisé.

Ce n'est qu'une petite partie des blocs disponibles dans Elementor.
Ce n’est qu’une petite partie des blocs disponibles dans Elementor.

Le principal inconvénient de l’interface d’Elementor est sa nature tierce. Vous devez installer une extension pour le rendre actif sur WordPress. Même dans ce cas, vous devez toujours cliquer sur le bouton « Modifier avec Elementor », car Gutenberg est techniquement toujours installé en arrière-plan.

Dans l’ensemble, l’interface de Gutenberg est plus facile à appréhender, mais il n’y a rien de tel que de travailler avec Elementor. Il est fluide, amusant à utiliser et capable de bien plus que Gutenberg, une fois que vous avez pris le coup de main.

Performance et impact sur la vitesse de la page : Gutenberg vs Elementor

Les constructeurs de pages offrent de nombreuses fonctionnalités. Cela pourrait conduire à un ensemble d’outils volumineux qui entre en conflit avec les extensions et les thèmes et inhibe également la vitesse de la page. Lorsque l’on regarde les avis des utilisateurs, Elementor et Gutenberg semblent fonctionner correctement lorsque l’on utilise les outils d’optimisation appropriés et un hébergeur rapide.

Dans notre test, nous avons installé Gutenberg et Elementor sur des instances séparées de ce que nous savons être un serveur CDN performant (de Kinsta). Nous avons également utilisé le même thème avec le contenu de démonstration pour rendre les tests aussi égaux que possible. Nous avons conservé le même emplacement de serveur (Iowa) pour les deux tests et installé deux extensions communes (WooCommerce et Yoast SEO) pour voir comment les constructeurs de pages réagissaient dans un environnement réel.

Voici les résultats obtenus avec Pingdom et Google PageSpeed Insights:

Tests de vitesse des pages Gutenberg

  • Score de performance Pingdom : 92 (serveur de test de San Francisco)
  • Taille de la page : 905.2 Ko
  • Temps de chargement : 1,32 s
  • Requêtes : 19

Nous avons effectué le même test avec un serveur de test à Londres :

  • Score de performance : 92
  • Taille de la page : 905.8 Ko
  • Temps de chargement : 1,50 s
  • Requêtes : 19

Et voici les résultats de Google PageSpeed Insights :

  • Performances sur ordinateur : 99
  • Accessibilité : 100
  • Meilleures pratiques pour les ordinateurs de bureau : 92
  • Référencement des ordinateurs de bureau : 67
  • Performance mobile : 93
  • Accessibilité mobile : 100
  • Meilleures pratiques mobiles : 92
  • Référencement mobile : 71

Tests de vitesse des pages Elementor

  • Score de performance Pingdom : 88 (serveur de test de San Francisco)
  • Taille de la page : 2.5 Mo
  • Temps de chargement : 1.93 s
  • Requêtes : 48

Et les résultats du serveur de test de Londres :

  • Score de performance : 87
  • Taille de la page : 2.5 Mo
  • Temps de chargement : 1.97 s
  • Requêtes : 48

Résultats de Google PageSpeed Insights :

  • Performances sur ordinateur : 94
  • Accessibilité des ordinateurs de bureau : 100
  • Meilleures pratiques pour les ordinateurs de bureau : 92
  • Référencement des ordinateurs de bureau : 67
  • Performance mobile : 81
  • Accessibilité mobile : 100
  • Meilleures pratiques mobiles : 92
  • Référencement mobile : 71

Gutenberg a presque toujours fourni un score de performance plus élevé, une taille de page plus faible et un temps de chargement plus rapide, ainsi que moins de requêtes. Cependant, cela pourrait être dû au fait qu’Elementor a des conceptions de blocs plus avancées, et que Gutenberg est techniquement toujours installé à côté d’Elementor, de sorte que vous êtes coincé avec deux constructeurs de pages fonctionnant en même temps, ce qui peut potentiellement ralentir le site.

Quoi qu’il en soit, les deux offrent des vitesses élevées. La partie la plus importante pour maintenir des vitesses de page acceptables est d’opter pour un hébergeur infogéré et alimenté par un CDN comme Kinsta.

Prix : Gutenberg vs Elementor

Vous pouvez obtenir Gutenberg et Elementor gratuitement. La principale différence est que Gutenberg est entièrement gratuit, pour toujours. Elementor offre une version gratuite robuste de son constructeur de pages et plusieurs mises à niveau et add-ons pour ceux qui sont intéressés par des fonctionnalités plus avancées.

Prix de Gutenberg

Gratuit, car il s’agit de l’éditeur de WordPress et il est intégré à WordPress par défaut.

Prix d’Elementor

La marque Elementor propose d’autres produits et services, mais pour les besoins de cette comparaison, nous limitons les prix à son extension de construction de pages.

  • Plan gratuit: 0 $ pour plus de 40 widgets gratuits, la fonctionnalité « glisser-déposer » et une API pour les développeurs
  • Plan essentiel : 59 $ par an pour prendre en charge un site web avec plus de 100 widgets, plus de 300 modèles, le constructeur de thèmes par glisser-déposer, le constructeur de boutiques WooCommerce, le constructeur de pages de destination, les outils de marketing, le constructeur de fenêtres contextuelles et l’assistance premium
  • Plan expert : 199 $ par an pour prendre en charge 25 sites web et recevoir toutes les fonctionnalités mentionnées dans le Plan essentiel
  • Plan agence : 399 $ par an pour toutes les fonctionnalités mentionnées dans les plans précédents, mais avec un support pour 1000 sites web

Il peut sembler à première vue qu’une extension « gratuit pour toujours » (comme Gutenberg) soit la meilleure offre. Mais la version gratuite d’Elementor contient suffisamment d’outils pour de nombreux types de projets, et le prix des plans premium reste raisonnable.

Nous dirions qu’Elementor est une meilleure valeur que Gutenberg simplement parce que c’est un constructeur de pages plus rationalisé et plus puissant que Gutenberg, et que vous pouvez toujours obtenir de nombreuses fonctionnalités gratuitement. Mais si vous devez maintenir le budget à 0 $ pour toujours, Gutenberg fait l’affaire.

Compatibilité avec les thèmes et les plugins : Gutenberg vs Elementor

Il est difficile de mettre le doigt sur la compatibilité (ou le manque de compatibilité) des constructeurs de pages avec les milliers de thèmes et d’extensions WordPress sur le marché. Cependant, nous pouvons consulter les commentaires des utilisateurs pour déterminer s’il existe des problèmes de compatibilité flagrants avec des thèmes ou des extensions populaires.

Gutenberg semble fonctionner avec la plupart des thèmes et des extensions. Après tout, les développeurs tiers doivent répondre au constructeur de pages puisque Gutenberg est intégré à WordPress par défaut.

D’après nos recherches, les problèmes de compatibilité les plus courants avec Gutenberg surviennent lorsqu’il est combiné avec d’autres constructeurs de pages sur le même site web. Nous avons également constaté que les développeurs d’extensions essaient de se rattraper pour produire des blocs Gutenberg liés à aux extensions. Ainsi, vous pouvez constater que certaines extensions plus anciennes et moins fréquemment mises à jour n’ont pas de blocs Gutenberg.

À la date de cet article, il y a environ 12 questions ouvertes sur la compatibilité dans les forums de WordPress.org, dont certaines semblent être des erreurs d’utilisateurs. Mais il n’est pas insondable de supposer que vous pourriez rencontrer des problèmes.

Elementor est connu pour avoir une solide compatibilité avec la communauté WordPress. Cependant, il s’agit d’un constructeur de pages tiers, il est donc judicieux de garder un œil sur les étiquettes de compatibilité (notes qui expliquent quand une extension n’est pas compatible). Et lorsque vous recherchez un thème, vérifiez toujours s’il est compatible avec Elementor (si c’est ce que vous utilisez comme constructeur de pages).

Pour Gutenberg et Elementor, vous devez garder un œil sur les thèmes WordPress « polyvalents » avec des modèles de démarrage. Ces modèles de démarrage sont conçus pour des constructeurs de pages spécifiques, de sorte qu’un modèle pour Gutenberg ne fonctionnera pas avec Elementor et vice versa. Et certains thèmes n’ont pas de modèles de démarrage pour ces constructeurs de pages.

Édition backend vs frontend dans Gutenberg et Elementor

Il n’y a aucun moyen de modifier le contenu sur l’interface publique d’un site web avec Gutenberg. Mais c’est un peu le but recherché. Gutenberg s’efforce de combiner les aspects de l’édition frontend avec l’expérience backend, ce qui vous permet de vous en tenir à une seule interface.

Ainsi, par exemple, toute l’édition se fait sur le backend de WordPress, mais de nombreux blocs s’affichent en plein écran pour une vue la plus réaliste possible de ce qui vous attend lors de la publication.

Le backend Gutenberg avec ses blocs et ses arrière-plans en plein écran.
Le backend Gutenberg avec ses blocs et ses arrière-plans en plein écran.

Elementor n’est pas très différent. Il offrait auparavant des fonctions d’édition frontend et backend, mais il a finalement combiné l’expérience d’édition en un seul module. Il n’est donc pas possible d’aller sur le frontend de votre site web et de faire glisser des éléments.

Cependant, Elementor amène vos pages et vos articles dans son propre éditeur de backend, qui présente un bel aperçu de la page de frontend. Ainsi, vous voyez exactement ce qui se passe lorsqu’une modification est apportée.

L'éditeur d'Elementor.
L’éditeur d’Elementor.

Enfin, ces deux constructeurs de pages disposent d’un système d’enregistrement automatique, ainsi que de boutons d’enregistrement manuel.

Support client : Gutenberg vs Elementor

Souvent, vous ne bénéficiez d’un support client que lorsque vous payez pour un constructeur de pages. Lors de nos recherches, cette hypothèse s’appliquait à la fois à Gutenberg et à Elementor.

Le constructeur de pages autonome Gutenberg n’a pas de ligne de support client directe à contacter. Vous pouvez cependant discuter des problèmes sur le forum des utilisateurs de Gutenberg. Les membres de WordPress.com bénéficient d’un support client dédié, vous pouvez donc leur demander de vous aider pour les questions relatives à Gutenberg. Les utilisateurs de WordPress.org, malheureusement, sont laissés aux forums et aux articles de blog pour compléter leurs propres recherches.

L’extension gratuite Elementor dispose d’une base de connaissances et d’un forum d’utilisateurs.

Recherchez de la documentation d'aide avec Elementor Academy.
Recherchez de la documentation d’aide avec Elementor Academy.

Pour bénéficier d’un support par e-mail de la part d’une personne réelle, vous devez payer pour Elementor Pro. Cela dit, il existe un module de discussion en direct pour les questions commerciales.

Gutenberg vs Elementor : Lequel choisir ?

Après des années d’expérience avec les utilisateurs de WordPress et une comparaison détaillée de Gutenberg vs Elementor, nous sommes arrivés à quelques conclusions finales.

Voici ce qu’il faut retenir :

  • Les fonctionnalités de Gutenberg sont plus simples que celles d’Elementor. Elles sont parfaites pour les bases de la conception web, mais les utilisateurs chevronnés voudront les réglages de style avancés et les blocs de contenu d’Elementor.
  • L’interface utilisateur de Gutenberg est intégrée à WordPress, alors que celle d’Elementor sera toujours une extension tierce. Cependant, l’expérience utilisateur est transparente dans Elementor, et il est beaucoup plus difficile de simplement glisser et déposer un élément dans Gutenberg.
  • Du point de vue des performances, Gutenberg et Elementor sont tous deux performants. Nos tests l’ont montré. Quoi qu’il en soit, il se peut que vous rencontriez des ralentissements de la vitesse de la page. Le principal moyen de contourner ce problème est d’utiliser un hébergeur de qualité comme Kinsta.
  • Gutenberg est toujours gratuit, mais vous êtes coincé avec ce qu’il y a. Elementor a une version gratuite puissante avec l’option de mise à niveau pour plus de fonctionnalités et un véritable support client.
  • Gutenberg et Elementor sont compatibles avec un large éventail de thèmes et d’extensions WordPress.
  • L’édition du backend dans Gutenberg offre une interface visuellement agréable avec des options de style rapides. L’édition frontend n’existe pas. Vous pouvez cependant voir une vue frontend en direct dans l’éditeur backend. Elementor ne propose que l’édition du backend, mais avec un véritable aperçu qui montre tout depuis le frontend.
  • Gutenberg propose des modèles de section, mais rien d’autre. Elementor est rempli de modèles de section, de site web, de page, d’en-tête et de page de destination, qui nécessitent tous un plan premium.
  • Le support client pour Gutenberg est contenu dans les forums d’utilisateurs et les articles de blog que vous pouvez trouver à ce sujet. Les utilisateurs payants de WordPress.com peuvent obtenir de l’aide pour Gutenberg. Les utilisateurs payants d’Elementor bénéficient d’un support humain, tandis que les utilisateurs gratuits ont accès à de nombreuses ressources en ligne, y compris une base de connaissances.

Résumé

Chaque constructeur de pages a sa place. Elementor est destiné aux utilisateurs plus expérimentés ou à ceux qui ont besoin d’une bibliothèque de modèles de pages. Gutenberg sert de constructeur de pages prêt à l’emploi sur WordPress, avec des outils de style et des paramètres simplifiés et faciles à utiliser, ce qui le rend parfait pour la création rapide de contenu.

Lorsque vous créez un site web WordPress, vous aurez besoin d’un hébergeur puissant à vos côtés. Chez Kinsta, nous proposons une gamme de plans d’hébergement WordPress aux performances optimisées pour tous vos besoins Elementor ou Gutenberg.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).