Grids Layout Builder est une extension qui va vous permettre de créer des mises en page sophistiquées (layout) au sein de l’éditeur de WordPress (Gutenberg).
Dans cet article, je vous propose de découvrir les fonctionnalités apportées par Grids Layout Builder et vous allez voir que c’est une ré-vo-lu-tion !
Grids Layout Builder
1 – Qu’est-ce que Grids Layout Builder pour Gutenberg ?
Comme je vous l’ai dit, Grids Layout Builder est une extension gratuite disponible sur le répertoire officiel des plugins WordPress.
Cette extension est tout jeune, elle a été lancée en début d’année 2019. Bien que son nombre d’installations actives (+1000) n’est pas très élevé, elle n’en est pas moins très prometteuse…
D’ailleurs, Matt Mullenweg – le fondateur de la société Automattic qui propulse WordPress, entre autres – n’a pas hésité à citer ce plugin et à le tester en live lors de sa conférence au WordCamp Europe 2019… Rien que ça !
Donc si “notre ami Matt” l’approuve, on ne peut que tester cette extension ;-)
2 – Comment ça marche ?
Pour commencer, c’est très simple, il vous suffit d’installer l’extension comme à votre habitude. Si vous ne savez pas comment faire, lisez cet article dédié à l’installation d’une extension.
Extension gratuite : Grids Layout Builder
Ou rendez-vous à l’onglet Extensions > Ajouter et faites une recherche par mot-clé : “grids layout”. Cliquez sur installer puis sur activer.
Une fois que cela est fait, vous n’avez pas besoin de chercher un nouvel onglet d’options de configuration. Non, Grids Layout Builder n’a pas besoin d’être paramétrée pour fonctionner.
Une fois activée, l’extension ajoute une nouvelle option au sein de l’éditeur Gutenberg de WordPress, tout simplement.
Voici comment cela se présente :
Ajouter une section Grids
- Au sein d’une page ou d’un article, cliquez sur l’icône “+” comme si vous vouliez ajouter un nouveau bloc.
- Sauf qu’au lieu d’ajouter un bloc, vous choisirez “Section”.
- Une fenêtre vous proposera alors divers types de sections, à savoir :
- Une section 1/1,
- Une section 2/2,
- Une section 3/3,
- Une section 4/4,
- Une section libre.
Les sections 1/1, 2/2, 3/3 et 4/4 fonctionnent de la même manière, quant à la section libre, elle présente quelques différences d’utilisation.
Nous allons voir cela en détail dans la suite de cet article…
3 – Exemple d’une section 4 colonnes
Pour commencer, je vous propose de découvrir l’utilisation d’une section classique composée de 4 colonnes (section 4/4).
3.1 – Fonctionnement des Areas
Chaque colonne, quelle soit unique ou au nombre de 2, 3 ou 4 propose une ou des AREA(s) : c’est un “container” ou “conteneur” dans lequel vous pourrez placer les blocs Gutenberg que vous voudrez.
Option des colonnes “area”
- Pour cet exemple, j’insère une section composée de 4 colonnes.
- Au sein de chaque colonne, il me suffit d’ajouter les blocs qui m’intéressent. Pour cet exemple, j’ai inséré 4 boutons identiques mais cela aurait pu être du texte, des images ou autre. Chaque bouton se configure normalement (couleur de fond, URL du lien etc.) mais ce sont les fonctionnalités apportées par Grids Layout Builder qui nous intéressent ici… Vous verrez alors apparaitre un petit menu connexe (encadré en vert sur cette capture d’écran). En le sélectionnant, la sidebar (barre latérale) vous confirmera que vous êtes bien en train de modifier cette colonne, également appelée AREA (zone).
- La sous-section “Structure” vous permet de facilement voir quelle “area” vous êtes en train de modifier. Ici, vous pourrez aussi cliquer sur les autres zones afin de les sélectionner plus rapidement.
- La sous-section “Display” permet de définir une visibilité en fonction des tailles d’écran, cela peut s’avérer très utile ! Et surtout, cette fonctionnalité n’existe pas au sein de Gutenberg.
- La sous-section “Stack-order” permet de définir une valeur de z-index. Voilà encore une fonctionnalité intéressante ! Le z-index permet de définir la profondeur des calques lorsqu’ils se superposent. Vous pourrez placer certaines Areas au-dessus ou au-dessous de certaines autres.
- La sous-section “Dimension” permet de définir le Margin et le Padding de chaque Area (colonne) et pour chaque type d’écran.
3.2 – Fonctionnement des sections
La SECTION est ce qui englobe toutes les areas, peu importe le nombre…
Options de la section Grids
- Au passage de la souris au-dessus de la section, vous verrez apparaitre un petit menu connexe avec une icône tricolore. En le sélectionnant, les options de la sidebar (barre latérale) de droite changeront et vous permettront de :
- Ajouter une image de fond qui s’appliquera sur la section entière.
- Choisir la taille et l’affichage de votre image de fond.
- Sélectionner, si besoin, le “Focal Point”.
- Fixer l’image de fond pour un effet de glissement.
Toutes ces possibilités apportées par Grids Layout Builder ne sont pas disponibles depuis l’éditeur natif de WordPress et cela lui confère un avantage tout particulier.
Mais ce n’est pas la seule chose appréciable, la puissance de cette extension réside surtout dans la création d’une section libre…
4 – Exemple d’une section libre
Voilà la vraie révolution : la possibilité de créer un layout qui sort tout droit de votre imagination, juste en drag & drop !
Ajout d’une section libre : construisez votre layout !
Ajoutez alors une nouvelle section et choisissez la disposition libre (tout à droite)…
Construire le layout en “drag & drop”
Un écran apparait :
- Sélectionnez le nombre de cases désirées en cliquant et glissant la souris (drag&drop).
- À chaque nouvelle Area créée, elle viendra se placer sur la barre latérale de droite. Vous pouvez les glisser de haut en bas, ce qui aura un effet sur la position z-index si ces Areas se superposent. Dans la capture d’écran ci-dessus, la zone n°2 couvrira une partie de la zone n°1 et la zone n°3 couvrira une partie de la zone n°2.
- Terminez par “Insert in page”.
Ajouter des blocks dans le layout
Une fois la zone libre insérée au sein de votre article ou votre page, il ne vous restera plus qu’à ajouter des blocs Gutenberg selon vos besoins.
Pour cet exemple, j’ai inséré 3 photos et vous remarquez que les images se superposent. Cela est bien évidement impossible avec l’éditeur de WordPress: merci Grids Layout Builder ;-)
5 – Les points forts de Grids Layout Builder
Outre toutes les fonctionnalités énumérées jusqu’à présent, Grids Layout Builder en propose d’autres bien plus sympas encore :
Point fort n°1 : “extend the editor width”
Option Extended Editor
En cochant le petit bouton en haut à droite, vous pourrez profiter d’un éditeur WordPress plus large… Enfin ! C’est à se demander pourquoi l’éditeur natif ne l’est tout simplement pas par défaut ???
Point fort n°2 : gestion avancée du responsive
Depuis la barre latérale des options, vous pourrez facilement modifier certaines valeurs (margin, padding et height) en fonction de 3 types d’écran : Desktop, Tablette et Mobile.
Option de visibilité et de responsive
Ces valeurs pourront être modifiées sur chaque Area (colonne) mais aussi sur la section en elle-même.
Point fort n°3 : superposition des blocs
C’est justement LA fonctionnalité qui nous fait apprécier Grids Layout Builder ! La possibilité de superposer des Areas ou de les faire se chevaucher est très intéressante et est rarement disponible, même au sein de Page Builders évolués.
Point fort : superposition des blocs
Point fort n°4 : lien d’ancrage
Encore une autre option qui va apporter un vrai confort : la possibilité d’ajouter un lien d’ancrage sur une section Grids.
Ajouter un lien d’ancrage
Cet ancre HTML vous permettra d’identifier une section et de faire un lien vers elle depuis un autre article ou même depuis une table des matières en début d’article (comme sur cet article).
Avec l’éditeur natif de WordPress, il est seulement possible d’ajouter une Classe CSS sur des blocs, mais aucun ID CSS.
Cela nous oblige alors à modifier le bloc en version HTML. C’est très agaçant et surtout, ce n’est pas à la portée de tous les utilisateurs… Avec Grids Layout Builder, c’est un jeu d’enfant !
Point fort n°5 : changer la disposition des colonnes
Autre point fort de Grids Layout builder : la possibilité de modifier la disposition du colonnage.
Lorsque vous sélectionnez la structure de votre section, vous verrez apparaître des options dans la barre latérale de droite qui vous permettront de modifier la largeur des colonnes :
Par exemple, pour une section 3 colonnes, vous pourrez faire :
- [1/3+1/3+1/3] ou
- [1/4+1/2+1/4] ou
- [1/4+1/4+1/2] ou
- [1/2+1/4+1/4].
Notez que cette option n’est disponible que dans les sections 2 et 3 colonnes.
6 – Les points faibles de Grids Layout Builder
On y vient !
Évidemment, Grids Layout Builder n’a pas que des avantages, il présente aussi son lot de points faibles qui, espérons-le, s’amélioreront avec le temps…
Tout d’abord, cette extension n’est pas facile à prendre en main. Une amélioration de l’UX ne serait pas un luxe…
On essaye de cliquer sur une Section mais on sélectionne l’Area, alors on re-clique et re-re-clique… bref, si vous l’essayez, vous comprendrez !
Ensuite, lorsque vous insérez une section libre et selon comment vous avez défini les zones de bloc, vous verrez que tout se superpose et on ne sait plus où cliquer pour insérer le bloc au bon endroit. Voici un petit aperçu sur cette capture d’écran :
Points faibles : lisibilité
Enfin, une autre chose un peu embêtante : le rendu en front-end n’est pas toujours conforme à ce que l’on souhaitait créer au départ, comme vous pouvez le voir sur l’image suivante :
Résultat non conforme
J’ai eu beau essayer d’ajouter des marges, du padding et tout autre subterfuge pas très clean au niveau du code, mais rien y fait : mon carré vert et mon carré bleu n’a jamais dépassé mon rectangle gris, comme je le souhaitais lors de sa construction. En vain…
7 – Conclusion et résultat en vidéo…
Grids Layout Builder peut-il vraiment devenir un digne successeur du Page Builder ? À l’heure actuelle, pas vraiment. MAIS, il est encore jeune et très prometteur !
Cette extension emmène de nombreuses fonctionnalités qui manquent cruellement à l’éditeur Gutengberg…
Même si ce dernier va évoluer avec l’arrivée de la version 5.3 de WordPress, certaines fonctionnalités et options manqueront encore à l’appel, malheureusement.
En conclusion, on peut dire que l’utilisation de Grids Layout Builder est une bonne alternative pour construire des mises en page sophistiquées tout en se passant d’un Page Builder.
D’ailleurs, j’ai fait une petite vidéo du layout que j’ai construit lors de mon test pour cet article :
Si vous utilisez déjà Grids Layout Builder, n’hésitez pas à donner votre avis en commentaire ou à ajouter des éléments que j’aurais pu omettre…
Pour aller plus loin :
Salut Lycia,
Merci beaucoup pour cet article. Je suis un fan de Grid Layout depuis le début. C’est tentant d’avoir ça en back-office. Par contre, je suis très sceptique sur la gestion des blocs en colonne avec l’interface de Gutenberg que je ne trouve pas du tout adaptée. J’ai essayé beaucoup d’extensions avec des colonnes et c’est juste l’enfer par rapport à un outil comme Elementor tellement mieux fait sur ce point. Je suis en train d’imaginer un autre système avec Gutenberg sans passer par les colonnes en back. A suivre….
Merci Grégoire ! Je sais bien que tu es un grand fan de Grid ;-) ! Je trouve que cette extension est justement une alternative (basique) pour ceux qui ne voudraient pas mettre les mains dans un page builder tout en pouvant réaliser des mises en page un peu sympas… L’UX de cette extension en est encore à ses balbutiements, je pense, mais si tu nous prépares une surprise, on a tous hâte de la découvrir ;-)