Grids Layout Builder : améliorez vos mises en page WordPress
đź’ˇ En rĂ©sumĂ© : Grids Layout Builder est une extension innovante pour WordPress qui permet de crĂ©er des mises en page sophistiquĂ©es directement dans l’Ă©diteur Gutenberg. Avec une variĂ©tĂ© de fonctionnalitĂ©s avancĂ©es pour le design adaptatif et la superposition des blocs, cet outil ouvre de nouvelles perspectives pour les dĂ©veloppeurs et les crĂ©ateurs de contenu. Dans cet article, nous verrons comment Grids Layout Builder peut transformer vos mises en page sur WordPress, tout en Ă©tudiant ses fonctionnalitĂ©s, ses avantages et ses limites.
SOMMAIRE
1 – Qu’est-ce que Grids Layout Builder pour Gutenberg ?
Grids Layout Builder est une extension gratuite disponible sur le rĂ©pertoire officiel des plugins WordPress. LancĂ©e dĂ©but 2019, elle a dĂ©jĂ suscitĂ© l’attention de la communautĂ©. Avec plus de 1000 installations actives Ă ce jour, elle reste cependant peu connue comparĂ©e Ă d’autres plugins.
Son potentiel a Ă©tĂ© mis en avant par Matt Mullenweg, le co-fondateur de WordPress, lors du WordCamp Europe 2019, ce qui a suscitĂ© un intĂ©rĂŞt croissant autour de ce plugin. Si Matt lui accorde de l’attention, cela en dit long sur sa valeur ajoutĂ©e pour les utilisateurs de WordPress !
3 – Exemple d’une section 4 colonnes
Pour illustrer, prenons une section 4 colonnes. Chaque colonne, appelée AREA, fonctionne comme un conteneur pour les blocs Gutenberg que vous insérez.
3.1 – Fonctionnement des Areas
Dans notre exemple, nous ajouterons quatre boutons identiques aux quatre colonnes.
- Insérez la section 4 colonnes.
- Ajoutez les blocs souhaités dans chaque colonne.
- Chaque colonne pourra être configurée avec des options de couleur, de lien, etc.
- Un petit menu vous indiquera quelle colonne est sélectionnée.
- Utilisez les options de visibilité avancée et de z-index pour un contrôle optimisé.
3.2 – Fonctionnement des sections
La section englobe toutes les areas. Passer votre souris sur la section affichera un menu qui vous permettra d’ajouter des images de fond, d’ajuster leur taille et d’autres fonctions esthĂ©tiques non disponibles dans l’Ă©diteur natif.
4 – Exemple d’une section libre
La véritable innovation de Grids Layout Builder réside dans la capacité à créer des mises en page qui correspondent exactement à votre vision, simplement par glisser-déposer.
Ajoutez une section libre et une interface apparaîtra. Guidez la souris pour sélectionner le nombre de cases souhaité, vous permettant d’ajuster la profondeur des zones et de modifier leur ordre par simple glisser.
Une fois insérés, les blocs Gutenberg peuvent être placés comme vous le désirez, brisant les contraintes de l’éditeur classique de WordPress.
5 – Les points forts de Grids Layout Builder
Grids Layout Builder ne se limite pas à la création de mises en page. Voici quelques-unes de ses fonctionnalités avantageuses :
Point fort n°1 : « extend the editor width »
Cette fonctionnalité permet d’élargir l’éditeur de WordPress, offrant une expérience de conception plus fluide.
Point fort n°2 : gestion avancée du responsive
Les options de Marges, Padding et Hauteur peuvent être ajustées selon trois types d’écrans : Desktop, Tablette et Mobile, garantissant une apparence optimale sur tous les appareils.
Point fort n°3 : superposition des blocs
La possibilité de superposer des zones ajoutées représente un avantage significatif. Peu de constructeurs de pages permettent cela, offrant ainsi un niveau de personnalisation supplémentaire.
Point fort n°4 : lien d’ancrage
Vous pouvez ajouter des liens d’ancrage aux sections, facilitant la navigation au sein de vos articles. Cette pratique amĂ©liore l’accessibilitĂ© et l’expĂ©rience utilisateur.
Point fort n°5 : changer la disposition des colonnes
La flexibilité est un autre atout : vous pouvez modifier la largeur des colonnes dans les sections 2 et 3, comme par exemple en choisissant des dispositions telles que [1/3+1/3+1/3] ou [1/4+1/2+1/4].
6 – Les points faibles de Grids Layout Builder
Toutefois, comme toute extension, Grids Layout Builder a ses inconvénients :
Il nécessite un certain temps d’adaptation. L’expérience utilisateur peut être confuse, surtout lors de la sélection entre différentes zones. Il peut également y avoir des difficultés à insérer des blocs au bon endroit lorsque plusieurs zones se chevauchent.
Enfin, le rendu sur le front-end peut ne pas correspondre à vos attentes. Des ajustements restent parfois nécessaires pour obtenir le résultat désiré.
7 – Conclusion et résultat en vidéo…
Grids Layout Builder reprĂ©sente une alternative solide aux Page Builders classiques. Bien qu’encore jeunes, ses nombreuses fonctionnalitĂ©s rĂ©pondent Ă des besoins rĂ©els des utilisateurs de WordPress.
Sa capacitĂ© Ă simplifier la crĂ©ation de mises en page tout en offrant un niveau de personnalisation inĂ©galĂ© le positionne comme un outil Ă surveiller. Une petite vidĂ©o de dĂ©monstration vous montrera comment j’ai utilisĂ© cet outil pour crĂ©er une mise en page spĂ©cifique.
Si vous ĂŞtes un utilisateur de Grids Layout Builder, n’hĂ©sitez pas Ă partager vos retours d’expĂ©rience dans les commentaires. Cela peut aider d’autres utilisateurs Ă mieux se familiariser avec cet outil prometteur.
A propos de l’auteur…
Lycia Diaz, consultante et formatrice WordPress, aime partager ses expĂ©riences. Elle est Ă©galement l’auteure de « Je crĂ©e mon site avec WordPress » et anime plusieurs blogs dĂ©diĂ©s Ă WordPress.
2 – Comment ça marche ?
Installer Grids Layout Builder est un processus simple. Il vous suffit de le rechercher dans l’onglet Extensions > Ajouter, puis d’installer et d’activer le plugin. Contrairement Ă d’autres extensions, Grids Layout Builder ne nĂ©cessite aucune configuration complexe.
Une fois activĂ©e, une nouvelle option apparaĂ®t dans l’Ă©diteur Gutenberg. Pour l’utiliser, cliquez sur l’icĂ´ne “+” pour ajouter un nouveau bloc, puis choisissez “Section”. Divers types de sections s’offriront Ă vous : 1/1, 2/2, 3/3, 4/4 ou une section libre.
Ces sections fonctionnent de manière uniforme, vous permettant de construire votre mise en page comme vous le souhaitez.