Éditeur Gutenberg vs Divi

Dans WordPress, si vous savez utiliser les langages HTML et CSS, vous pouvez concevoir facilement une page web professionnelle. Toutefois, en tant que débutant, il peut être complexe de concevoir le site web que vous souhaitez. Pour y parvenir, de nombreux développeurs ont lancé une diversité de constructeurs de pages WordPress pour vous aider à créer des sites web sans avoir à manipuler le moindre code. Dans la plupart des cas, ils vous fournissent une liste d’éléments préconstruits que vous pouvez rapidement ajouter à vos pages. Si vous utilisez le bon constructeur de pages, vous pouvez avoir accès à de nombreuses fonctionnalités avancées telles que l’ajout d’un formulaire de contact à votre site en quelques minutes au lieu d’installer un plugin supplémentaire.

De nombreux constructeurs de pages se disputent la première place notamment Gutenberg et Divi. Dans cet article, nous vous présentons les avantages et inconvénients de chaque constructeur de page.

Pourquoi utiliser WordPress par rapport aux autres CMS ?

Les constructeurs de pages auxquels nous allons nous intéresser ici fonctionnent avec WordPress. Si vous doutez de ce système de gestion de contenus (CMS), voici quelques-uns de ses avantages en dehors du fait qu’il soit utilisé pour concevoir plus de 40 % des sites existants.

WordPress est un CMS open source

Il est donc facile de construire plusieurs sites sans craindre des frais de licence exorbitants.
L’open source signifie également qu’il y a une multitude de développeurs qui travaillent sur la plateforme, ce qui donne accès à un énorme écosystème de plug-ins et de widgets illimités.

Données sécurisées

Il s’agit d’une plateforme sécurisée, car son ouverture constitue un obstacle à l’introduction en douce de quoi que ce soit dans le code.

Intégrations faciles

Elle facilite l’intégration. La plupart des logiciels ont déjà une intégration conçue pour WordPress. Il n’y a alors pas de soucis à se faire quant aux migrations. Vous pouvez recourir à un professionnel si vous souhaitez créer facilement un site performant avec WordPress. Après cela, nous pouvons nous intéresser aux constructeurs de pages.

Qu’est-ce qu’un constructeur de pages et quelle est son utilité ?

Un constructeur de pages est un outil parfait pour concevoir rapidement des sites Web, avec un design de qualité et sans avoir besoin de connaître le code.
Les constructeurs de pages simplifient le processus de conception de sites Web pour les utilisateurs ayant des connaissances techniques limitées. Voici quelques-uns de leurs avantages :

• développement rapide avec un minimum d’efforts ;
• éviter les frais et les problèmes de disponibilité des concepteurs professionnels ;
• conception de sites Web avec une connaissance limitée ou nulle du codage ;
• possibilité de changer de thème sans impact majeur ;
• répondre à un grand nombre des principales exigences de la conception d’un site Web.

En matière de constructeurs de pages, nous avons : Divi, Gutenberg et Elementor pour les plus populaires. Nous nous intéressons ici à Divi et à Gutenberg.

Qu’est-ce que Divi ?

Divi est un thème premium pour WordPress avec un constructeur de type glisser-déposer qui comprend 46 modules destinés à la construction des pages et des articles depuis le front-end ou le back-end. Le constructeur Divi est ajouté à l’éditeur de pages et d’articles.

Avec Divi, vous pouvez créer des mises en page avec des sections, des rangées et des modules, leur donner un style global pour qu’elles reflètent l’ensemble du site ou de manière indépendante. Vous pouvez même utiliser des mises en page préétablies, des thèmes enfants Divi, ou créer les vôtres, etc. Il est également possible de personnaliser facilement l’en-tête, le pied de page, les barres latérales, d’effectuer des tests fractionnés A/B professionnels et bien plus encore.

Divi est livré avec une bibliothèque intégrée contenant des tas de mises en page et de photographies conçues par des professionnels. Il comprend également un panneau d’options de thèmes qui vous permettent de personnaliser les principales fonctionnalités de Divi. Il est entièrement traduit. Divi dispose également d’une communauté en ligne massive qui permet de maîtriser l’apprentissage de Divi et d’obtenir des conseils de développeurs partageant les mêmes idées.

Quelles sont les caractéristiques principales de Divi ?

En installant le constructeur de pages Divi, vous pouvez avoir accès à de nombreuses fonctionnalités

Divi Page Builder vous permet d’ajouter, de supprimer et de déplacer facilement des éléments sans avoir de connaissances en codage. La fonction de construction par glisser-déposer de Divi est très flexible. Elle vous permet de voir l’aspect de votre site Web directement pendant que vous modifiez votre article/page.
Avec un CSS personnalisé, vous êtes davantage à même de le combiner avec les contrôles d’édition visuelle de Divi.

Avec Divi, il est possible d’utiliser un contrôle total de la conception de votre site Web. Il inclut l’édition de texte en ligne : cette fonctionnalité vous permet de modifier facilement votre page en cliquant sur l’endroit où vous souhaitez faire apparaître votre texte.

Il vous permet aussi d’enregistrer plusieurs designs afin de les utiliser comme modèles pour vos prochaines pages. En outre, vous pouvez créer un site Web entier et pas seulement une page.

L’interface principale de Divi Builder est présentée au bas de chaque page. Tous les éléments sont affichés dans la structure de la page. Il vous suffit de choisir les éléments que vous souhaitez utiliser et de les réorganiser dans l’ordre où vous voulez qu’ils apparaissent sur votre page.

En outre, cet outil offre une bonne sélection de dispositions de colonnes prédéfinies. Vous pouvez ainsi rapidement commencer à créer votre structure de page avec plusieurs lignes et colonnes.

L’une des particularités de Divi est qu’il dispose d’un mode fil de fer dans l’interface utilisateur. Vous pouvez facilement passer à cette vue dans le constructeur de pages pour masquer le contenu de la page ou révéler la structure sous-jacente. Cette fonctionnalité est utile pour déplacer des éléments et modifier leur positionnement.

Divi page builder commence à 89 $ pour une licence d’un an et 249 $ pour une licence à vie. Ces forfaits fournis par Divi sont complètement bénéfiques pour les utilisateurs, car les deux forfaits vous donnent accès à tous les plugins et thèmes supplémentaires d’Elegant themes. En outre, lorsque vous achetez Divi, vous pouvez également obtenir l’accès aux plugins de partage social Monarch. Par ailleurs, Divi Page builder propose une garantie de remboursement de 30 jours. Pour profiter pleinement des avantages de Divi, il est préférable de passer par une agence spécialisée.

Quels sont les avantages de Divi ?

Voici les différents avantages de Divi :

• constructeur frontal et dorsal ;
• constructeur frontal en direct ;
• expérience utilisateur cohérente ;
• personnalisateur de thème robuste ;
• en-têtes verticaux et horizontaux ;
• personnalisable avec CSS ;
• contrôles de gouttière ;
• colonnes et mises en page multiples ;
• enregistrez tout ce que vous voulez dans la bibliothèque ;
• éléments globaux ;
• éditeur de rôles ;
• packs de mise en page hebdomadaires gratuits ;
• traduit avec support RTL ;
• éditeur de code ;
• tutoriels vidéo intégrés ;
• certifié par Sucuri ;
• extensible avec des plugins ;
• convivialité pour les développeurs ;
• support pour les tiers ;
• communauté en ligne massive ;
• support Premium.

Quels sont les inconvénients de Divi ?

• Quelques conflits avec le constructeur visuel ;
• Pas d’option WYSIWYG pour le backend ;
• Le constructeur multiple peut prêter à confusion ;
• Impossible de transformer les blocs ;
• Pas d’aperçu de la bibliothèque ;
• Pas de prise en charge des types de messages personnalisés ;
• Pas de contour de document ;
• Contenu stocké dans les shortcodes ;
• Pas de version gratuite.

Qu’est-ce que Gutenberg ?

En 2018, WordPress a publié l’éditeur de blocs WP, également connu sous le nom de Gutenberg qui est une nouvelle façon de construire et de concevoir des pages Web qui a remplacé son ancien éditeur TinyMCE (ou éditeur classique).

Avant 2018, les concepteurs et développeurs web avaient quelques choix : utiliser l’éditeur classique TinyMCE pour construire un site avec un thème préfabriqué ou personnalisé. Cela obligeait les concepteurs à créer chaque mise en page individuelle en une seule fois. Ce n’était pas exactement le choix le plus efficace. En outre, il était très facile de se retrouver avec un backend rigide et difficile à mettre à jour.

Avec la sortie de WordPress 5.0, les concepteurs et les développeurs ont reçu une toute nouvelle option : l’éditeur de blocs. Connu à l’origine sous le nom de Gutenberg, l’éditeur de blocs est une solution adaptée aux entreprises pour ceux qui souhaitent utiliser les outils natifs de WordPress plutôt que les constructeurs de pages.

Gutenberg est donc un nouvel éditeur pour WordPress qui vous permet de construire du contenu avec des blocs qui sera stylisé sur le front-end en fonction de votre thème. Les blocs peuvent être ajoutés, modifiés, copiés, supprimés, déplacés, partagés et personnalisés. Les blocs comprennent des éléments communs, des éléments de mise en page, des mises en forme, des embeds et des éléments partagés. Chacun des blocs révèle ses outils d’édition au survol. Lorsque vous sélectionnez les blocs de contenu, leurs options d’édition apparaissent sur le côté droit de l’écran.

Gutenberg est conçu pour être extensible. La première phase se concentre sur la zone de contenu. Une phase future de Gutenberg s’étendra pour personnaliser l’ensemble du site web. Il est rapide et utilise l’API Rest. Les développeurs peuvent créer des blocs premium qui sont supérieurs aux shortcodes et aux widgets. Lors de la création de pages ou de posts, vous pouvez choisir d’utiliser soit Gutenberg, soit l’éditeur classique.

En général, Gutenberg a un design et des éléments propres et minimaux. Par exemple, les paramètres et les blocs de documents sont facilement accessibles. WordPress a fait un pas en avant en matière de fonctionnalités ainsi que de gestion de contenu. Il vous donne la possibilité de créer un contenu impressionnant avec une grande variété de mises en page et de fonctions.

Quels sont les avantages de Gutenberg ?

Les avantages de Gutenberg sont les suivants :

• design moderne ;
• blocs de transformation ;
• rest API ;
• rétrocompatible ;
• priorité au contenu ;
• WYSIWYG pour la zone de contenu ;
• personnalisations en direct ;
• support des blocs personnalisés ;
• recherche de blocs ;
• normes de codage modernes ;
• expérience utilisateur cohérente ;
• bloc de code court ;
• prise en charge des types d’articles personnalisés ;
• opt-out pour les types d’articles personnalisés ;
• prise en charge de l’éditeur classique ;
• adapté aux mobiles ;
• option de fermeture du menu ;
• éditeur de code ;
• plan du document ;
• visualisation des embeds en direct ;
•  

Les caractéristiques principales de Gutenberg

L’éditeur de blocs a été construit avec un large éventail de fonctionnalités, notamment : 

• vous permettre de créer une page, un post et des types de contenu personnalisés en utilisant un éditeur de type glisser-déposer ;
• vous fournir plus de 25 blocs pour générer un contenu riche comprenant de nombreux éléments essentiels tels que le texte, les images, l’audio ainsi que d’autres options avancées comme les tableaux et les boutons ;
• vous pouvez personnaliser quelques options pour chaque bloc et certains paramètres pour l’ensemble du document ;
• réorganiser librement les blocs et ajouter ou en supprimer autant que vous le souhaitez ;
• vous donner la possibilité de créer une mise en page multi-colonnes très basique.

Qu’est-ce qui fait la particularité de Gutenberg ?

L’éditeur de blocs facilite l’assemblage et la personnalisation du contenu. Dès lors que vous avez construit votre bibliothèque de blocs, vous pouvez créer des modèles pour différents types de pages. Pour remplir votre site, il suffit de choisir un modèle pour chaque page, d’insérer le contenu et de cliquer sur « Publier ».

• Il est facile de mettre à jour ou d’ajouter des pages, ce qui permet d’optimiser la rentabilité des investissements marketing des clients;
• La création d’un site web efficace n’est que la moitié de la bataille ;
• Les temps de chargement des pages sont plus rapides ;
• La construction en mode natif permet d’alléger le code, ce qui se traduit par des temps de chargement des pages plus rapides et, en fin de compte, par des scores de référencement plus élevés ;
• Elle réduit la « dette technique » en simplifiant le dépannage et le débogage.

La dette technique est un phénomène qui se produit lorsqu’une équipe est confrontée à un délai ; elle réalise donc un projet au mieux de ses capacités et prévoit de « rembourser la dette » en corrigeant les problèmes plus tard. L’utilisation de l’éditeur de blocs WP au lieu d’un constructeur de pages élimine un « point d’échec » potentiel, ce qui réduit la dette technique.

• Il élimine le temps que les développeurs consacrent aux tâches de base, comme l’intégration de vidéos et de tweets ;
• Les outils natifs disponibles dans l’éditeur de blocs vous permettent de faire glisser et de déposer les éléments intégrés, et simplifient d’autres éléments de base qui nécessitaient auparavant le temps et l’expertise d’un développeur.

Quelles sont les limites de Gutenberg ?

Gutenberg présente certaines limites dont notamment :

• toujours en version bêta ;
• backend seulement ;
• manque de formation ;
• manque de soutien communautaire ;
• manque de support pour les tiers ;
• support limité des méta-boîtes ;
• colonnes confuses ;
• pas de contrôle des gouttières.

Quel est le meilleur constructeur de pages pour améliorer votre référencement naturel ?

Le référencement naturel ou optimisation des moteurs de recherche (SEO) est un facteur essentiel qui permet à votre site Web d’être bien classé sur les différents moteurs de recherche. Cela permet à votre marque de se développer, car un classement élevé dans les moteurs de recherche expose davantage de personnes à vos produits et services uniques.

Le choix d’un constructeur de pages peut influencer négativement ou positivement votre référencement naturel.

Même si Gutenberg et Divi peuvent sembler similaires en termes de ce qu’ils peuvent vous offrir, ils affectent tous deux la santé de votre site Web de différentes manières. Pour être bien classées dans les moteurs de recherche, la qualité, la santé et l’utilité perçues de votre site Web doivent être élevées.

Vitesse du site Web

Divi est très performant en ce qui concerne les caractéristiques et les fonctionnalités qu’il offre à ses clients. Bien que cela ne soit pas une mauvaise chose pour la conception d’un beau site Web, toutes ces caractéristiques et fonctionnalités peuvent avoir tendance à ralentir un site Web.

Cela a un effet direct sur le temps de chargement d’une page Web, ce qui affecte votre référencement. Au lieu de se charger en 1 à 2 secondes, les pages peuvent prendre 5 à 10 secondes, ce qui a un impact négatif sur l’expérience utilisateur. Google récompense automatiquement les sites Web qui ont un temps de chargement rapide par un meilleur classement.

La taille de la base de code de Divi est généralement beaucoup plus grande que celle de tout autre thème léger bien codé, car le constructeur de pages doit charger beaucoup de code redondant pour des fonctionnalités que vous n’utiliserez probablement pas.

Gutenberg, en revanche, n’offre pas autant de fonctionnalités, mais compense en étant compatible avec une gamme de plugins qui peuvent vous aider à construire le site web de vos rêves. Cela signifie que le temps de chargement d’un site Web Gutenberg devrait être plus rapide que n’importe quel thème WordPress polyvalent, ce qui améliore votre classement SEO.

Shortcode ou codes courts

Au fur et à mesure que votre site Web progresse et que votre présence en ligne se développe, vous voudrez peut-être un jour changer de plateforme en ce qui concerne votre système de gestion de contenu. Et bien, en utilisant Divi, cela pourrait s’avérer un peu complexe.

Les thèmes WordPress multi-usages utilisent généralement des shortcodes dans leur code d’arrière-plan pour vous donner la mise en page et les fonctionnalités que vous souhaitez. Les shortcodes ne sont pas visibles pour l’utilisateur. Mais, ces codes sont la colle invisible qui maintient votre site Web.

Il est non seulement très difficile de passer à un autre CMS lorsque le thème de votre site Web intègre des codes courts, mais cela peut également ralentir votre site Web. Les shortcodes peuvent également causer des dysfonctionnements lorsque les plugins qui leur sont liés sont désactivés.

Cependant, lorsqu’il s’agit d’utiliser l’éditeur de blocs Gutenberg, aucun shortcode n’est nécessaire. Les blocs de contenu sont en pur HTML/CSS.
De nombreux plugins et thèmes de construction de pages, comme Divi, sont non sémantiques et nécessitent plus de requêtes de serveur pour se déployer correctement. L’éditeur de blocs Gutenberg est plus favorable au référencement dès le départ.

Caractéristiques et fonctionnalités

Divi offre des tonnes de caractéristiques et de fonctionnalités, ce qui a souvent été jugé comme un peu excessif. En effet, de nombreux propriétaires de sites Web n’utilisent même pas une fraction d’entre elles.

Cependant, étant donné que vous êtes lié à l’implémentation particulière de Divi pour toutes ses fonctionnalités, vous devrez peut-être installer des plugins supplémentaires pour atteindre vos objectifs de création de sites Web. Non seulement cela pourrait conduire à un risque accru d’incompatibilité des plugins, mais cela ralentit également votre site Web.

Avec Gutenberg, cela ne constitue pas un frein. Vous pouvez déterminer les caractéristiques et les fonctionnalités que vous voulez en installant uniquement les plugins dont vous avez vraiment besoin. Cela signifie que vous pouvez déterminer activement la vitesse de votre site Web. En tant que tel, vous avez plus de contrôle sur votre classement SEO global et les performances de votre site Web.

Que retenir de Divi et de Gutenberg ?

Alors que les deux ont des blocs que vous pouvez placer sur l’écran, l’interface de Divi est plus intuitive. Gutenberg semble être conçu pour ceux qui ont l’habitude de créer du contenu avec des plateformes telles que Medium, Wix ou Squarespace. Divi est le meilleur choix pour la conception de la mise en page. Il est plus facile de comprendre les colonnes et les lignes et vous avez un contrôle facile sur le rembourrage pour chaque élément.

Bien que Gutenberg soit un éditeur intéressant, il ne remplacera pas Divi. Divi fonctionnera toujours avec WordPress, comme c’est le cas actuellement. Vous aurez le choix de l’éditeur à utiliser. Même si cette fonctionnalité est supprimée, les développeurs tiers tels qu’Elegant Themes auront la possibilité de remplacer Gutenberg à partir de leurs thèmes ou plugins.

Une fois que Gutenberg sera devenu l’éditeur par défaut, Divi fonctionnera toujours avec WordPress, donc tout ce que vous avez créé avec Divi se chargera normalement. Les utilisateurs de Divi auront plusieurs options pour créer du contenu, tout comme ils le font maintenant. Ils peuvent construire leurs articles en utilisant Gutenberg, l’éditeur classique, ou le Divi Builder.

Si vous voulez un outil gratuit avec beaucoup de fonctionnalités de conception utiles, vous pouvez commencer avec Gutenberg. Mais pour des ambitions plus grandes, il faudra vous tourner vers Divi qui offre une version plus complète.