--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/mises-en-page-pleine-largeur' title: 'Faire aller une section de bord à bord | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:20+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Faire aller une section de bord à bord' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:20+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/mises-en-page-pleine-largeur' articleSection: 'Guides de design' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/mises-en-page-pleine-largeur' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Faire aller une section de bord à bord. Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design ## Dans ce guide Guides associés - [Donner à une section un arrière-plan couleur, photo ou dégradé](/fr/hc/documentation/apprendre-dxpr-builder/design/arriere-plans) - [Adapter votre mise en page aux téléphones](/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive) 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](/fr/hc/documentation/apprendre-dxpr-builder/design/arriere-plans). La vidéo construit une section grise à 3 colonnes, puis laisse son contenu aller de bord à bord. ## Construire une section en boîte 1. Cliquez sur **Add Elements** dans la zone de contenu vide et choisissez **Section** dans l’onglet **Layout**. 2. Survolez la section, ouvrez **More** et choisissez **Settings**. 3. Ouvrez le panneau **Style** et choisissez un **Background** gris clair. 4. Cliquez sur **Save**. Le gris couvre déjà la fenêtre. 5. Cliquez sur **+** sur la section et choisissez **Row**. 6. Cliquez l’icône de grille sur la ligne, choisissez la tuile à trois colonnes égales et cliquez sur **Save**. 7. 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 1. Ouvrez **More** sur la section et choisissez **Settings**. 2. Dans le panneau **General**, activez **Full width**. 3. Cliquez sur **Save**. 4. Cliquez sur **Save** sur la barre d’outils de DXPR Builder. 5. 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é](/fr/hc/documentation/apprendre-dxpr-builder/design/arriere-plans) : styliser le bandeau derrière votre contenu. - [Adapter votre mise en page aux téléphones](/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive) : contrôler le comportement des colonnes sur petits écrans.