Qu’est-ce que Gutenberg ?<\/h2>\n
Gutenberg<\/a> est le constructeur de pages WordPress par d\u00e9faut. Il a \u00e9t\u00e9 introduit en 2018 et a remplac\u00e9 ce qu’on appelle maintenant l’\u00e9diteur WordPress \u00ab classique \u00bb, qui \u00e9tait l’\u00e9diteur de contenu texte riche\/HTML d’origine sans aucune fonctionnalit\u00e9 de glisser-d\u00e9poser.<\/p>\n Gutenberg \u00e9tait en fait une r\u00e9ponse \u00e0 une vague d’extensions de constructions de pages tierces<\/a>, notamment Elementor<\/a>, Divi<\/a> et Visual Composer, qui sont tous sortis pour remplacer l’\u00e9diteur classique.<\/p>\n Du point de vue des fonctionnalit\u00e9s, Gutenberg offre une biblioth\u00e8que de \u00ab blocs \u00bb facilement accessible pour faire glisser des \u00e9l\u00e9ments de contenu sur les pages et les articles.<\/p>\n Gutenberg est livr\u00e9 avec pr\u00e8s de 100 blocs de contenu, dont certains permettent d’int\u00e9grer et d’incorporer des services tiers comme Twitter, Reddit et Amazon Kindle. Il est \u00e9galement possible de cr\u00e9er des blocs dynamiques<\/a> pour mettre \u00e0 jour automatiquement le contenu des blocs. Voici quelques exemples de blocs Gutenberg :<\/p>\n La plupart des th\u00e8mes WordPress fonctionnent bien avec Gutenberg.<\/p>\n L’interface Gutenberg pr\u00e9sente 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\u00e9lioration significative par rapport \u00e0 l’\u00e9diteur classique, car Gutenberg prend en charge l’\u00e9dition rapide de markdown parall\u00e8lement \u00e0 une exp\u00e9rience utilisateur visuelle. Et si n\u00e9cessaire, il y a un acc\u00e8s direct aux sections de codage personnalis\u00e9 pour CSS<\/a> et HTML<\/a>.<\/p>\n Chaque bloc fournit sa propre longue liste de r\u00e9glages, et Gutenberg dispose de panneaux rapides pour un contr\u00f4le puissant sur les param\u00e8tres du document et du bloc, comme les balises alt, les couleurs d’arri\u00e8re-plan et la mod\u00e9ration des commentaires.<\/p>\n Elementor est un constructeur de pages, tout comme Gutenberg. Cependant, Elementor pr\u00e9c\u00e8de Gutenberg en tant que l’une des applications tierces de construction de pages qui a finalement conduit \u00e0 la cr\u00e9ation d’un constructeur de pages WordPress par d\u00e9faut.<\/p>\n Introduit en 2016, Elementor a \u00e9t\u00e9 un favori des concepteurs WordPress<\/a> en raison de son interface de conception Web enti\u00e8rement visuelle, de ses mod\u00e8les de d\u00e9marrage \u00e9l\u00e9gants<\/a> (pr\u00eats \u00e0 \u00eatre import\u00e9s) et de ses modules de contenu par glisser-d\u00e9poser.<\/p>\n L’une des diff\u00e9rences les plus imm\u00e9diatement perceptibles entre Elementor et Gutenberg est qu’Elementor n’est pas int\u00e9gr\u00e9 \u00e0 WordPress. Il est fabriqu\u00e9 par une autre soci\u00e9t\u00e9 et vous devez donc installer son extension gratuite (des versions premium sont \u00e9galement disponibles).<\/p>\n Vous remarquerez \u00e9galement qu’Elementor a des noms uniques pour ses fonctionnalit\u00e9s. Ce qu’ils appellent \u00ab blocs \u00bb dans Gutenberg est appel\u00e9 \u00ab widgets \u00bb dans Elementor. \u00c0 ce propos, Elementor peut se vanter d’avoir plus de 100 de ces widgets de contenu.<\/p>\n Exemples de widgets de contenu Elementor :<\/p>\n De nombreux widgets cr\u00e9ent des int\u00e9grations entre un site WordPress et des applications tierces, telles que Stripe<\/a>, Facebook et Sound Cloud.<\/p>\n Dans l’ensemble, Elementor est l’un des meilleurs constructeurs de pages WordPress avec une communaut\u00e9 dynamique de d\u00e9veloppeurs et d’utilisateurs. L’interface visuelle, par glisser-d\u00e9poser, est difficile \u00e0 battre, vous recevez des centaines de mod\u00e8les de concepteurs, et toute l’\u00e9dition se fait en direct.<\/p>\n Avec les widgets <\/a>WooCommerce<\/a> 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.<\/p>\n Nous allons comparer Gutenberg vs Elementor dans des domaines tels que les fonctionnalit\u00e9s, l’interface utilisateur, les prix, et plus encore. Apr\u00e8s notre examen, vous aurez une meilleure compr\u00e9hension du constructeur de pages qui convient le mieux \u00e0 vos besoins.<\/p>\n Dans cette section, nous avons s\u00e9lectionn\u00e9 ce que nous consid\u00e9rons comme les fonctionnalit\u00e9s \u00ab cl\u00e9s \u00bb d’un constructeur de pages, puis nous comparerons Gutenberg et Elementor dans chaque cat\u00e9gorie.<\/p>\n Le probl\u00e8me avec les constructeurs de pages est qu’ils remplissent souvent l’interface avec des outils de cr\u00e9ation visuelle et repoussent les fonctionnalit\u00e9s plus avanc\u00e9es, comme l’\u00e9dition de code, hors de vue.<\/p>\n Nous pr\u00e9f\u00e9rons voir un m\u00e9lange des deux, o\u00f9 les d\u00e9butants ont une interface en glisser-d\u00e9poser \u00e9l\u00e9gante et facilement accessible, et les utilisateurs avanc\u00e9s peuvent utiliser le CSS sans avoir \u00e0 fouiller pour trouver le bon champ.<\/p>\n La fonctionnalit\u00e9 de glisser-d\u00e9poser de Gutenberg est simple et sans d\u00e9calage. Il suffit d’un instant pour rechercher des blocs de contenu et les faire glisser – ou cliquer et les ins\u00e9rer – dans le contenu. Ensuite, les r\u00e9glages du bloc apparaissent pour la personnalisation.<\/p>\n L’inconv\u00e9nient est que, pour faire glisser des blocs d\u00e9j\u00e0 plac\u00e9s, vous devez d’abord s\u00e9lectionner un bloc, puis cliquer sur une petite ic\u00f4ne de d\u00e9placement<\/strong> et la maintenir enfonc\u00e9e. Cela demande de la pr\u00e9cision lors du clic, ce qui n’est pas n\u00e9cessaire pour d’autres constructeurs de pages.<\/p>\n Lorsqu’il s’agit de coder, Gutenberg rend son \u00e9diteur de code<\/strong> facile \u00e0 trouver.<\/p>\n Les utilisateurs ont constat\u00e9 des probl\u00e8mes avec les blocs qui g\u00e2chent leur code et des difficult\u00e9s avec les blocs pr\u00e9-construits, ce qui oblige les d\u00e9veloppeurs \u00e0 produire des dizaines de blocs personnalis\u00e9s.<\/p>\n Malgr\u00e9 les plaintes, le constructeur de pages s’est am\u00e9lior\u00e9 pour les codeurs et les outils sont bien l\u00e0, mais avec une courbe d’apprentissage peut-\u00eatre plus raide que ce qui \u00e9tait disponible dans l’\u00e9diteur classique.<\/p>\n Vous pouvez m\u00eame ajouter des ancres HTML et des classes CSS suppl\u00e9mentaires directement \u00e0 partir de l’onglet Bloc<\/strong> dans Gutenberg, ce qui n\u00e9cessitait auparavant un parcours fastidieux \u00e0 travers l’onglet HTML<\/strong> dans l’\u00e9diteur classique.<\/p>\n Elementor offre \u00e9galement une fonctionnalit\u00e9 de glisser-d\u00e9poser. Il fonctionne avec la plupart des th\u00e8mes WordPress<\/a> et pr\u00e9sente une biblioth\u00e8que de blocs \u00e0 ins\u00e9rer rapidement sur n’importe quelle page.<\/p>\n Comme Elementor utilise un syst\u00e8me de grille semi-automatique, il est possible d’ins\u00e9rer des widgets dans la plupart des zones d’une page.<\/p>\n D\u00e9placer des blocs de contenu pr\u00e9c\u00e9demment plac\u00e9s est plus facile avec Elementor qu’avec Gutenberg. Il vous suffit de cliquer sur le bloc et de le maintenir enfonc\u00e9 pour le d\u00e9placer.<\/p>\n L’insertion ou la s\u00e9lection d’un widget de contenu affiche le contenu, le style et les param\u00e8tres avanc\u00e9s de ce widget. Quant au codage, il est simplifi\u00e9 gr\u00e2ce \u00e0 de nombreux r\u00e9glages de bloc. Par exemple, vous pouvez ajouter des ancres HTML, des attributs et des feuilles de style CSS personnalis\u00e9es directement dans les r\u00e9glages du widget ou de la page<\/a>.<\/p>\n Elementor propose \u00e9galement des widgets de code HTML<\/strong> pour ins\u00e9rer tout code personnalis\u00e9 que vous souhaitez dans une page web.<\/p>\n Dans l’ensemble, la fonctionnalit\u00e9 de glisser-d\u00e9poser d’Elementor est plus forte que celle de Gutenberg. Cependant, les options de codage personnalis\u00e9 semblent \u00e9galement accessibles dans les deux constructeurs de pages.<\/p>\n Les mod\u00e8les de constructeurs de pages permettent aux d\u00e9veloppeurs de construire des sites web \u00e0 une vitesse fulgurante. Les mod\u00e8les vous permettent de commencer avec des sites web professionnels ou des conceptions de pages au lieu de construire \u00e0 partir de z\u00e9ro.<\/p>\n De nombreux constructeurs de pages proposent des mod\u00e8les pr\u00e9-construits pour :<\/p>\n Gutenberg manque cruellement de mod\u00e8les pr\u00e9-construits. L’onglet Compositions<\/strong> fournit des mod\u00e8les de section utiles, mais c’est \u00e0 peu pr\u00e8s tout.<\/p>\n Cependant, il est possible d’installer des extensions tierces avec des mod\u00e8les de d\u00e9part pour les pages et les sites web complets. Des extensions telles que Gutentor<\/a>, Twentig<\/a> et Otter Blocks<\/a> sont tout \u00e0 fait adapt\u00e9es.<\/p>\n Elementor, quant \u00e0 lui, est aliment\u00e9 par des centaines de mod\u00e8les de d\u00e9part dans son constructeur de th\u00e8me<\/a>.<\/p>\n Les mod\u00e8les d’Elementor comprennent :<\/p>\n Presque tous les mod\u00e8les d’Elementor n\u00e9cessitent un abonnement premium, mais c’est abordable et meilleur que ce que vous obtenez avec Gutenberg.<\/p>\n Les fonctions de style de Gutenberg permettent des personnalisations rapides dans le panneau de blocs <\/strong>de droite, apr\u00e8s avoir s\u00e9lectionn\u00e9 le bloc que vous souhaitez modifier.<\/p>\n Les r\u00e9glages de style sont assez basiques par rapport \u00e0 Elementor, mais les \u00e9l\u00e9ments essentiels sont presque toujours pr\u00e9sents, comme les options permettant de modifier les bordures et les dimensions des images, ou les r\u00e9glages de couleur, de typographie et de marge pour les blocs de paragraphe.<\/p>\n Outre le CSS personnalis\u00e9 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’\u00e9diter avec HTML, de copier ce style et de le dupliquer.<\/p>\n Les r\u00e9glages de style dans Elementor sont contenus dans trois onglets lorsqu’un widget est s\u00e9lectionn\u00e9. Ajustez les r\u00e9glages de contenu pour le dimensionnement des images et du texte, puis passez aux zones avanc\u00e9es, avec tout ce qu’il faut pour les animations de survol, les filtres CSS et les masques, ainsi que les effets de transformation.<\/p>\n 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\u00e9 se sentiront \u00e0 l’aise avec les fonctionnalit\u00e9s de style disponibles dans Gutenberg.<\/p>\n Gutenberg est livr\u00e9 avec un peu plus de 90 blocs de contenu. Elementor en propose plus de 100.<\/p>\n Voici les cat\u00e9gories de blocs de Gutenberg :<\/p>\n Vous disposez de tous les \u00e9l\u00e9ments essentiels (blocs de paragraphes, d’images et de boutons), ainsi que d’\u00e9l\u00e9ments uniques pour des \u00e9l\u00e9ments tels que Speaker Deck, Kickstarter, Boucle de requ\u00eate, Couplet, Temps de lecture, et bien d’autres encore.<\/p>\n Elementor classe \u00e9galement ses widgets de contenu par cat\u00e9gories :<\/p>\n Ce ne sont pas les cat\u00e9gories les plus utiles, mais au moins elles sont organis\u00e9es d’une certaine mani\u00e8re.<\/p>\n Les widgets de contenu standard, tels que les s\u00e9parateurs, les sections et les titres, sont fournis. Il y a aussi des widgets uniques pour Google Maps<\/a>, Mise en \u00e9vidence de code, Donn\u00e9es de produit WooCommerce, et plus encore.<\/p>\n Notre conclusion est que Gutenberg organise et explique ses blocs de contenu beaucoup mieux, mais Elementor fournit une plus grande quantit\u00e9 de blocs (widgets) avec des r\u00e9glages plus forts.<\/p>\n WooCommerce<\/a> est une extension tierce qui permet de transformer n’importe quel site WordPress en boutique en ligne. Lorsqu’elle est associ\u00e9e \u00e0 un constructeur de pages, vous recevez souvent des blocs WooCommerce pour une plus grande personnalisation du panier d’achat<\/a>, des pages de produits, et plus encore.<\/p>\n Gutenberg ne fait pas exception \u00e0 la r\u00e8gle. Une fois que vous avez install\u00e9 WooCommerce, une myriade de blocs Gutenberg appara\u00eet 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\u00e7ons d’afficher les produits les plus vendus. Nous avons d\u00e9nombr\u00e9 26 blocs Gutenberg\/WooCommerce, et il existe plusieurs extensions tierces pour compl\u00e9ter cette liste.<\/p>\n Elementor fonctionne bien avec WooCommerce, mais cela a un prix. Vous devez avoir un abonnement Elementor Pro pour d\u00e9bloquer les widgets de contenu ou les mod\u00e8les 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.<\/p>\n Au moment de la r\u00e9daction de cet article, 20 blocs WooCommerce \u00e9taient disponibles dans Elementor. La liste comprend des images de produits, des boutons Ajouter au panier, des \u00e9valuations de produits et des galeries de produits.<\/p>\n Il y a m\u00eame des widgets uniques comme Ventes crois\u00e9es et M\u00e9ta de donn\u00e9e de produit.<\/p>\n Il est important de ne pas confondre les int\u00e9grations avec la compatibilit\u00e9. Nous aborderons la compatibilit\u00e9 des th\u00e8mes et des extensions plus loin dans cet article, mais les int\u00e9grations sont plut\u00f4t des liens vers d’autres applications, plateformes et logiciels, o\u00f9 des donn\u00e9es sont envoy\u00e9es vers ou depuis le constructeur de pages.<\/p>\n Par exemple, une int\u00e9gration avec Facebook peut afficher un bouton permettant aux internautes de suivre votre page ou une liste de vos publications Facebook les plus r\u00e9centes.<\/p>\n Gutenberg dispose d’une courte liste d’int\u00e9grations directes, utilisant principalement des blocs pour extraire du contenu de sources ext\u00e9rieures.<\/p>\n Voici un aper\u00e7u des 32 int\u00e9grations Gutenberg actuelles :<\/p>\n Elementor dispose d’une solide liste d’int\u00e9grations, des plateformes m\u00e9diatiques aux sites sociaux.<\/p>\n Voici quelques-unes des plus de 40 int\u00e9grations d’Elementor :<\/p>\n Les deux ont des int\u00e9grations respectables, mais les int\u00e9grations d’Elementor semblent plus fortes et plus nombreuses. Vous pouvez utiliser les principaux fournisseurs de marketing par e-mail, vendre par l’interm\u00e9diaire de processeurs de paiement et vous connecter \u00e0 votre logiciel de gestion de la relation client<\/a> dans Elementor. Gutenberg, quant \u00e0 lui, se concentre davantage sur les liens vers les biblioth\u00e8ques de m\u00e9dias et les sites sociaux.<\/p>\n La prise en main de Gutenberg est aussi intuitive que celle de WordPress lui-m\u00eame. C’est parce que Gutenberg est int\u00e9gr\u00e9 automatiquement dans le tableau de bord de WordPress<\/a>. Il n’est pas n\u00e9cessaire d’installer une extension ou un module compl\u00e9mentaire. Ouvrez simplement un \u00e9diteur de page ou d’article, et Gutenberg se met au travail.<\/p>\n Vous pouvez rechercher et ins\u00e9rer des blocs en cliquant sur l’un des boutons \u00ab + \u00bb (Ajouter un bloc)<\/strong> diss\u00e9min\u00e9s dans l’\u00e9diteur. Vous y trouverez une barre de recherche, ainsi que divers onglets pour les blocs<\/strong>, les compositions<\/strong> et les m\u00e9dias<\/strong>. Vous remarquerez m\u00eame que Gutenberg s’int\u00e8gre aux fournisseurs d’images Creative Commons les plus populaires pour trouver gratuitement des graphiques appropri\u00e9s.<\/p>\n La rapidit\u00e9 de la cr\u00e9ation de contenu fait de Gutenberg l’un des meilleurs constructeurs de pages<\/a> pour les blogueurs et tous ceux qui publient en ligne. Vous pouvez \u00e9crire directement dans l’\u00e9diteur et utiliser le balisage et les raccourcis clavier pour ins\u00e9rer rapidement des \u00e9l\u00e9ments tels que des titres, des liens et des images.<\/p>\n Sans oublier que Gutenberg s’int\u00e8gre \u00e0 un large \u00e9ventail d’autres \u00e9diteurs de texte tiers, ou que vous pouvez copier le contenu d’autres programmes directement dans Gutenberg (sans avoir \u00e0 t\u00e9l\u00e9verser des images une seconde fois ou \u00e0 ajuster le formatage).<\/p>\n L’onglet Page<\/strong> propose des r\u00e9glages de publication et des r\u00e9glages ax\u00e9s sur la page, tels que des outils pour les images mises en avant, les extraits et les commentaires.<\/p>\n Il est \u00e9galement facile d’ajuster les r\u00e9glages relatifs aux blocs. Il vous suffit de cliquer sur l’onglet Bloc<\/strong>. Vous acc\u00e9dez alors aux fonctions de personnalisation propres au bloc que vous avez s\u00e9lectionn\u00e9. Par exemple, un bloc Image<\/strong> affiche tout, depuis les champs de texte Alt<\/strong> jusqu’aux param\u00e8tres des dimensions de l’image<\/strong>. C’est \u00e9galement dans ce bloc que vous pouvez ajouter des balises CSS<\/strong>, des ancres HTML<\/strong> ou des attributs de titre<\/strong>.<\/p>\n En ce qui concerne la facilit\u00e9 d’utilisation, Elementor n’est pas \u00e9tranger au fait de rendre les choses intuitives. Cependant, il y a une courbe d’apprentissage, principalement en raison de la collection robuste de fonctionnalit\u00e9s fournies.<\/p>\n Dans l’\u00e9diteur, vous obtenez une r\u00e9plique exacte de l’interface publique d’une page en tant qu’\u00e9diteur. Chaque widget de contenu d’Elementor peut \u00eatre gliss\u00e9 ou modifi\u00e9 \u00e0 partir de la biblioth\u00e8que.<\/p>\n Bien que les cat\u00e9gories manquent de noms utiles, vous pouvez trouver les widgets dans les cat\u00e9gories Basique<\/strong>, Pro<\/strong>, G\u00e9n\u00e9ral<\/strong>, Site<\/strong>, WooCommerce<\/strong> et WordPress<\/strong>. Un panneau \u00ab Favoris<\/strong> \u00bb vous permet d’enregistrer des widgets personnalis\u00e9s pour les r\u00e9utiliser plus tard.<\/p>\n La v\u00e9ritable facilit\u00e9 d’utilisation d’Elementor vient de son \u00e9diteur bas\u00e9 sur une grille, qui vous permet de glisser-d\u00e9poser un \u00e9l\u00e9ment \u00e0 peu pr\u00e8s n’importe o\u00f9 sur la page. De plus, vous pouvez faire glisser des sections enti\u00e8res, supprimer des sections ou en ajouter en cliquant dans l’\u00e9diteur.<\/p>\n Nous b\u00e9n\u00e9ficions \u00e9galement d’un acc\u00e8s rapide \u00e0 la biblioth\u00e8que de blocs et de mod\u00e8les. Enregistrez des mod\u00e8les personnalis\u00e9s<\/a> pour les utiliser ult\u00e9rieurement ou profitez des blocs et des mod\u00e8les de page con\u00e7us par des professionnels. Beaucoup d’entre eux sont destin\u00e9s \u00e0 des situations sp\u00e9cifiques, comme si vous aviez besoin d’une page 404<\/a> ou d’un panier WooCommerce personnalis\u00e9.<\/p>\n Le principal inconv\u00e9nient de l’interface d’Elementor est sa nature tierce. Vous devez installer une extension pour le rendre actif sur WordPress. M\u00eame dans ce cas, vous devez toujours cliquer sur le bouton \u00ab<\/strong> Modifier avec Elementor \u00bb<\/strong>, car Gutenberg est techniquement toujours install\u00e9 en arri\u00e8re-plan.<\/p>\n Dans l’ensemble, l’interface de Gutenberg est plus facile \u00e0 appr\u00e9hender, mais il n’y a rien de tel que de travailler avec Elementor. Il est fluide, amusant \u00e0 utiliser et capable de bien plus que Gutenberg, une fois que vous avez pris le coup de main.<\/p>\n Les constructeurs de pages offrent de nombreuses fonctionnalit\u00e9s. Cela pourrait conduire \u00e0 un ensemble d’outils volumineux qui entre en conflit avec les extensions et les th\u00e8mes et inhibe \u00e9galement 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\u00e9s et un h\u00e9bergeur rapide.<\/p>\n Dans notre test, nous avons install\u00e9 Gutenberg et Elementor sur des instances s\u00e9par\u00e9es de ce que nous savons \u00eatre un serveur CDN performant (de Kinsta)<\/a>. Nous avons \u00e9galement utilis\u00e9 le m\u00eame th\u00e8me avec le contenu de d\u00e9monstration pour rendre les tests aussi \u00e9gaux que possible. Nous avons conserv\u00e9 le m\u00eame emplacement de serveur (Iowa) pour les deux tests et install\u00e9 deux extensions communes (WooCommerce et Yoast SEO<\/a>) pour voir comment les constructeurs de pages r\u00e9agissaient dans un environnement r\u00e9el.<\/p>\n Voici les r\u00e9sultats obtenus avec Pingdom<\/a> et Google PageSpeed Insights<\/a>:<\/p>\n Nous avons effectu\u00e9 le m\u00eame test avec un serveur de test \u00e0 Londres :<\/p>\n Et voici les r\u00e9sultats de Google PageSpeed Insights :<\/p>\n Et les r\u00e9sultats du serveur de test de Londres :<\/p>\n R\u00e9sultats de Google PageSpeed Insights :<\/p>\n Gutenberg a presque toujours fourni un score de performance plus \u00e9lev\u00e9, une taille de page plus faible et un temps de chargement plus rapide, ainsi que moins de requ\u00eates. Cependant, cela pourrait \u00eatre d\u00fb au fait qu’Elementor a des conceptions de blocs plus avanc\u00e9es, et que Gutenberg est techniquement toujours install\u00e9 \u00e0 c\u00f4t\u00e9 d’Elementor, de sorte que vous \u00eates coinc\u00e9 avec deux constructeurs de pages fonctionnant en m\u00eame temps, ce qui peut potentiellement ralentir le site.<\/p>\n Quoi qu’il en soit, les deux offrent des vitesses \u00e9lev\u00e9es. La partie la plus importante pour maintenir des vitesses de page acceptables est d’opter pour un h\u00e9bergeur infog\u00e9r\u00e9 et aliment\u00e9 par un CDN comme Kinsta.<\/p>\n Vous pouvez obtenir Gutenberg et Elementor gratuitement. La principale diff\u00e9rence est que Gutenberg est enti\u00e8rement gratuit, pour toujours. Elementor offre une version gratuite robuste de son constructeur de pages et plusieurs mises \u00e0 niveau et add-ons pour ceux qui sont int\u00e9ress\u00e9s par des fonctionnalit\u00e9s plus avanc\u00e9es.<\/p>\n Gratuit, car il s’agit de l’\u00e9diteur de WordPress et il est int\u00e9gr\u00e9 \u00e0 WordPress par d\u00e9faut.<\/p>\n La marque Elementor propose d’autres produits et services, mais pour les besoins de cette comparaison, nous limitons les prix \u00e0 son extension de construction de pages.<\/p>\n Il peut sembler \u00e0 premi\u00e8re vue qu’une extension \u00ab gratuit pour toujours \u00bb (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.<\/p>\n Nous dirions qu’Elementor est une meilleure valeur que Gutenberg simplement parce que c’est un constructeur de pages plus rationalis\u00e9 et plus puissant que Gutenberg, et que vous pouvez toujours obtenir de nombreuses fonctionnalit\u00e9s gratuitement. Mais si vous devez maintenir le budget \u00e0 0 $ pour toujours, Gutenberg fait l’affaire.<\/p>\n Il est difficile de mettre le doigt sur la compatibilit\u00e9 (ou le manque de compatibilit\u00e9) des constructeurs de pages avec les milliers de th\u00e8mes et d’extensions WordPress sur le march\u00e9. Cependant, nous pouvons consulter les commentaires des utilisateurs pour d\u00e9terminer s’il existe des probl\u00e8mes de compatibilit\u00e9 flagrants avec des th\u00e8mes ou des extensions populaires.<\/p>\n Gutenberg semble fonctionner avec la plupart des th\u00e8mes et des extensions. Apr\u00e8s tout, les d\u00e9veloppeurs tiers doivent r\u00e9pondre au constructeur de pages puisque Gutenberg est int\u00e9gr\u00e9 \u00e0 WordPress par d\u00e9faut.<\/p>\n D’apr\u00e8s nos recherches, les probl\u00e8mes de compatibilit\u00e9 les plus courants avec Gutenberg surviennent lorsqu’il est combin\u00e9 avec d’autres constructeurs de pages sur le m\u00eame site web. Nous avons \u00e9galement constat\u00e9 que les d\u00e9veloppeurs d’extensions essaient de se rattraper pour produire des blocs Gutenberg li\u00e9s \u00e0 aux extensions. Ainsi, vous pouvez constater que certaines extensions plus anciennes et moins fr\u00e9quemment mises \u00e0 jour n’ont pas de blocs Gutenberg.<\/p>\n \u00c0 la date de cet article, il y a environ 12 questions ouvertes sur la compatibilit\u00e9 dans les forums de WordPress.org, dont certaines semblent \u00eatre des erreurs d’utilisateurs. Mais il n’est pas insondable de supposer que vous pourriez rencontrer des probl\u00e8mes.<\/p>\n Elementor est connu pour avoir une solide compatibilit\u00e9 avec la communaut\u00e9 WordPress<\/a>. Cependant, il s’agit d’un constructeur de pages tiers, il est donc judicieux de garder un \u0153il sur les \u00e9tiquettes de compatibilit\u00e9<\/a> (notes qui expliquent quand une extension n’est pas compatible). Et lorsque vous recherchez un th\u00e8me, v\u00e9rifiez toujours s’il est compatible avec Elementor (si c’est ce que vous utilisez comme constructeur de pages).<\/p>\n Pour Gutenberg et Elementor, vous devez garder un \u0153il sur les th\u00e8mes WordPress \u00ab polyvalents \u00bb avec des mod\u00e8les de d\u00e9marrage. Ces mod\u00e8les de d\u00e9marrage sont con\u00e7us pour des constructeurs de pages sp\u00e9cifiques, de sorte qu’un mod\u00e8le pour Gutenberg ne fonctionnera pas avec Elementor et vice versa. Et certains th\u00e8mes n’ont pas de mod\u00e8les de d\u00e9marrage pour ces constructeurs de pages.<\/p>\n 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\u00e9. Gutenberg s’efforce de combiner les aspects de l’\u00e9dition frontend avec l’exp\u00e9rience backend, ce qui vous permet de vous en tenir \u00e0 une seule interface.<\/p>\n Ainsi, par exemple, toute l’\u00e9dition se fait sur le backend de WordPress, mais de nombreux blocs s’affichent en plein \u00e9cran pour une vue la plus r\u00e9aliste possible de ce qui vous attend lors de la publication.<\/p>\n Elementor n’est pas tr\u00e8s diff\u00e9rent. Il offrait auparavant des fonctions d’\u00e9dition frontend et backend, mais il a finalement combin\u00e9 l’exp\u00e9rience d’\u00e9dition en un seul module. Il n’est donc pas possible d’aller sur le frontend de votre site web et de faire glisser des \u00e9l\u00e9ments.<\/p>\n Cependant, Elementor am\u00e8ne vos pages et vos articles dans son propre \u00e9diteur de backend, qui pr\u00e9sente un bel aper\u00e7u de la page de frontend. Ainsi, vous voyez exactement ce qui se passe lorsqu’une modification est apport\u00e9e.<\/p>\n Enfin, ces deux constructeurs de pages disposent d’un syst\u00e8me d’enregistrement automatique, ainsi que de boutons d’enregistrement manuel.<\/p>\n Souvent, vous ne b\u00e9n\u00e9ficiez d’un support client que lorsque vous payez<\/em> pour un constructeur de pages. Lors de nos recherches, cette hypoth\u00e8se s’appliquait \u00e0 la fois \u00e0 Gutenberg et \u00e0 Elementor.<\/p>\n Le constructeur de pages autonome Gutenberg n’a pas de ligne de support client directe \u00e0 contacter. Vous pouvez cependant discuter des probl\u00e8mes sur le forum des utilisateurs de Gutenberg<\/a>. Les membres de WordPress.com b\u00e9n\u00e9ficient d’un support client d\u00e9di\u00e9, vous pouvez donc leur demander de vous aider pour les questions relatives \u00e0 Gutenberg. Les utilisateurs de WordPress.org, malheureusement, sont laiss\u00e9s aux forums et aux articles de blog pour compl\u00e9ter leurs propres recherches.<\/p>\n L’extension gratuite Elementor dispose d’une base de connaissances<\/a> et d’un forum d’utilisateurs<\/a>.<\/p>\n Pour b\u00e9n\u00e9ficier d’un support par e-mail de la part d’une personne r\u00e9elle, vous devez payer pour Elementor Pro. Cela dit, il existe un module de discussion en direct pour les questions commerciales.<\/p>\n Apr\u00e8s des ann\u00e9es d’exp\u00e9rience avec les utilisateurs de WordPress et une comparaison d\u00e9taill\u00e9e de Gutenberg vs Elementor, nous sommes arriv\u00e9s \u00e0 quelques conclusions finales.<\/p>\n Voici ce qu’il faut retenir :<\/p>\n Chaque constructeur de pages a sa place. Elementor est destin\u00e9 aux utilisateurs plus exp\u00e9riment\u00e9s ou \u00e0 ceux qui ont besoin d’une biblioth\u00e8que de mod\u00e8les de pages. Gutenberg sert de constructeur de pages pr\u00eat \u00e0 l’emploi sur WordPress, avec des outils de style et des param\u00e8tres simplifi\u00e9s et faciles \u00e0 utiliser, ce qui le rend parfait pour la cr\u00e9ation rapide de contenu.<\/p>\n![\"L'onglet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg.jpg\")
\n
Qu’est-ce qu’Elementor ?<\/h2>\n
![\"Elementor\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor.png\")
\n
Gutenberg et Elementor compar\u00e9s<\/h2>\n
Fonctionnalit\u00e9s cl\u00e9s<\/h3>\n
Fonctionnalit\u00e9 de glisser-d\u00e9poser et codage : Gutenberg vs Elementor<\/h4>\n
![\"Des](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-blocks.jpg\")
![\"Utilisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-icon.jpg\"){kind=icon}
![\"L'\u00e9diteur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/code-editor.jpg\")
![\"Ajustez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/anchors-and-css.jpg\")
![\"Liste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/basic-blocks.jpg\")
![\"D\u00e9placement](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-block.jpg\")
![\"Vous](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/Elementor-movement.gif\")
![\"Ins\u00e9rez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/advanced.jpg\")
![\"Vous](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/html-code.jpg\")
Mod\u00e8les (pour les sites web, les blocs, les pages, les fen\u00eatres contextuelles, etc \ud83d\ude42 Gutenberg vs Elementor<\/h4>\n
\n
![\"L'onglet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/patterns.jpg\")
\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-theme-builder.jpg\")
Style : Gutenberg vs Elementor<\/h4>\n
![\"Styliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/styling.jpg\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/toolbar.jpg\")
![\"Ajustez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/style-and-more.jpg\")
Blocs de contenu\/widgets : Gutenberg vs Elementor<\/h4>\n
\n
\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/product-images.jpg\")
Support WooCommerce : Gutenberg vs Elementor<\/h4>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/blocks-wocommerce.jpg\")
![\"Des](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/additional-blocks.jpg\")
Int\u00e9grations : Gutenberg vs Elementor<\/h4>\n
\n
\n
Interface utilisateur : Gutenberg vs Elementor<\/h3>\n
![\"Ajoutez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/add-blocks.jpg\")
![\"L'onglet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/featured-image.jpg\")
![\"Utilisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/block-tab.jpg\")
![\"\u00c9l\u00e9ments](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-elements.jpg\")
![\"D\u00e9placement](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/move-block.jpg\")
![\"Ce](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-blocks.jpg\")
Performance et impact sur la vitesse de la page : Gutenberg vs Elementor<\/h3>\n
Tests de vitesse des pages Gutenberg<\/h4>\n
\n
\n
\n
Tests de vitesse des pages Elementor<\/h4>\n
\n
\n
\n
Prix : Gutenberg vs Elementor<\/h3>\n
Prix de Gutenberg<\/h4>\n
Prix d’Elementor<\/h4>\n
\n
Compatibilit\u00e9 avec les th\u00e8mes et les plugins : Gutenberg vs Elementor<\/h3>\n
\u00c9dition backend vs frontend dans Gutenberg et Elementor<\/h3>\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-backend.jpg\")
![\"L'\u00e9diteur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-edit.jpg\")
Support client : Gutenberg vs Elementor<\/h3>\n
![\"Recherchez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/search-for-help.jpg\")
Gutenberg vs Elementor : Lequel choisir ?<\/h2>\n
\n
R\u00e9sum\u00e9<\/h2>\n