Ajouter une mise en page imbriquée.

Vous pouvez mettre une ligne dans une colonne pour redécouper cette colonne, comme deux icônes côte à côte au-dessus d’un titre. Servez-vous-en quand une colonne a besoin d’une grille plus fine que la ligne autour. L’exemple ajoute une ligne de deux icônes à la colonne du milieu d’une ligne à trois colonnes. Pour votre première ligne, commencez par Ajouter une ligne.

Ajouter une mise en page imbriquée

1. Ajoutez une section avec une ligne et des colonnes.
2. Survolez une colonne et cliquez sur + sur sa barre Colonne.
3. Dans le sélecteur d’éléments, choisissez Ligne depuis l’onglet Mise en page.
4. La ligne imbriquée apparaît dans la colonne avec ses propres colonnes.
5. Ajoutez des éléments aux colonnes imbriquées comme d’habitude, par exemple une Icône dans chacune.
6. Cliquez sur Save dans la barre d’outils pour enregistrer la page.

Les nouveaux éléments atterrissent en haut de leur colonne, donc la ligne imbriquée se place au-dessus du texte de la colonne.

Ce que vous voyez

Le crayon et l’étoile se placent côte à côte en haut de la colonne du milieu, au-dessus du titre Design. Les colonnes extérieures ne changent pas. Dans l’éditeur, la ligne imbriquée a ses propres barres Ligne et Colonne, à l’intérieur de celles de la ligne extérieure.

Section
  Ligne (1/3 + 1/3 + 1/3)
    Colonne
      Texte : Discovery
    Colonne
      Ligne (imbriquée, 1/2 + 1/2)
        Colonne
          Icône : pencil
        Colonne
          Icône : star
      Texte : Design
    Colonne
      Texte : Delivery

Régler votre mise en page imbriquée

Une ligne imbriquée a la même icône de grille et les mêmes réglages que n’importe quelle ligne ; voir Ajouter une ligne. Ses largeurs sont des parts de la colonne parente, pas de la page. Une colonne demi-largeur qui contient une ligne imbriquée de deux moitiés donne deux zones d’un quart de largeur.

Sur les écrans de moins de 768 pixels, les colonnes imbriquées s’empilent comme les extérieures. Donnez à la ligne imbriquée une mise en page téléphone avec Add screen size si les icônes doivent rester côte à côte.

Profondeur d’imbrication maximale

Les lignes s’imbriquent sur trois niveaux : une ligne, une ligne dans une de ses colonnes, et une ligne de plus à l’intérieur. Un quatrième niveau est refusé. La même limite vaut pour chaque type de conteneur séparément, comme des Onglets dans des Onglets. Un type ne compte jamais dans la limite d’un autre type.

Deux niveaux couvrent la plupart des mises en page. Chaque niveau supplémentaire ajoute des barres de contrôle à viser et rétrécit l’espace pour le contenu.

Motifs d’imbrication courants

Si rien ne s’affiche

• Un avertissement dit que les lignes ne s’imbriquent que sur 3 niveaux. La colonne se trouve déjà dans deux lignes imbriquées, donc « Element cannot be added ». Ajoutez la ligne à une colonne un niveau au-dessus, ou utilisez un préréglage avec plus de colonnes sur la ligne extérieure.
• La ligne imbriquée se place au-dessus du texte au lieu du dessous. Les nouveaux éléments atterrissent en haut de leur colonne. Ouvrez Plus sur la barre de la ligne imbriquée et choisissez Move Down.
• Les icônes s’empilent sur téléphone. Les colonnes imbriquées s’empilent sous 768 pixels, comme toutes les colonnes. Cliquez sur l’icône de grille de la ligne imbriquée, puis sur Add screen size, et choisissez 1/2 + 1/2 pour Extra small (< 576px).

Et ensuite ?

• Calques positionnés : superposer des éléments comme la grille ne le peut pas.
• Ajouter une ligne : préréglages de colonnes et mise en page par taille d’écran.
• Onglets : empiler des panneaux de contenu au même endroit plutôt que côte à côte.