Depuis la mise à jour de WordPress vers sa version 5+, l’outil d’édition de pages et d’articles a profondément changé.

C’était un pari audacieux de la part de WordPress : abandonner l’éditeur très simple et intuitif qui a contribué à leur succès… au profit de Gutenberg, un outil d’édition par blocs, plus complexe dans son approche, mais en théorie plus puissant.

Gutenberg est conçu comme un outil plus graphique et visuel que l’ancien. Son principe d’édition par blocs suscite forcément la comparaison avec les autres éditeurs de ce type.

Je parle bien sûr des page builders Divi et Elementor qui, chacun dans leur style, proposent une approche similaire depuis déjà un bon moment.

Gutenberg présente l’avantage d’être intégré par défaut dans WordPress… Mais il est vivement critiqué sur de nombreux points ! Ses concurrents font-ils mieux pour autant ? Est-ce que cela vaut la peine de remplacer Gutenberg par l’un d’eux ? Et si oui… lequel ?

Dans cet article, nous allons donc comparer le nouvel éditeur par blocs Gutenberg avec Elementor et Divi. Cela devrait vous aider à faire votre choix !

Spoiler : Gutenberg est une option correcte pour disposer vos contenus de manière basique. Vous préférerez Elementor ou Divi si vous voulez vous démarquer par un style et un design plus aboutis et plus originaux.

1. Présentation rapide de chaque outil

Pour commencer, je vais vous présenter brièvement chaque outil.

En effet, tout le monde ne passe pas son temps à suivre l’actualité de WordPress et de ses plugins… Il est donc normal de ne pas tous les connaître !

1.1 Brève introduction à Gutenberg

Pour sa version 5.0, WordPress a donc remplacé son éditeur classique, simple et intuitif, par un nouvel éditeur de blocs, baptisé Gutenberg.

L’ancien éditeur WordPress ressemblait à un simple traitement de texte. Gutenberg, quant à lui, permet de créer des blocs de contenu (texte, images, vidéos, etc.) et de les disposer les uns par rapport aux autres.

Bien que ce nouvel éditeur de blocs offre plein de nouvelles possibilités, il ne s’agit pas encore d’un véritable page builder. Nous allons voir pourquoi en détail lors de la comparaison avec Elementor et Divi.

Mais avant de passer à ce comparatif, nous allons présenter brièvement ces deux page builders. Commençons par Elementor.

1.2 Brève introduction à Elementor

Le plugin Elementor offre une grande variété d’éléments et de templates que vous pouvez utiliser pour disposer vos contenus et construire vos pages.

La version gratuite vous offre déjà de nombreuses options de design pour créer des pages et des articles dynamiques. L’utilisation des différents modules proposés et du glisser-déposer y est assez intuitive – une fois qu’on a compris la logique de base, tout devient facile.

Avec la version premium d’Elementor (Elementor Pro), vous allez avoir accès à des modules supplémentaires et pouvoir utiliser le constructeur de thèmes. Celui-ci vous permettra de personnaliser facilement et visuellement à peu près tous les détails de votre site.

1.3 Brève introduction à Divi

Divi est un thème WordPress conçu par Elegant Themes. Il a conquis un grand nombre de designers, notamment grâce au Page Builder qu’il embarque, le Divi Builder. Divi Builder peut être utilisé indépendamment du thème Divi.

Avec Divi, vous aurez aussi accès à :

• une large variété d’éléments de design,
• un grand nombre d’options de personnalisation,
• la possibilité de créer à peu près n’importe quel design

Hélas, il n’existe pas de version gratuite pour Divi. Le thème Divi et le plugin Divi Builder sont disponibles via un abonnement au site Elegant Themes.

2. Comparaison des fonctionnalités

À présent, entrons un peu dans le détail et faisons le tour des fonctionnalités de chaque outil.

2.1 Fonctionnalités de Gutenberg

Voilà ce que vous pouvez faire avec l’éditeur de blocs Gutenberg :

• Créer des pages, des articles et des CPT (custom post types) en utilisant un éditeur drag-and-drop
• Utiliser plus de 25 blocs pour créer du contenu, des plus classiques (texte, image, vidéo) aux options plus avancées comme les galeries, listes, boutons, widgets.
• Personnaliser quelques options sur chaque bloc, ainsi que quelques paramètres sur l’ensemble du document
• Ajouter, supprimer ou réagencer les blocs par drag-and-drop (glisser-déposer)
• Créer une disposition multi-colonnes basique (qu’il est possible de faire varier le long de la page ou de l’article)

Dans l’ensemble, l’éditeur de blocs Gutenberg fournit un bon système de glisser-déposer. Toutefois, ces fonctionnalités sont déjà fournies de manière standard dans tous les page builders. Gutenberg ne se démarque donc pas particulièrement.

2.2 Fonctionnalités d’Elementor

Avec Elementor, vous avez notamment accès à :

• Environ 30 modules différents (dans Elementor, les blocs sont appelés « modules »)
• Une bibliothèque de modèles de pages et de sections que vous pouvez utiliser pour gagner du temps et adopter directement une présentation dynamique et efficace
• Une option pour créer des dispositions complexes avec des colonnes multiples
• Beaucoup plus de contrôle sur l’espacement, comme les marges internes et externes (padding et margin)
• Plus d’options de style pour chaque widget et section
• Plus de fonctionnalités avancées comme les cartes, carrousels et tabs en accordéon (la version premium propose également forums, sliders, listes de prix et plus encore)
• Sauvegarder vos designs pour les réutiliser facilement plus tard
• La possibilité de personnaliser votre header et votre footer, ainsi que d’autres parties de votre site avec la version premium

2.3 Fonctionnalités de Divi

Et qu’en est-il de Divi ? Avec ce page builder, vous pouvez :

• Utiliser plus de 45 modules personnalisables (modules est aussi le nom donné aux blocs par Divi) pour organiser votre contenu
• Choisir des fonctionnalités avancées comme des portfolios, témoignages, cartes, forums, compteurs, etc.
• Créer des dispositions complexes avec des colonnes multiples
• Ajouter des marges internes et externes personnalisées pour contrôler l’espacement entre les blocs
• Sauvegarder vos designs pour les réutiliser facilement plus tard
• Utiliser des contrôles de style pour changer l’apparence de vos modules

2.4 Le point sur les fonctionnalités

Comme vous le voyez, Divi et Elementor se démarquent surtout de Gutenberg par les choix supplémentaires qu’ils offrent, tant sur les types de blocs, leur disposition et leur paramétrage.

Gutenberg suffit amplement pour les dispositions et les styles de base. Mais si vous voulez faire des designs plus élaborés, qui vous aident à vous démarquer et à faire le bonheur de vos visiteurs, vous serez davantage satisfaite avec Elementor ou Divi.

3. Comparaison de l’expérience utilisateur

Point suivant qui mérite qu’on s’y attarde : comment s’opère la prise en main des trois outils ? Est-elle facile et intuitive, ou au contraire complexe et rébarbative ?

3.1 Prise en main de Gutenberg

Si vous n’avez pas installé Elementor ou Divi, vous arriverez automatiquement sur l’interface de Gutenberg à la création d’un nouvel article ou d’une nouvelle page. Voici à quoi ressemble cette interface :

Un peu lourd à première vue, si on cherche juste un éditeur « basique ». Mais l’interface devient simple et nette si vous appliquez cette astuce :

Quand j’utilise Gutenberg, j’aime bien cacher les réglages (clic sur l’engrenage en haut à droite) pendant la phase de rédaction. Cela me permet de vraiment retrouver cette impression de simplicité, qui me manquait après l’abandon de l’éditeur classique.

Si besoin, je réactive les réglages à la fin pour finaliser la mise en page et la disposition de mes blocs.

Je peux bien l’avouer : j’ai eu beaucoup de mal avec Gutenberg au début. Je trouvais que la grande force de WordPress était son éditeur très basique et facile à prendre en main.

Alors autant le dire tout de suite, j’ai été très perplexe dans un premier temps.

Les changements sont énormes par rapport à l’éditeur classique, et j’avoue que je n’ai pas adhéré tout de suite à Gutenberg. Je le trouvais trop complexe à première vue pour devenir l’éditeur par défaut du CMS WordPress. Et pas suffisamment abouti pour rivaliser avec ses concurrents.

Mais il y a une raison à cela : on change complètement de philosophie.

L’éditeur classique était un simple traitement de texte. Gutenberg passe à la vitesse supérieure et vous permet de réaliser des mises en page plus dynamiques et plus élaborées.

Les tendances évoluent, les designs web deviennent plus complexes pour mieux capter l’attention. Et WordPress se devait d’aller dans ce sens tôt ou tard !

Ensuite, il faut reconnaître que sous une apparence un peu complexe (pour un éditeur censé être basique), Gutenberg est en réalité assez rapide à prendre en main.

Dans l’ensemble, l’interface pourrait être plus intuitive, mais passé le premier choc, on s’y fait vite et l’impression de complexité disparaît. À ce sujet, l’astuce de cacher les réglages pendant la rédaction aide beaucoup !

3.2 Prise en main d’Elementor

Elementor fournit une interface totalement différente. Sur la droite, vous avez un aperçu en direct de votre site et, sur la gauche, une barre latérale dans laquelle vous trouvez l’ensemble des modules disponibles :

Pour ajouter du contenu, il vous suffit de glisser-déposer un widget depuis la sidebar vers le design interactif :

Les options de personnalisation des éléments apparaissent dans la sidebar. Vous pouvez aussi sélectionner les éléments eux-mêmes pour les dupliquer, les supprimer, des déplacer, etc.

Avec Elementor, on est à la fois sur une interface plus poussée, plus visuelle et plus intuitive que Gutenberg.

Il y a une petite logique à comprendre (l’emboîtement des blocs par exemple), mais c’est rapide à prendre en main et les possibilités sont beaucoup plus grandes qu’avec Gutenberg.

3.3 Prise en main de Divi

La particularité de Divi est qu’il propose deux approches différentes pour intégrer vos designs. Tout d’abord, vous pouvez utiliser ce builder abstrait dans lequel votre contenu est représenté par des blocs génériques.

Ou vous pouvez ouvrir le builder visuel, qui vous permet de construire votre design dans la preview live, comme avec Elementor. Mais plutôt qu’une sidebar fixe, vous ajouterez vos modules depuis une série de pop-ups.

Peu importe quelle interface vous choisissez (abstraite ou preview), vous pourrez éditer vos modules et vos sections grâce aux interfaces pop-up.

3.4 Petit bilan sur l’interface et la prise en main

Globalement, Gutenberg reste quand même l’interface la plus simple. Mais je trouve l’interface d’Elementor beaucoup plus intuitive et celle de Divi beaucoup plus flexible.

Divi, Elementor ou Gutenberg ?… Le verdict !

Maintenant, la question que vous attendiez toutes : quel éditeur devriez-vous utiliser ?

Eh bien, cela va quand même pas mal dépendre de votre cas de figure.

Si vous utilisez déjà Divi ou Elementor sur votre site, alors je ne vous conseille pas de passer à Gutenberg ! Le temps d’adaptation serait dépensé en pure perte, puisque la version actuelle de Gutenberg est beaucoup plus limitée dans ses possibilité que les deux page builders.

En revanche, si vous n’avez jamais utilisé de page builder auparavant, Gutenberg est un bon moyen de découvrir les grands principes.

Il est simple à utiliser et vous aidera à savoir si vous appréciez le système du glisser-déposer pour créer du contenu.

Puis, si vous aimez ce principe et que vous recherchez davantage de possibilités et de flexibilité, afin de créer des pages plus belles et plus efficaces, alors vous pouvez essayer Elementor ou Divi.

Elementor présente deux avantages essentiels :

• vous pouvez l’utiliser dans sa version gratuite, qui offre déjà plus de possibilités que Gutenberg
• son interface est à mon sens la plus intuitive et la plus « user-friendly » des trois éditeurs
• il ne génère aucun shortcode : si vous désactivez le plugin pour une raison x ou y, votre contenu reste propre

Quant à Divi, il va encore un peu plus loin dans les options de design qu’Elementor. À vous de voir si ces menues différences en valent la peine – pour ma part je préfère opter carrément pour Elementor Pro si besoin.

Souvenez-vous également que vous n’êtes pas forcée d’en choisir un seul !

J’utilise Gutenberg comme éditeur habituel pour mes articles. La plupart du temps, je ne cherche pas à faire des mises en pages trop élaborée pour de simples articles.

Mais quand je développe un site pour une cliente et qu’elle doit pouvoir intervenir sur le contenu du site, je prends l’option Elementor Pro. C’est un outil visuel très performant, qui permet d’aller très loin dans vos mises en pages, facilement et sans avoir besoin de coder !

 

Article librement inspiré et traduit de celui-ci.