Ajouter une ligne.
Une ligne divise une section en colonnes, pour mettre du contenu côte à côte : trois services, une photo à côté de son texte, une barre latérale à côté d’un article. Vous choisissez la division parmi douze préréglages et pouvez donner aux téléphones leur propre mise en page. Lisez cette page pour ajouter une ligne ; pour une ligne dans une colonne, voir Ajouter une mise en page imbriquée.
Ajouter une ligne
L’exemple ajoute une ligne de trois colonnes à une section, une pour chaque service offert par une équipe.
- Cliquez sur + sur une section pour ouvrir le sélecteur d’éléments.
- Choisissez Ligne depuis l’onglet Mise en page. Elle arrive avec deux colonnes égales.
- Cliquez sur l’icône de grille (Column layout) sur la barre de contrôle de la ligne, choisissez un préréglage de colonnes comme trois colonnes égales, et cliquez sur Save.
- Cliquez sur + dans une colonne pour y ajouter du contenu.
- Cliquez sur Save dans la barre d’outils pour enregistrer la page.
L’icône de grille se trouve juste après la poignée de glissement de la ligne. Un préréglage change les colonnes dès que vous cliquez dessus ; Cancel remet l’ancienne mise en page.
Ce que vous voyez
Les trois services se placent côte à côte, chaque colonne faisant un tiers de la largeur de la section. Sur les écrans de moins de 768 pixels, les colonnes s’empilent : chacune prend toute la largeur, dans l’ordre de la page.
Les colonnes n’ont que la hauteur de leur contenu, donc une courte colonne finit avant ses voisines. Vous le remarquez dès que les colonnes ont une couleur de fond ; Equal-height columns les égalise.
Régler votre ligne
Mises en page de colonnes
L’icône de grille ouvre un panneau pour chaque taille d’écran avec sa propre mise en page. Chaque panneau montre ces douze préréglages en tuiles :
| Préréglage | Mise en page |
|---|---|
| 1/1 | Une colonne pleine largeur |
| 1/2 + 1/2 | Deux colonnes égales |
| 1/3 + 1/3 + 1/3 | Trois colonnes égales |
| 1/4 + 1/4 + 1/4 + 1/4 | Quatre colonnes égales |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Six colonnes égales |
| 1/4 + 1/2 + 1/4 | Étroite, large, étroite |
| 1/6 + 4/6 + 1/6 | Étroite, très large, étroite |
| 1/4 + 3/4 | Un quart à gauche, trois quarts à droite |
| 3/4 + 1/4 | Trois quarts à gauche, un quart à droite |
| 2/3 + 1/3 | Large à gauche, étroite à droite |
| 1/3 + 2/3 | Étroite à gauche, large à droite |
| 5/12 + 7/12 | Un peu étroite à gauche, un peu large à droite |
Pour toute autre division, cliquez sur Custom Layout et tapez les
largeurs en fractions, comme 1/6 + 5/6. Les largeurs dont la somme
dépasse 1 passent à la ligne. Quand vous rouvrez la boîte de dialogue,
Custom Layout est marqué et montre la mise en page, comme
Custom Layout (1/6 + 5/6).
Une mise en page par taille d’écran
Le premier panneau, Medium devices (≥ 768px), règle la mise en page depuis les tablettes. Pour changer aussi les téléphones, cliquez sur Add screen size en haut de la boîte de dialogue. Un panneau pour Extra small (< 576px) s’ouvre ; choisissez une autre taille dans sa liste au besoin, puis un préréglage. Remove screen size supprime à nouveau un panneau.
Réglages des lignes et colonnes
Ouvrez Plus > Paramètres sur la barre de contrôle de la ligne, ou sur la barre de la colonne pour le réglage de colonne.
| Réglage | Élément | Rôle | Défaut |
|---|---|---|---|
| Equal-height columns | Ligne | Étire chaque colonne à la hauteur de la plus haute | Désactivé |
| Mirror row | Ligne | Affiche les colonnes en ordre inverse depuis 768 pixels ; les colonnes empilées gardent l’ordre de la page | Désactivé |
| Vertical centering | Colonne | Centre le contenu dans une colonne plus haute que lui | Désactivé |
Mirror row convient à une page de lignes alternées : photo à gauche, puis photo à droite, tandis que les téléphones montrent toujours la photo d’abord.
Déplacer et retirer des colonnes
Glissez une colonne par sa poignée, ou utilisez Plus > Move Left ou Move Right sur sa barre. Les colonnes n’ont pas de Delete : choisissez plutôt un préréglage avec moins de colonnes. Le contenu ne se perd jamais ainsi ; il va dans la dernière colonne restante.
Si rien ne s’affiche
- Le centrage vertical d’une colonne ne change rien. La colonne n’a que la hauteur de son contenu, donc aucun espace à centrer. Activez Equal-height columns dans les réglages de la ligne.
- Les colonnes s’empilent sur téléphone. Sous 768 pixels, c’est le défaut. Cliquez sur l’icône de grille, puis sur Add screen size, et choisissez un préréglage pour Extra small (< 576px).
- Du texte a sauté dans une autre colonne. Vous avez choisi un préréglage avec moins de colonnes, et le contenu des colonnes retirées est allé dans la dernière. Appuyez sur Ctrl+Z (Cmd+Z sur Mac) pour annuler le changement.
- Une colonne n’a pas de Delete dans son menu Plus. Les colonnes se retirent via la mise en page. Cliquez sur l’icône de grille de la ligne et choisissez un préréglage avec moins de colonnes.
Et ensuite ?
- Ajouter une mise en page imbriquée : mettre une ligne dans une colonne pour une grille plus fine.
- Sections : donner à la bande autour de vos colonnes son propre fond.
- Design adaptatif : comment votre mise en page s’adapte à chaque taille d’écran.