Le bloc Colonnes permet de structurer la mise en page en répartissant les contenus dans plusieurs colonnes. Il contient un ou plusieurs blocs enfants appelés Colonne, correspondant au nombre de colonnes souhaité.
Une fois le bloc Colonnes inséré dans votre contenu, vous choisissez le nombre de colonnes, de 1 à 6. Ce nombre peut être modifié à tout moment en ajoutant ou en supprimant des colonnes.
Chaque colonne peut ensuite recevoir un ou plusieurs blocs grâce au bouton Ajouter un bloc disponible dans chaque colonne.
Barre d’outils du bloc Colonnes#
Chaque bloc dans Gutenberg dispose d’une barre d’outils contextuelle permettant de manipuler le bloc directement dans l’éditeur. Le bloc Colonnes intègre des outils spécifiques additionnels en plus des outils communs.
Modifier l’alignement vertical du bloc Colonnes#
Le bloc Colonnes propose un outil spécifique nommé Modifier l’alignement vertical, situé à côté de l’outil Modifier l’alignement (horizontal). Il permet de régler la position verticale des colonnes dans le bloc global, avec trois options :
- Aligner en haut : les colonnes sont alignées en haut.
- Aligner au milieu : les colonnes sont centrées verticalement.
- Aligner en bas : les colonnes sont alignées en bas.
Ces réglages déterminent comment les colonnes dans le bloc parent se positionnent les unes par rapport aux autres verticalement.
Barre d’outils du bloc enfant Colonne#
Chaque bloc enfant Colonne possède une barre d’outils propre qui permet de gérer ses options spécifiques.
Modifier l’alignement vertical d’une colonne#
L’outil Modifier l’alignement vertical d’une colonne offre quatre options, qui s’appliquent selon la hauteur la plus grande parmi les colonnes :
- Aligner en haut : le contenu de la colonne s’aligne en haut.
- Aligner au milieu : le contenu est centré verticalement.
- Aligner en bas : le contenu est aligné en bas.
- Étirer pour remplir : la colonne s’étire verticalement pour remplir l’espace disponible.
Ces options permettent d’harmoniser l’apparence verticale des contenus d’une colonne en fonction des autres colonnes présentes.
Réglages du bloc Colonnes#
Dans la colonne latérale de l’éditeur, plusieurs réglages spécifiques sont accessibles lorsque le bloc Colonnes est sélectionné. Ces réglages complètent les réglages communs disponibles pour la majorité des blocs.
Nombre de colonnes#
Dans la section Colonnes, vous pouvez modifier le nombre de colonnes, avec une plage possible allant de 1 à 6.
Empiler sur mobile#
L’option Empiler sur mobile permet d’adapter la mise en page sur les écrans mobiles (jusqu’à 599 pixels de large) en faisant occuper à chaque colonne toute la largeur de l’écran. Au lieu d’être côte à côte, les colonnes sont ainsi affichées verticalement, facilitant la lecture sur petits écrans.
Réglages du bloc enfant Colonne#
Lorsque vous sélectionnez une colonne spécifique (bloc enfant Colonne), des réglages supplémentaires s’ajoutent à la colonne latérale, permettant d’affiner son paramétrage.
Mise en page#
Certaines options de mise en page peuvent être accessibles selon le thème actif, offrant des possibilités variables.
Largeur#
Dans la section Réglages, il est possible de définir une largeur spécifique pour chaque colonne, grâce à un champ d’entrée.
Différentes unités peuvent être utilisées pour définir cette largeur, comme :
- pixels (px)
- pourcentages (%)
- em
- rem
- vw (viewport width)
Les unités disponibles peuvent dépendre du thème utilisé.
Réglages avancés#
L’onglet Avancé est accessible pour les deux types de blocs (Colonnes et Colonne) et permet de saisir des configurations supplémentaires comme des classes CSS personnalisées ou autres options de personnalisation avancée.
Informations complémentaires#
- Pour apprendre à ajouter un nouveau bloc, consultez l’article Ajouter un nouveau bloc.
- Pour comprendre la gestion générale des barres d’outils des blocs, voir Barre d’outils des blocs.
Illustrations de l’alignement vertical d’une colonne#
Aligner en haut
Aligner au milieu
Aligner en bas
Étirer pour remplir
