--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/sections' title: 'Ajouter une section | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:31:38+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Une section est une bande de votre page, comme un héros en haut ou une bande grise de fonctions en dessous. Vous donnez à chaque section son propre fond, sa couleur de texte, son espacement et sa hauteur, puis vous la remplissez de lignes ou de contenu. Lisez cette page pour ajouter et régler des sections ; pour diviser une section en colonnes, voir Ajouter une ligne. tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ajouter une section' description: |- Une section est une bande de votre page, comme un héros en haut ou une bande grise de fonctions en dessous. Vous donnez à chaque section son propre fond, sa couleur de texte, son espacement et sa hauteur, puis vous la remplissez de lignes ou de contenu. Lisez cette page pour ajouter et régler des sections ; pour diviser une section en colonnes, voir Ajouter une ligne. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:31:38+0000' dateModified: '2026-10-24T09:09:48+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/learn-dxpr-builder/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/sections' description: |- Une section est une bande de votre page, comme un héros en haut ou une bande grise de fonctions en dessous. Vous donnez à chaque section son propre fond, sa couleur de texte, son espacement et sa hauteur, puis vous la remplissez de lignes ou de contenu. Lisez cette page pour ajouter et régler des sections ; pour diviser une section en colonnes, voir Ajouter une ligne. 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 --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Ajouter une section. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Donner à une section un arrière-plan couleur, photo ou dégradé](/fr/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Faire aller une section de bord à bord](/fr/hc/documentation/learn-dxpr-builder/design/full-width-layouts) Une section est une bande de votre page, comme un héros en haut ou une bande grise de fonctions en dessous. Vous donnez à chaque section son propre fond, sa couleur de texte, son espacement et sa hauteur, puis vous la remplissez de lignes ou de contenu. Lisez cette page pour ajouter et régler des sections ; pour diviser une section en colonnes, voir [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Ajouter une section L’exemple construit une section héros bleu marine pour une clinique. Une section gris clair à trois colonnes suit en dessous. 1. Cliquez sur **Ajouter des éléments** sur une page vide et choisissez **Section** depuis l’onglet **Mise en page**. Sous une section existante, cliquez sur **Add Section Below**, le plus rond en dessous. 2. Survolez la section, ouvrez **Plus** et choisissez **Paramètres**. 3. Réglez toute la section : ici **Align text center** sous **HTML classes**, un **Background** bleu marine et un **Font color** blanc. Cliquez sur **Save**. 4. Cliquez sur **+** sur la section pour y ajouter du contenu directement, ou ajoutez une **Ligne** pour la diviser en colonnes. 5. Cliquez sur **Save** dans la barre d’outils pour enregistrer la page. **Background** et **Font color** sont dans le panneau **Style** de la boîte de dialogue. Les nouveaux éléments atterrissent en haut de la section, donc ajoutez le plus bas d’abord : dans la vidéo, le bouton entre avant le titre. ## Ce que vous voyez La bande bleu marine remplit la fenêtre bord à bord. Son titre et son bouton restent dans une boîte centrée, le conteneur intérieur de la section. La section grise commence juste en dessous, avec ses trois colonnes de fonctions dans la même boîte centrée. Chaque nouvelle section porte déjà la classe **Vertical padding size 5 (py-5)**dans **HTML classes**. Cette classe lui donne l’espace au-dessus et au-dessous de son contenu. ## Régler votre section La boîte de dialogue de réglages a cinq panneaux : **General**, **Background effects**, **Animation**, **Style** et **Hover style**. Seules les sections ont **Background effects**. | Réglage | Panneau | Rôle | Défaut | |---|---|---|---| | **Full width** | General | Les lignes vont bord à bord au lieu d’aller dans le conteneur centré | Désactivé | | **100% height** | General | La section fait au moins la hauteur de la fenêtre du navigateur | Désactivé | | **Vertical centering** | General | Le contenu se place au milieu vertical d’une section plus haute que lui | Désactivé | | **HTML ID** | General | Un nom d’ancre, pour qu’un lien vers `#name` saute à cette section | Vide | | **HTML classes** | General | Classes utilitaires, comme **Align text center** ou une taille de remplissage | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** ou **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | La couleur derrière la section et la couleur de son texte | Aucune : le thème décide | Le fond couvre toujours toute la section, quoi que dise **Full width**. Les effets d’image déplacent le **Background image** choisi dans le panneau **Style** ; [Fonds](/hc/documentation/learn-dxpr-builder/design/backgrounds) montre chaque effet. Pour plus ou moins d’espace, remplacez **Vertical padding size 5 (py-5)**pour une taille plus petite ou **No vertical padding (py-0)**. Pour des pixels exacts, utilisez le modèle de boîte du panneau **Style**, comme l’explique [Espacement](/hc/documentation/learn-dxpr-builder/element-settings/spacing). ## Recettes de sections | Section | Réglages qui la créent | |---|---| | Héros | **100% height** et **Vertical centering** activés, un effet **Parallax image**, un titre et un bouton | | Fonctions | Un **Background** clair, un titre, puis une ligne de trois colonnes | | Appel à l’action | Un **Background** marqué, **Align text center**, une courte ligne et un bouton | | Témoignages | Un **Background** clair et une ligne de trois colonnes, chacune avec un **Block quote** | [Créer une section héros](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) construit la première pas à pas. ## Si rien ne s’affiche - **La page vide n’a pas de bouton Ajouter des éléments.** L’assistant de création de pages est désactivé, donc la page vide n’offre que **Choose a template**. Cliquez sur la zone vide pour ouvrir le sélecteur d’éléments, ou activez **Enable page creation assistant** à `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Il n’y a pas de bouton Add Section Below.** Seules les sections placées directement sur la page l’ont, pas une section dans une colonne ou un onglet. Cliquez plutôt sur **+** sur la colonne. - **Le centrage vertical ne change rien.** La section n’a que la hauteur de son contenu, donc aucun espace à centrer. Activez aussi **100% height**. - **Full width semble ne rien faire.** Le fond couvre déjà toute la section ; **Full width** ne fait que pousser les lignes vers ses bords. Avec un texte court dans une colonne, le changement se voit mal. - **Une section est apparue sans que vous l’ajoutiez.** Vous avez choisi une **Ligne** ou un élément de contenu sur une page vide, et chaque élément a besoin d’une section autour de lui. DXPR Builder en a ajouté une pour vous ; ouvrez ses réglages comme les autres. ## Et ensuite ? - [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) : diviser une section en colonnes. - [Fonds](/hc/documentation/learn-dxpr-builder/design/backgrounds) : effets parallaxe, dégradé et vidéo pour les sections. - [Mises en page pleine largeur](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) : quand laisser les lignes aller bord à bord.