Le bloc de la grille est un outil de mise en page robuste de l'éditeur de blocs WordPress Gutenberg qui vous permet de créer une mise en page multi-colonnes sans codage. Il vous permet d'organiser votre contenu dans une grille structurée de lignes et de colonnes au lieu d'être limité à une seule colonne de texte ou de média.
Concevoir des pages de style magazine, des portfolios, des galeries ou d'autres sections dans lesquelles vous souhaitez ajouter du contenu côte à côte est plus facile en utilisant le bloc de grille de WordPress. Aujourd'hui, nous allons explorer comment utiliser le bloc de grille dans WordPress et vous donner une vue d'ensemble.
Créer de belles tables
Avec l'éditeur de blocs
Comment utiliser le bloc de grille dans WordPress ?
Nous allons maintenant suivre un guide étape par étape sur l'ajout d'un bloc de grille. Ces étapes aideront les débutants et les utilisateurs intermédiaires à tirer le meilleur parti de ce bloc.
Mais avant de suivre les étapes, vous devez doit se rendre dans votre message et sur les pages où vous souhaitez utiliser le bloc. Ensuite, suivez les étapes ci-dessous.
Insérer le bloc de la grille
Cliquez sur l'icône Ajouter un bloc (Icône plus) (1), type "Grille"dans la boîte de recherche (2)et cliquer sur le bloc lorsqu'il apparaît (3).
Insérer votre contenu
Par défaut, vous verrez que seules deux colonnes sont insérées pour le contenu. Insérez votre contenu en cliquant sur le bouton + icône à l'intérieur du bloc, puis sélectionnez le bloc de votre choix.
Insérez maintenant d'autres contenus ou blocs en cliquant en bas à droite du bloc.
Vous pouvez insérer le bloc de votre choix. Dans mon cas, j'ai inséré le bloc image.
Vous pouvez insérer l'espace entre les colonnes pour chaque bloc.
Personnalisation des blocs
Dans la personnalisation des blocs, vous disposez d'options pour la mise en page (1) et la position (2).
Dans la mise en page, vous pouvez choisir la Position de l'élément de la grille. Vous pouvez conserver le réglage par défaut ou opter pour le manuel.
L'option Auto vous permet d'ajuster la largeur minimale des colonnes.
L'option manuelle vous permet de choisir les colonnes du bloc. Vous pouvez facilement ajuster le nombre de colonnes dans le bloc.
Ensuite, vous pouvez choisir de rendre votre grille collante ou non. Si vous voulez la rendre collante, choisissez l'option collante.
Il existe également des styles prédéfinis pour le bloc dans l'onglet Styles. Vous pouvez les sélectionner et voir ce qu'ils font. Voici l'aperçu ci-dessous.
Vous pouvez personnaliser le texte et la couleur d'arrière-plan à l'aide de l'option Couleur.
L'option Image d'arrière-plan vous permet d'ajouter une image pour l'arrière-plan du bloc.
Pour réinitialiser l'image, cliquez sur les trois points et sélectionnez Réinitialiser tout.
Dans la typographie, vous pouvez définir la police, la taille de la police, l'apparence, la hauteur de ligne, l'espacement des lettres, la décoration et la casse des lettres.
Les dimensions vous permettent de personnaliser le rembourrage, la marge, la hauteur minimale et l'espacement du bloc de la grille.
Voyons ci-dessous la modification de l'espacement des blocs et de la hauteur minimale.
Enfin, l'option bordure et ombre permet d'ajuster la bordure et le rayon de la bordure du bloc.
Voici la démonstration finale de ce que j'ai fait en utilisant le bloc. Ce n'est pas le meilleur, mais cela donne une idée de ce que ce bloc peut faire.
Vue d'ensemble du bloc de grille de WordPress
Qu'est-ce que le bloc de grille dans WordPress ?
Le bloc grille est un bloc conteneur qui contient tous les autres blocs dans une disposition en grille. En d'autres termes, il s'agit d'un bloc parent dans lequel vous pouvez placer plusieurs blocs enfants (comme des paragraphes, des images, des boutons, etc.) et qui les disposera dans une série de colonnes. Il crée automatiquement de nouvelles lignes si nécessaire.
Quelles sont les principales caractéristiques du bloc de grille ?
Le bloc Grille possède plusieurs fonctions utiles, ce qui en fait un outil polyvalent pour la création de mises en page. Voici quelques-unes de ses principales caractéristiques :
- Dispositions flexibles des colonnes : Vous pouvez choisir le nombre de colonnes que vous souhaitez dans votre grille. Le bloc Grille vous permet de définir un nombre spécifique de colonnes ou de laisser WordPress déterminer automatiquement le nombre de colonnes en fonction d'une largeur minimale.
- Conception adaptée : Le contenu disposé dans un bloc de grille est adapté à la mobilité.
- Disposition et réorganisation du contenu : Il est facile d'organiser et de réorganiser les blocs dans la grille. Vous pouvez faire glisser et déposer les blocs de contenu à différentes positions ou utiliser les touches fléchées pour les déplacer vers le haut ou vers le bas dans le conteneur de blocs de la grille.
- Options de style personnalisées : Vous pouvez modifier la couleur d'arrière-plan ou ajouter une image d'arrière-plan à la section, ajuster les couleurs de texte pour le contenu à l'intérieur et peaufiner la typographie (tailles et familles de polices), le tout en un seul endroit.
- Intégration avec d'autres blocs de mise en page : Il vous permet de transformer dans d'autres blocs de mise en page tels qu'un groupe standard, une rangée, une pile, un bloc Couverture ou même l'ancien bloc Colonnes si nécessaire.
Quelles sont les fonctionnalités de la barre d'outils du bloc de grille ?
Lorsque vous sélectionnez le bloc de grille dans l'éditeur, une icône barre d'outils du bloc apparaît en haut du bloc. Cette barre d'outils fournit des commandes rapides pour les actions courantes et la personnalisation.
- Transformer : Vous pouvez transformer un bloc de grille en bloc de groupe, de rangée, de pile, de couverture ou de colonne tout en préservant le contenu interne.
- Poignée d'entraînement : L'icône des six points vous permet de faire glisser et de déplacer l'ensemble du bloc de la grille vers une position différente sur votre page.
- Déplacer vers le haut/bas : Les icônes de flèches vers le haut et vers le bas vous permettent de déplacer le bloc de grille d'une position vers le haut ou vers le bas dans la structure du document.
- Alignement (alignement de la largeur) : L'icône d'alignement vous permet de modifier la largeur du conteneur du bloc de grille.
- Plus d'options : Les trois points verticaux ouvrent un menu déroulant avec des options de blocs supplémentaires.
Dernières réflexions !
Le bloc Grid est un bloc impressionnant qui constitue un ajout fantastique à la boîte à outils de conception de WordPress. Il vous offre la possibilité de créer facilement des mises en page flexibles et multi-colonnes.
Grâce à ce bloc, vous pouvez créer des sections plus fascinantes et plus attrayantes pour votre site web. En résumé, le bloc de grille vous aide à vous affranchir du format à colonne unique et à présenter le contenu côte à côte dans une structure de grille propre.
Faites-moi part de vos réflexions dans les sections de commentaires. N'hésitez pas non plus à le partager avec vos amis en utilisant vos médias sociaux.
En savoir plus !
