Concevoir vos colonnes

Vous pouvez utiliser des colonnes pour organiser le contenu dans des mises en page structurées, ce qui rend votre site visuellement attrayant et facile à parcourir. Dans ce guide, vous apprendrez à personnaliser les aspects de design de vos colonnes, notamment les couleurs, l’alignement et l’apparence sur mobile.

Pour ajouter ou modifier la couleur d’arrière-plan des colonnes, procédez comme suit :

1. Sélectionnez Vue en liste dans le coin supérieur gauche de l’éditeur. C’est l’icône qui ressemble à trois lignes horizontales superposées.
2. Localisez le bloc Colonnes ici et cliquez dessus :

3. Dans les réglages du bloc Colonnes sur le côté droit de l’écran, cliquez sur l’onglet Styles (l’icône ressemble à un cercle noir et blanc) :

4. Dans les réglages de couleur, cliquez sur « Arrière-plan » et sélectionnez une couleur d’arrière-plan.
5. Cliquez sur le bouton « Enregistrer » pour enregistrer vos modifications.

Si vous souhaitez sélectionner des couleurs différentes pour chaque colonne, suivez les mêmes étapes, mais sélectionnez un bloc Colonne spécifique dans la vue en liste, au lieu du bloc Colonnes global.

Lorsque vous ajoutez du contenu à une nouvelle colonne, il est aligné par défaut en haut du conteneur de la colonne. Vous pouvez modifier l’alignement du contenu à l’intérieur des colonnes en procédant comme suit :

1. Sélectionnez Vue en liste dans le coin supérieur gauche de l’éditeur. C’est l’icône qui ressemble à trois lignes horizontales superposées.
2. Localisez le bloc Colonnes ici et cliquez dessus :

3. Dans la barre d’outils qui apparaît au-dessus ou en dessous des colonnes sélectionnées, cliquez sur l’option d’alignement vertical :

4. Choisissez « Aligner en haut », « Aligner au milieu » ou « Aligner en bas » de sorte que tout le contenu à l’intérieur des colonnes se trouve en haut, au milieu ou en bas du conteneur de la colonne.

Si vous souhaitez sélectionner différents alignements pour chaque colonne, suivez les mêmes étapes, mais sélectionnez une colonne spécifique dans la vue en liste, au lieu de l’ensemble de colonnes. Ce faisant, vous pouvez créer une mise en page dispersée comme celle-ci :

Lorsque vous utilisez une mise en page de colonnes, il est important de tenir compte de la façon dont vos colonnes apparaîtront pour les visiteurs de votre site Web qui sont sur des appareils mobiles. Les écrans des téléphones sont plus petits, il est donc possible que plusieurs colonnes ne s’adaptent pas parfaitement à une seule ligne tout en gardant votre contenu lisible.

Vous pouvez choisir d’« empiler » les colonnes sur les écrans mobiles afin qu’elles apparaissent les unes sur les autres, au lieu de les afficher toutes sur une seule ligne :

1. Sélectionnez le bloc Colonnes, soit en utilisant la vue en liste, soit en utilisant la barre d’outils du bloc.
2. Dans les réglages du bloc Colonnes sur le côté droit de l’écran, activez le bouton à bascule « Empiler sur mobile » :

Ce bouton à bascule détermine si les colonnes sont affichées horizontalement ou empilées verticalement lorsque la page ou l’article s’affiche sur un appareil mobile. Voici un exemple d’empilement de colonnes affiché sur un écran d’ordinateur par rapport à un écran d’appareil mobile :