Blocs

Blocs »Bloc de grille de mise en page

Le bloc de grille vise à faciliter la création de mises en page partageant un quadrillage vertical cohérent à l’échelle d’un article ou d’une page. Il vous permet également d’insérer du contenu dans des colonnes.

Une grille contient de 1 à 4 colonnes dont les dimensions et la position peuvent être modifiées sur 12 lignes de quadrillage vertical. Ces options permettent d’obtenir des mises en page spécifiques pour les tablettes (8 lignes de quadrillage vertical) et les mobiles (4 lignes de quadrillage vertical).

Pour la mise en valeur, vous pouvez ajouter des couleurs d’arrière-plan et des marges intérieures.

Vous pouvez ajouter la grille de mise en page en cliquant sur le bouton Ajouter un bloc dans la section de mise en page. Vous pouvez également saisir /mise en page pour aller plus vite.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.

Notez que certaines fonctionnalités dépendent de la prise en charge totale de l’éditeur de blocs par le thème de votre site.

Qu'est-ce qu'une grille de mise en page ?

Une grille est un mécanisme de conception d’une mise en page. Elle contient un certain nombre de lignes de quadrillage en fonction de l’appareil utilisé (point d’adaptabilité) :

  • 12 lignes de quadrillage pour les ordinateurs de bureau
  • 8 lignes de quadrillage pour les tablettes
  • 4 lignes de quadrillage pour les appareils mobiles

La grille de mise en page possède plusieurs (1 à 4) colonnes, renfermant chacune le contenu placé sur la grille.

Les colonnes peuvent couvrir plusieurs lignes de quadrillage (lignes pointillées) et peuvent être espacées les unes par rapport aux autres. Il s’agit de la mise en page de votre grille. Différents réglages peuvent être utilisés pour chaque appareil d’affichage.

Sur les appareils plus petits (tablette et mobile), la mise en page s’étale fréquemment sur plusieurs lignes. Cette fonctionnalité est automatiquement activée lorsque vous basculez sur un écran de tablette ou mobile. Pour l’annuler, il suffit de modifier directement les valeurs de la grille.

Les points d’adaptabilité sont une fonctionnalité avancée. Vous pouvez toujours utiliser la grille de mise en page sans vous en préoccuper. La grille utilisera les réglages par défaut.

↑ Table des matières ↑

Configurer la grille

Lorsque vous ajoutez un bloc de grille de mise en page pour la première fois, vous êtes invité à sélectionner le nombre de colonnes :

Vous pouvez modifier cette valeur ultérieurement dans la colonne latérale des réglages du bloc.

↑ Table des matières ↑

Ajouter du contenu à la grille

Chaque colonne de la grille peut contenir d’autres blocs. Vous pouvez ajouter du contenu en cliquant sur l’icône + et en choisissant un bloc.

↑ Table des matières ↑

Redimensionner la grille

Vous pouvez redimensionner les colonnes d’une grille de quadrillage de l’une des deux manières suivantes :

  • En utilisant les poignées de redimensionnement à l’écran
  • En utilisant la colonne latérale des réglages du bloc

Le point d’adaptabilité actuellement sélectionné apparaît au bas du bloc de grille de mise en page.

À l’aide de la colonne latérale des réglages du bloc, vous pouvez basculer entre les points d’adaptabilité propres aux ordinateurs de bureau, tablettes et appareils mobiles en cliquant sur les boutons appropriés.

Notez que l’intégralité de l’éditeur ne change pas pour refléter le point d’adaptabilité choisi.

↑ Table des matières ↑

Redimensionner la grille à l'aide des poignées correspondantes

Chaque colonne de votre grille possède un rond bleu à gauche et à droite. Il s’agit des poignées de redimensionnement. Si vous cliquez dessus et les déplacez vers la gauche ou la droite, le bloc est redimensionné.

La grille de mise en page empêche tout redimensionnement en dehors des limites de la grille. Cela signifie que vous pouvez être amené à ajuster d’autres colonnes pour faire de la place.

Vous ne pouvez pas utiliser les poignées de redimensionnement pour redimensionner la grille sur plusieurs lignes.

↑ Table des matières ↑

Redimensionner la grille à l'aide des réglages du bloc

Outre les poignées de redimensionnement, vous pouvez modifier directement la mise en page de la grille à l’aide de la colonne latérale des réglages du bloc.

Pour chaque bloc, la colonne latérale de l’éditeur contient des options spécifiques en plus de celles disponibles dans la barre d’outils du bloc. Si la colonne latérale ne s’affiche pas, cliquez simplement sur l’icône représentant un pignon en regard du bouton Publier.

Vous pouvez modifier directement les valeurs de chaque colonne :

  • Décalage : nombre de lignes de quadrillage de décalage de cette colonne par rapport au réglage précédent (ou initial)
  • Extension : nombre de lignes de quadrillage que cette colonne couvre

Ces valeurs sont automatiquement ajustées lorsque vous utilisez les poignées de redimensionnement.

↑ Table des matières ↑

Plusieurs lignes

Les mises en page sur tablette et appareil mobile peuvent comporter plusieurs lignes.

Vous pouvez redimensionner les colonnes à l’intérieur de chaque ligne à l’aide des poignées de redimensionnement. Pour déplacer des colonnes sur plusieurs lignes, vous devez utiliser la colonne latérale des réglages du bloc.

↑ Table des matières ↑

Règles de quadrillage

Même une grille requiert des règles ! Par chance, une seule règle s’applique ici : le total de toutes les valeurs de décalage et d’extension de chaque colonne au sein d’une ligne ne doit pas dépasser le nombre de lignes de quadrillage de l’appareil d’affichage.

Par exemple, sur un ordinateur de bureau (12 lignes de quadrillage), une mise en page à trois colonnes peut se présenter comme suit : chaque colonne couvre 4 lignes de quadrillage sans décalage, 3 lignes de quadrillage avec 1 décalage chacune ou encore une colonne peut couvrir 10 lignes de quadrillage tandis que les deux autres n’en couvrent qu’une.

C’est à vous d’agencer le quadrillage. La règle veille à ce que vos colonnes ne se superposent pas. Cela signifie que certaines combinaisons de décalages/extensions ne sont pas possibles (notamment lorsque vous manipulez plusieurs lignes) et que vous devrez choisir des valeurs qui respectent la règle de quadrillage.

↑ Table des matières ↑

Marges intérieures et couleurs

Chaque colonne de la grille possède ses propres réglages. Ces derniers sont accessibles de la même manière que les réglages du bloc. Ici, vous pouvez ajouter une marge intérieure ou une couleur d’arrière-plan. Ces réglages n’affectent que la colonne concernée.