Éditer des pages
Mise en page
Deux blocs organisent les autres blocs dans l’espace : la Section, pour des colonnes simples avec un fond, et le Conteneur de grille, pour des grilles CSS libres.
Quel bloc choisir ?
| Besoin | Bloc |
|---|---|
| Une bande de page avec 1 à 4 colonnes, un fond et des marges | Section |
| Une grille sur plusieurs lignes, des cellules de tailles différentes, des zones nommées | Conteneur de grille |
Dans les deux cas, n’importe quel bloc peut être placé dans une colonne ou une cellule.
Les sections
Ajouter une section
La bibliothèque propose une entrée par disposition :
- Section – 1 colonne, 2 colonnes, 3 colonnes, 4 colonnes ;
- Section – 1/3 + 2/3 et Section – 2/3 + 1/3.
Choisissez la disposition voulue : la section est ajoutée avec ses colonnes déjà créées.
Placer des blocs dans les colonnes
- Cliquez sur le bouton + dans l’en-tête d’une colonne pour ajouter un bloc.
- Ou faites glisser un bloc existant dans la colonne. Dans une colonne, faites glisser un bloc sur un autre pour les réordonner.
Un clic droit sur un bloc placé dans une colonne propose : Dupliquer, Basculer la visibilité, Coller, Extraire de la cellule (le bloc revient dans la liste principale) et Supprimer.
Les colonnes elles-mêmes se modifient dans l’éditeur de grille de la section, comme pour un Conteneur de grille.
Réglages de la section
| Champ | Valeurs |
|---|---|
| Largeur du contenu | Centrée (largeur limitée) ou Pleine largeur. |
| Espace au-dessus et en dessous | Aucun, Petite, Moyenne, Grande, Très grande. |
| Espace entre les colonnes | Petite, Moyenne, Grande. |
| Alignement vertical des colonnes | Même hauteur, En haut, Au centre, En bas. |
| Empiler les colonnes | Jamais, Sur mobile, Sur tablette et mobile, Sur petit ordinateur, tablette et mobile. |
| Ancre | Nom pour créer un lien vers la section (#nom) : lettres minuscules, chiffres et tirets. |
Fonds
Le champ Fond de la section propose :
- Aucun, Clair, Sombre, Couleur principale : couleurs définies par le thème ;
- Couleur personnalisée : utilise le champ Couleur de fond ;
- Image : utilise le champ Image de fond, avec un Voile sur l’image (Aucun, Clair, Sombre) pour garder le texte lisible.
Les couleurs Clair, Sombre et Couleur principale, les tailles d’espacement et la largeur « Centrée » viennent des variables CSS du thème. Voir Styles des blocs.
Le Conteneur de grille
Le Conteneur de grille crée une mise en page CSS Grid visuellement. Chaque cellule est une zone où vous déposez des blocs.
Modèles de grille
Le champ Modèle de grille propose : Grille personnalisée, 2, 3 ou 4 colonnes égales, Barre latérale gauche + Contenu, Contenu + Barre latérale droite, et Mise en page Saint Graal.
Avec Grille personnalisée, vous pouvez saisir directement les valeurs CSS : colonnes (grid-template-columns, par exemple 1fr 1fr), rangées (grid-template-rows) et zones nommées (grid-template-areas).
L’éditeur de grille
Dans la liste des blocs, le conteneur affiche sa grille. Le bouton ? de son en-tête ouvre l’aide. En résumé :
| Pour… | Faites… |
|---|---|
| Créer une cellule | Cliquez et faites glisser sur la grille. |
| Redimensionner une cellule | Survolez-la et tirez une poignée sur un côté ou un coin. La grille s’agrandit si besoin. |
| Déplacer une cellule | Utilisez la poignée ⋮⋮ de son en-tête. Déposée sur une cellule occupée, les deux cellules s’échangent. |
| Supprimer une cellule | Maintenez Maj et survolez la cellule, puis cliquez sur le bouton de suppression. Son contenu est supprimé aussi. |
| Ajouter un bloc | Cliquez sur le bouton de l’en-tête de la cellule, ou faites glisser un bloc depuis une autre cellule. |
| Ajouter ou retirer des colonnes et rangées | Utilisez les boutons + et − autour de la grille. |
Quand des cellules se chevauchent, survolez une cellule pour la mettre en avant, ou cliquez dessus pour la garder en avant.
Espacements et alignements
La section Espacement & Alignement règle l’espace entre les cellules (Espacement de grille), l’alignement vertical et horizontal des éléments, et la Hauteur minimale du conteneur. Chaque cellule peut aussi avoir son propre alignement, ses classes CSS et une hauteur minimale.
Style et mobile
- Style du conteneur : classes CSS, couleur de fond et espacement interne (
padding). - Comportement réactif : le champ Empiler sur mobile fait passer les cellules les unes sous les autres en dessous d’une largeur d’écran (576, 768, 992 ou 1200 px), ou jamais.