Faire aller une section de bord à bord.
Vous pouvez laisser le contenu d’une section aller de bord à bord, ou le garder en boîte au centre pendant que l’arrière-plan remplit la fenêtre. Un interrupteur de la section décide : Full width. L’exemple construit une section grise à trois colonnes, puis active Full width pour étirer les colonnes. Pour les remplissages de couleur et photo, voir Arrière-plans.
La vidéo construit une section grise à 3 colonnes, puis laisse son contenu aller de bord à bord.
Construire une section en boîte
- Cliquez sur Add Elements dans la zone de contenu vide et choisissez Section dans l’onglet Layout.
- Survolez la section, ouvrez More et choisissez Settings.
- Ouvrez le panneau Style et choisissez un Background gris clair.
- Cliquez sur Save. Le gris couvre déjà la fenêtre.
- Cliquez sur + sur la section et choisissez Row.
- Cliquez l’icône de grille sur la ligne, choisissez la tuile à trois colonnes égales et cliquez sur Save.
- Dans chaque colonne, cliquez sur +, choisissez Text dans l’onglet Content, saisissez un Heading 4 et une ligne, et cliquez sur Save.
Les trois colonnes se trouvent désormais dans une boîte centrée sur le bandeau gris.
Activer Full width
- Ouvrez More sur la section et choisissez Settings.
- Dans le panneau General, activez Full width.
- Cliquez sur Save.
- Cliquez sur Save sur la barre d’outils de DXPR Builder.
- Ouvrez le menu d’affichage, l’icône en forme d’œil sur la barre d’outils, et choisissez Preview.
Ce que vous voyez
Le bandeau gris semble pareil qu’avant. Seule la boîte de contenu a changé : la première colonne commence désormais au bord gauche de la section et la dernière finit au bord droit.
Chaque section a deux parties : un élément extérieur qui porte l’arrière-plan, et une boîte intérieure qui contient les lignes. Full width ne change que la boîte intérieure. Désactivé, elle est centrée avec une largeur maximale ; activé, elle s’étire jusqu’aux bords de la section.
Paramètres
Le panneau General de la section contient trois interrupteurs de mise en page, tous désactivés par défaut :
| Paramètre | Rôle |
|---|---|
| Full width | Les lignes remplissent la section de bord à bord au lieu d’une boîte centrée |
| 100% height | La section fait au moins la hauteur de la fenêtre du navigateur |
| Vertical centering | Les lignes se trouvent au milieu vertical de la section |
Les lignes n’ont aucun réglage de largeur à elles ; la section décide.
Deux motifs
- Edge-to-edge background, boxed text : le héro courant. Laissez Full width désactivé et définissez l’arrière-plan dans le panneau Style ou Background effects.
- Edge-to-edge content : un bandeau de cartes ou d’images. Activez Full width et donnez aux colonnes du Padding si le texte est trop près du bord de la fenêtre.
Si vous ne voyez pas le changement
- Rien ne change quand vous activez Full width. Sur un écran étroit, comme un téléphone, la version en boîte remplit déjà la largeur. Élargissez la fenêtre du navigateur et regardez de nouveau.
- L’arrière-plan s’arrête avant les bords de la fenêtre. Votre thème place le contenu de la page dans une région en boîte, et la section ne peut remplir que cette région. Choisissez une mise en page ou une région pleine largeur dans votre thème.
- Le texte touche le bord de la fenêtre. C’est ce que fait Full width. Ajoutez du Padding dans le panneau Style des colonnes, ou laissez Full width désactivé.
Et ensuite ?
- Remplir une section de couleur, photo ou dégradé : styliser le bandeau derrière votre contenu.
- Adapter votre mise en page aux téléphones : contrôler le comportement des colonnes sur petits écrans.