Drupal Layout Builder et Gutenberg : 2 outils à votre service

Drupal Layout Builder et Gutenberg sont des outils de création de pages qui permettent aux utilisateurs de concevoir des mises en page complexes sans avoir à écrire une seule ligne de code.

Drupal Layout Builder est une fonctionnalité intégrée qui offre une expérience de drag and drop (“glisser-déposer”) pour la conception de pages. Gutenberg, lui, est le plugin équivalent sur WordPress mais que l’on peut également trouver chez Drupal.

Qu’est-ce qu’un Page Builder ?

Il s’agit d’une interface qui s’ajoute à l’outil et qui permet de créer des mises en page de site web en utilisant une interface graphique intuitive, et sans avoir besoin de savoir développer.

Ils fonctionnent avec différents composants lesquels peuvent inclure des blocs fonctionnant sur le principe du glisser-déposer, des éditeurs de texte WYSIWYG (“what you see is what you get”) et des options de personnalisation de style.

Avec ces outils, les utilisateurs peuvent facilement ajouter et organiser des éléments de contenu, des images, des vidéos, des formulaires et des boutons, et prévisualiser instantanément le résultat final de leur création. 

L’évolution de Drupal Layout Builder

Cette solution a été conçue pour être facile à utiliser, même pour les débutants. Il intègre une interface visuelle intuitive pour la création, la personnalisation et l’édition de pages, de blocs et de contenus.

Les utilisateurs avancés qui maîtrisent les bases du code (html, css…) peuvent également l’utiliser pour créer des mises en page complexes, en exploitant les nombreuses fonctionnalités de personnalisation qu’il offre. Drupal Layout Builder, leur permet alors de gagner un temps considérable dans la construction d’un site Internet.

Gutenberg, un outil efficace proposé par WordPress

Gutenberg est un outil de construction WordPress (qui est également un CMS), très similaire à Drupal Layout Builder. Il a été lancé en 2018, et permet aux utilisateurs de créer des pages personnalisées en utilisant un système de blocs faciles à agencer. Il est possible de disposer les différents éléments d’un site de manière visuelle, là encore, sans avoir besoin de connaissances techniques.

Il propose une bibliothèque de blocs particulièrement riche qui permet d’ajouter aisément une image, un texte ou un formulaire. 

À noter : des solutions comparables très complètes existaient déjà comme Elementor, Visual Composer ou Beaver Builder.

Elles sont d’ailleurs généralement compatibles les unes avec les autres. Si vous utilisez déjà Elementor, ce n’est donc pas un problème.  

Quels sont les prérequis pour utiliser Drupal Layout Builder et Gutenberg ?

Qu’il s’agisse de Drupal ou de WordPress, l’utilisation de Drupal Layout Builder et Gutenberg nécessite certains prérequis, rien de très compliqué comme vous allez le voir !

Comment installer et configurer Drupal Layout Builder ?

Le module est disponible dans Drupal Core depuis la version 8.5, ce qui signifie que tout ce que vous avez à faire est d’avoir réalisé une migration vers Drupal 8 ou 9, si vous utilisez une version antérieure.

Ensuite, activez son utilisation dans l’onglet “Manage Display” dans les “Settings” (il s’agit d’une simple case à cocher). Cette mystérieuse case vous permettra d’éditer immédiatement une première page. Dans ce mode, vous pouvez gérer les sections et les blocs. Vous pouvez également modifier facilement leur ordre ou les déplacer des blocs par glisser-déposer.

Comment installer et configurer Gutenberg ?

L’installation de Gutenberg n’est pas moins simple. Il est disponible sous la forme d’un plugin, il faut donc l’installer puis l’activer. Il se déploie alors dans l’interface. Vous pourrez dès lors éditer visuellement vos posts de blogs, mais également l’accueil de votre site. Les builders comme Elementor prévoient que vous puissiez basculer de l’un à l’autre sans dommage. 

Les types de contenus possibles avec Drupal Layout Builder et Gutenberg

Une fois toutes ces informations assimilées, vient le moment de la pratique. Alors, que pouvez-vous faire avec ce nouvel outil ?

Comment ajouter du textes, des images et des vidéos avec Drupal Layout Builder

Pour ajouter un texte, une image et une vidéo avec Drupal Layout Builder, il suffit de glisser-déposer les éléments depuis la barre latérale de l’interface.

Le module dispose également d’options de personnalisation avancées pour chaque élément, permettant de modifier leur taille, leur alignement, leur police, etc.

Pour ajouter des images et des vidéos, il est possible de les télécharger depuis son ordinateur ou de les intégrer à partir d’une URL externe. Il est également possible d’ajouter des champs de formulaire, des tableaux, des blocs de code, des boutons, des icônes et bien d’autres éléments.

Comment utiliser les blocs avec Gutenberg

Pour utiliser les blocs avec Gutenberg, il suffit de sélectionner l’icône de bloc dans l’éditeur et de choisir le type de bloc que vous souhaitez ajouter. Ils sont organisés en différentes catégories telles que les paragraphes, les images, les listes, les vidéos, les citations, etc.

Une fois que vous en  avez sélectionné un, vous pouvez le personnaliser en y joignant du texte, des images, des vidéos, etc. Il est également possible de modifier la structure des pages et de réorganiser les blocs en les faisant glisser et en les déposant à l’endroit souhaité.

Comment ajouter des formulaires de contact et des galeries d’images avec Drupal Layout Builder

Pour ajouter des formulaires de contact avec Drupal Layout Builder, il vous suffit d’utiliser le module Webform et d’en créer un nouveau. Ensuite, vous pouvez simplement l’intégrer à votre mise en page grâce au glisser-déposer.

Pour ajouter des galeries de photo, vous installez le module Views, qui vous permet de créer des vues personnalisées pour afficher des images dans un diaporama ou une grille. Puis, intégrez la vue à votre mise en page.

Une autre option consiste à utiliser le module Media, qui permet de gérer facilement les images et les fichiers multimédias. Vous pouvez ensuite créer une galerie d’images en ajoutant un bloc de galerie de médias à votre mise en page.

Utilisation de widgets avec Gutenberg

Gutenberg propose des widgets intégrés qui permettent d’ajouter des fonctionnalités supplémentaires à votre site WordPress.

Pour les utiliser, il suffit de cliquer sur le bouton “Ajouter un widget” dans l’éditeur de blocs.

Vous pouvez ensuite sélectionner le widget souhaité, le configurer selon vos besoins et le glisser-déposer dans l’éditeur de blocs pour l’intégrer à votre contenu.

Parmi les widgets proposés par Gutenberg, on trouve notamment des widgets de recherche, de calendrier, de catégories, de tags et de publications récentes, ainsi que des widgets personnalisés que vous pouvez créer vous-même.

Layout Paragraphs, Drupal Layout Builder et Gutenberg : comment choisir ?

Comment choisir et déterminer l’outil qui réponde le mieux à vos besoins et qui vous permettra de construire facilement votre site.

Les avantages et les inconvénients de Layout Paragraphs

Layout Paragraphs est un module Drupal qui offre une approche différente de la création de mises en page en comparaison de Drupal Layout Builder.

Contrairement à Layout Builder qui fonctionne au moyen de blocs et de régions, il utilise des paragraphes pour créer des mises en page plus flexibles et modulables.

Parmi ses avantages, on compte sa grande flexibilité et sa facilité de prise en main. Cependant, il peut nécessiter une certaine expertise pour la configuration et l’intégration, et n’intègre pas les mêmes fonctionnalités que Drupal Layout Builder ou Gutenberg. Des trois solutions, c’est sans doute celle qui nécessite le plus d’expertise technique.

Les avantages et les inconvénients de Drupal Layout Builder

Ses avantages sont nombreux, notamment pour ceux qui ne savent coder ou très peu. Il leur permet de créer des mises en page de manière intuitive et visuelle. Il permet aussi une personnalisation poussée de chaque bloc de contenu, ainsi qu’une prévisualisation en temps réel.

L’inconvénient majeur de Drupal Layout Builder est sans doute, qu’il nécessite une bonne connaissance de Drupal d’une manière générale, pour une utilisation complète et optimale. Les vrais grands débutants peuvent donc être en difficulté.

Attention : notez qu’il peut également abaisser les performances du site si les mises en page créées sont trop complexes.

Les avantages et les inconvénients de Gutenberg

Parmi ses avantages, on peut citer l’interface utilisateur très intuitive, la possibilité d’ajouter des blocs dynamiques en constante évolution mais aussi une large communauté de développeurs qui peuvent vous aider en cas de problème ou de difficulté.

La solution permet de créer des landing pages de qualité très rapidement. Pratique !

En ce qui concerne ses inconvénients, certains utilisateurs ont signalé une courbe d’apprentissage plutôt raide, des conflits de compatibilité avec des plugins tiers et des performances en baisse lorsque les projets sont très complexes.

Comment choisir entre Layout Paragraphs, Drupal Layout Builder et Gutenberg

Le choix entre Layout Paragraphs, Drupal Layout Builder et Gutenberg va dépendre de plusieurs facteurs : votre niveau d’expertise technique, vos préférences personnelles, les particularités de votre projet, mais aussi la solution technique que vous avez privilégiée jusqu’à présent.

Si vous avez déjà acquis une expérience significative sur Drupal ou sur WordPress, il va de soi que vous maîtriserez plus facilement l’outil qui lui correspond. Si vous recherchez une solution simple et conviviale pour créer des pages et des articles, Gutenberg est un excellent choix. 

Si vous avez besoin d’un système de mise en page plus avancé avec des fonctionnalités de personnalisation supplémentaires, Drupal Layout Builder ou Layout Paragraphs pourraient mieux convenir, en fonction de votre niveau d’expertise et de vos objectifs de conception.

Quels types de projets pour l’utilisation de Drupal Layout Builder et Gutenberg

Pour faciliter votre choix, voici quelques cas d’usage assez classiques. Notez que chaque projet est unique et qu’il faut tenir compte des spécificités de chacun d’eux, néanmoins ces exemples peuvent vous aiguiller.

Projets de sites web personnalisés avec Drupal Layout Builder

Pour les projets qui nécessitent un haut niveau de personnalisation, nous vous recommandons l’usage de Drupal Layout Builder.

Certains exemples de sites web populaires qui ont été construits avec Drupal Layout Builder qu’il s’agisse de boutiques, des blogs et des portails d’information (celui de la Nasa, de la BBC ou du journal britannique The Guardian pour ne citer qu’eux). Grâce à la flexibilité et à la facilité d’utilisation de Drupal Layout Builder, vous pouvez créer des sites à la fois attrayants et fonctionnels en un temps raisonnable.

Projets de sites web de petite et moyenne envergure avec Gutenberg

Pour ce type de projet, Gutenberg peut être une solution rapide et efficace qui permet de créer des mises en page satisfaisantes sans avoir à coder. Avec sa solution composée d’une multitude de blocs prédéfinis pour les textes, les images, les vidéos, les boutons…

Gutenberg répondra très bien à la plupart des besoins basiques. Les blogs, les portfolios, les landing pages et les sites vitrines de petites entreprises y trouveront parfaitement leur compte.

Cependant, pour les projets de grande envergure, Gutenberg risque de montrer ses limites, et une solution comme Drupal Layout Builder ou Layout Paragraphs peut être plus appropriée.

Les perspectives d’avenir : des solutions durables ?

Comment les deux solutions vont-elles évoluer dans les années à venir ? Drupal Layout Builder et Gutenberg proposent régulièrement des améliorations et des fonctionnalités supplémentaires.

Elles bénéficient d’un engagement fort de leur communauté respective et leurs mises à jour sont continue. Elles sont donc bien positionnées pour rester à la pointe de l’industrie. Vous pouvez donc vous attendre à voir encore plus de fonctionnalités et de possibilités.

Vous voulez en savoir plus et partager avec nous votre projet ? Nos experts sont disponibles pour répondre à toutes vos questions ! Contactez-nous.