GUTENBERG OU PAGE BUILDERS ?

J’ai décidé d’écrire cet article car la question s’est imposée à moi avec l’arrivée du nouvel éditeur de WordPress: Gutenberg. Choisir entre Gutenberg ou Page Builders peut s’avérer difficile. Les deux ont leurs avantages et inconvénients. Je vais donc vous aider dans votre choix.

Est-ce que Gutenberg va remplacer les Page Builders ?

WordPress a pris un virage avec son nouvel éditeur et a complètement changé la manière d’éditer du contenu.

Ce nouvel éditeur est beaucoup plus avancé et de nombreuses fonctionnalités sont ajoutées régulièrement.

Mais est-ce que cela veut dire que les Page Builders vont perdre en influence et que tout le monde va se mettre à utiliser Gutenberg ?

On va pour cela rentrer dans les détails et couvrir les spécificités de Gutenberg et des Page Builders avec les avantages et les inconvénients de chacun. A la fin de cet article, vous connaitrez les plus grosses différences qui vous permettront de vous tourner vers la solution la plus adaptée à votre projet.

Faisons un rapide tour d’horizon de Gutenberg et voyons les différences avec l’ancien éditeur de WordPress:

Gutenberg a été introduit avec la version de WordPress 5.0. Précédemment, L’éditeur de WordPress était appelé « l’éditeur classique ». C’était un éditeur simple avec une zone de texte ou nous pouvions ajouter du contenu (texte, images, médias…).

le TinyMCE était très limité en terme de design et ne permettait pas de travailler le design de ses pages et articles.

Gutenberg quant à lui fonctionne de manière très différente de l’éditeur classique. Au lieu d’utiliser q’une seule zone de texte, WordPress permet d’ajouter des blocs, ce qui est tout nouveau.

Maintenant tout ce que vous ajoutez en éléments dans votre article que ce soit une image, une vidéo, du texte ou un bouton, il s’ajoute comme un bloc.

Regardons ensemble la différence avec un page builder:

les Page Builders sont des extensions de WordPress qui permettent d’éditer et construire des pages dynamiques grâce à du drag-and-drop (glisser-déposer).

Ils permettant de créer son propre style et sa propre mise en page. Les pages builders ont été créé à la base pour les utilisateurs qui souhaitaient créer du contenu facilement et de le customiser de la façon dont il souhaitait.

Aujourd’hui, ils permettent de designer tout un site sans devoir écrire une ligne de code. Vous pouvez designer votre page en commençant de zéro. Les widgets proposés ou éléments vous aident notamment à mettre les choses en place très simplement.

Aujourd’hui, il y a une multitude de super Page Builders comme Elementor, Divi Builder, Thrive Architect, et plus.

Gutenberg VS Page Builders: les Principales Différences

Maitenant que nous savons comment Gutenberg et un page builder fonctionnent, nous pouvons constater que les deux sont assez proches.

Cependant, il y a quelques grosses différences entre Gutenberg et un Page Builder qui auront un impact important sur la construction de votre site.

L’édition du Back-office et du Front-office

La plus grosse différence entre Gutenberg et un Page Builders réside dans l’édition du Back-office et du Front-office.

Chez Gutenberg, le front-office se travail directement du back-office de WordPress et vous devez à chaque fois cliquer sur « prévisualiser » pour voir le résultat des dernières modifications du design.

De leur côté, les Page builders disposent de l’édition d’un front-office depuis un moment.

L’intérêt d’un front-office est que vous voyez en direct les changements que vous faites. Par exemple dans Elementor, vous voyez de manière instantanée tous les changement que vous faites sur la page.

Les caractéristiques du Drag & Drop (glisser et déposer)

Le drag and drop (glisser et déposer) où vous souhaitez sur la page rend le processus de création simple et intuitif.

Gutenberg et les Page Builders ont les fonctionalités du drag and drop.

Dans Gutenberg, vous pouvez ajouter des blocs et les déposer où vous le souhaitez sur la page.

C’est la même chose pour les Page Builders ou vous pouvez ajouter des widgets/éléments juste en les prenant et déposant.

Cependant, l’outil de drag and drop (glisser/déposer) des pages builders est plus évolué que Gutenberg.

Gutenberg permet seulement de glisser et déposer des blocs à différents endroits alors que les Pages builders vous permettent de redimensionner les éléments, ajuster leur largeur/hauteur, ou bien même créer des mise en pages plus élaborées

Les options de styles

C’est ici que Gutenberg a le plus de lacunes comparé aux Page Builders.

WordPress fournit de nombreux types de blocs, des styles et des options de custimisations. En revanche, elles ne sont pas aussi complètes que les Pages Builders.

Avec un Page Builder, vous pouvez customiser un widget, la colonne, la page entière, ce qui ne se limite pas à changer une couleur ou ajouter une ombre, etc.

Les Page Builders offrent une série d’options qui vous donnent beaucoup de contrôle sur le design de votre page.

Vous pouvez notamment changer la couleur de fonds, utiliser des dégradés de couleurs, choisir un type d’icône, une police de caractère, et plus.

Les fonctionnalité de mise en page

Quand vous créez un article/page avec Gutenberg, vous êtes limité par la disposition du thème.

Dans Gutenberg, vous pouvez customiser tout le contenu que vous voulez. Seulement, la disposition de base de la page reste la même. Quand je parle de la disposition de la page, il s’agit de l’entête, le pied de page, la barre latérale et l’aspect général de la page.

Ce n’est pas le cas avec les Page Builders. Vous pouvez changer la disposition de la page du thème et ainsi créer des pages uniques et créatives. Par exemple, vous pouvez créer votre propre header, footer et mise en page du contenu avec les Pages Builders.
Ils offrent bien plus de flexibilité permettant de construire des pages en gardant un maximum de contrôle.

Gutenberg quand à lui offre la possibilité de changer le style et customiser seulement ses propres blocs. Vous pouvez par exemple faire des blocs en pleine largeur, ajouter des colonnes, etc.

En revanche, vous ne pouvez pas apporter des changements importants à la mise en page comme sur un Page Builder.

Les styles compatibles dans la thème

Comme nous avons pu l’évoquer, Gutenberg utilise les styles du thème mais ne les remplace pas. Avec du CSS personnalisé, vous pouvez customiser vos blocs mais l’aspect général de la page reste le même.

A contrario, avec les Pages Builders, vous pouvez créer une mise en pages qui n’est dépendante du thème.

Par exemple, dans Elementor, vous pouvez passez outre le page et le design du thème et le designer de la manière dont vous souhaitez.

Les Widgets et les blocs

Tous les blocs de Gutenberg vous permettent de créer du contenu facilement. Ces blocs peuvent même être utilisé sur d’autres sites web.

Avec le lancement de Gutenberg, beaucoup de développeurs ont commencé à créer leur propres blocs donnant naissance à des blocs Gutenberg de grande qualité.

De manière un peu identique, les Page Builders ont aussi leurs lots de Widgets. Ces derniers sont bien plus avancés et basés sur le page builder que vous avez installé.

Beaucoup de Page Builders populaires permettent aux développeurs de créer leur propre widget à travers des plugins et add-ons (modules).

Les Add-ons (modules complémentaires)

Que ce soit Gutenberg ou les Pages Builders chacun ont de très bons plugins ou add-ons.

Avec Gutemberg, beaucoup de dévelopeurs construisent des supers blocs et les mettent à diposition en plugin, comme l’extension Advanced Gutenberg Blocks.

De leur côté, les Page Builders ont leur propre API permettant aux développeurs de proposer des modules complémentaires.

Vous devez surement les connaître, les Page Builders avec le plus d’add-ons (modules) sont Elementor et Divi.

D’autres Page builders ont aussi pas mal d’add-ons mais cela dépend en grande partie de la popularité du Page builder.

Plus un Page builder est populaire, plus sa communauté de développeurs sera importante et plus il disposera d’add-ons( modules).

Le temps de chargement des Page Builder et Gutenberg

J’ai mené un test pour comparer l’éditeur Gutenberg avec les Page Builders en terme de performance de chargement et de consommation de ressources.

J’ai fait le test sur la page par défaut qui est proposée lors de l’installation de WordPress. J’ai édité la page avec plusieurs Page Builders sans rien ajouté et supprimé. Le but était de chargé les ressources de base de chaque Page Builders. Voici le résultat.

Page BuilderRequêtesPoids total de page(KB)Temps de chargement (s)JSCSSFonts
Gutenberg824.90.9240
Elementor262411.412102
Divi Theme183611.5654
Divi Plugin152031.2670

Comme vous pouvez le constater Gutenberg remporte le test avec seulement 8 requêtes, 24,9 KB sur le poids de la page et 0,9 secondes sur le temps de chargement. Les Page Builders Divi et Elementor sont bien au-dessus de Gutenberg en terme de poids de page et temps de chargement.

Est-ce Gutenberg va remplacer les Page Builders ?

Actuellement Gutenberg n’a pas vocation à remplacer les Pages Builders.

La flexibilité des Pages Builders et les fonctionalités qu’ils fournissent vous laissent la possibilité de faire presque ce que vous voulez sur votre site internet.

Gutenberg en est encore à ses débuts. Si vous regardez la Gutenberg roadmap, il semble que WordPress souhaite vraiment que son nouvel éditeur devienne plus puissant. En revanche, il n’est pas prêt à remplacer les pages builders tout de suite.

Pour résumer, Gutenberg et les Pages Builders on chacun leurs atouts. Gutenberg rend plus facile la création de contenu à valeur ajouté alors que les Pages Builders rendent le design bien plus simple à réaliser.

lequel choisir au final ? (Gutenberg ou un Page Builder)

Cela va vraiement dépendre de ce que vous souhatez faire.

Si votre but est de créer du contenu à valeur ajouté, attrayant et avoir un site performant sur le temps de chargement, Gutenberg est certainement le bon choix pour vous.

Toutefois, si vous souhaitez créer une Landing page ou customiser votre page d’accueil, les Page builders seront plus appropriés.

Les deux sont finalement complémentaires pour un site WordPress.

Quel est le meilleur Page Builder à utiliser avec Gutenberg ?

Si vous comptez utiliser un Page Builder avec Gutenberg, voilà les points importants:

  • Un page builder qui fonctionne parfaitement avec Gutenberg
  • Un page builder avec une communauté active de développeurs qui créent des extensions
  • Un page builder qui est mis à jour régulièrement

Le page builder qui actuellement répond le mieux à ces critères est Elementor.

Je vous le recommande car Elementor dispose d’une interface simple à prendre en main et qui permet de construire des pages rapidement.

L’atout de ce plugin est que vous pouvez ajouter des blocs/templates Elementor dans votre éditeur Gutenberg.

Avec ce plugin, vous pouvez créer des designs de haute qualité sur vos pages/articles. Il y a à votre disposition plus de 300 blocs/pages avec des designs prédéfinis.

Conclusion

J’espère que maintenant, vous avez les clés pour faire votre choix.

Si vous avez des question ou des difficultés encore pour choisir entre Guttenberg et un Page builder, n’hésitez pas à laisser un commentaire, je me ferai une joie de vous aider.

Si vous avez besoin de quelqu’un pour construire votre site, je suis moi-même développeur WordPress donc je peux vous accompagner dans cette tâche.

Parlez-moi de votre projet

A propos d'Alexis

Dans le web depuis plus 5 ans, je me suis d'abord spécialisé en webmarketing pour ensuite m'investir dans la création de sites web vitrine, sites/boutiques e-commerce et applications web/plateforme web. J'ai ainsi la double compétence qui me permet d'être force de proposition pour la création de votre site marchand et la mise en place de votre stratégie de vente en ligne.

Laisser un commentaire