---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros'
title: 'Créer une section héros | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:20+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ici, vous construisez un héros plein écran : une photo de fond, un
  titre, une ligne d’appui et un bouton, avec la photo qui bouge moins
  vite que la page au défilement. Utilisez-le en haut de toute page. Pour
  construire toute la page autour, suivez
  Créer une page de destination marketing
  ensuite.
  La vidéo construit le héros d’un produit de reporting.
tags:
  - 'Follow a tutorial'
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: 'Créer une section héros'
      description: |-
        Ici, vous construisez un héros plein écran : une photo de fond, un
        titre, une ligne d’appui et un bouton, avec la photo qui bouge moins
        vite que la page au défilement. Utilisez-le en haut de toute page. Pour
        construire toute la page autour, suivez
        Créer une page de destination marketing
        ensuite.
        La vidéo construit le héros d’un produit de reporting.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:24: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/tutoriels/section-heros'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros'
      description: |-
        Ici, vous construisez un héros plein écran : une photo de fond, un
        titre, une ligne d’appui et un bouton, avec la photo qui bouge moins
        vite que la page au défilement. Utilisez-le en haut de toute page. Pour
        construire toute la page autour, suivez
        Créer une page de destination marketing
        ensuite.
        La vidéo construit le héros d’un produit de reporting.
      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) /[Suivre un tutoriel](/fr/hc/documentation/learn-dxpr-builder/tutorials/overview) # Créer une section héros.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing)
- [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections)
- [Modifier l’aspect d’un élément dans le panneau Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style)

Ici, vous construisez un héros plein écran : une photo de fond, un titre, une ligne d’appui et un bouton, avec la photo qui bouge moins vite que la page au défilement. Utilisez-le en haut de toute page. Pour construire toute la page autour, suivez [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing)ensuite.

La vidéo construit le héros d’un produit de reporting.

  ## Avant de commencer

- Votre rôle a la permission **Edit with DXPR Builder**.
- La médiathèque contient une photo large, d’au moins 1920 pixels de large.
- La page est ouverte dans le builder. Pour une nouvelle, accédez à **Content** > **Add content** > **Landing Page**(`/node/add/landing_page`) et cliquez sur **Save**.

## Étape 1 : ajouter la section

1. Cliquez sur **Ajouter des éléments** sur la page vide et choisissez **Section** depuis l’onglet **Mise en page**. Survolez-la et ouvrez **Plus** > **Paramètres**.
2. Sous **HTML classes**, choisissez **Align text center**, pour que le titre, le texte et le bouton se centrent ensemble.
3. Activez **100% height** pour que le héros remplisse l’écran, et **Vertical centering** pour que le contenu se place au milieu.
4. Ouvrez le panneau **Style**. Sous **Background image**, cliquez sur **Select Image**, cochez une photo large et cliquez sur **Insert selected**.
5. Réglez **Background style** sur **Cover** pour que la photo remplisse la section.
6. Choisissez une couleur **Background** sombre, qui s’affiche pendant le chargement de la photo. Réglez **Font color** sur blanc, puis cliquez sur **Save**.

**Astuce**

Compressez la photo sous 500 Ko pour que le héros charge vite.

## Étape 2 : ajouter le bouton

1. Cliquez sur **+** sur la section et choisissez **Bouton** depuis l’onglet **Contenu**.
2. Réglez **Title** sur « Start free trial », **Link** sur `/trial`, **Type** sur **Light** pour le contraste sur la photo et **Size** sur **Large**, puis cliquez sur **Save**.

## Étape 3 : ajouter le titre

1. Cliquez à nouveau sur **+** sur la section et choisissez **Texte**depuis l’onglet **Contenu**. Il atterrit au-dessus du bouton, car les nouveaux éléments atterrissent en haut.
2. Tapez votre titre, « Reporting that keeps up with your team », et choisissez **Heading 2** dans la liste des titres. Le thème imprime le titre de la page comme Heading 1 de la page. Pour faire de ce titre le Heading 1 à la place, voir [Créer des pages optimisées pour le référencement](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/seo#step-1-start-the-content-at-heading-2).
3. Ajoutez une ligne d’appui : « Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required. »
4. Dans le panneau **Style**, réglez **Font color** sur blanc, puis cliquez sur **Save**.

## Étape 4 : ajouter la parallaxe

1. Survolez la section et ouvrez à nouveau **Plus** > **Paramètres**.
2. Ouvrez le panneau **Background effects** et réglez **Background effect**sur **Parallax image**. **Parallax speed** démarre à 20 ; glissez-le à 35 pour un effet plus fort et cliquez sur **Save**.

## Étape 5 : ajouter du contenu sous le héros

1. Survolez le héros et cliquez sur **Add Section Below**, pour que la page ait du contenu à défiler.
2. Cliquez sur **+** sur la nouvelle section et choisissez **Texte**depuis l’onglet **Contenu**. Tapez un titre et un court paragraphe, réglez la première ligne sur **Heading 2** et cliquez sur **Save**.

## Étape 6 : enregistrer et prévisualiser

1. Cliquez sur **Save** dans la barre d’outils du builder.
2. Ouvrez le menu d’affichage (l’**icône en forme d’œil**), choisissez **Preview** et défilez vers le bas.

## Aller plus loin

Non montré dans la vidéo :

- **Superposition** : réglez **Background effect** sur **Gradient**et choisissez un **Start color** et un **End color** sombres à environ 50 % d’opacité. Le texte reste lisible sur toute photo. L’effet ne tient qu’une valeur, donc une superposition remplace la parallaxe.
- **Héros plus court** : désactivez **100% height** et donnez à la section son propre remplissage haut et bas dans le panneau **Style**, par exemple 100 pixels.
- **Bouton large** : activez **Block button** pour un bouton aussi large que sa colonne.

## Variantes

Alternatives à la construction de la vidéo :

### Héros à fond vidéo

1. Dans le panneau **Background effects**, réglez **Background effect**sur **YouTube video**.
2. Collez l’URL de la vidéo dans **YouTube video URL**.
3. Sous **Video options**, cochez **Loop** et **Disable on mobile devices** ; laissez l’audio coupé.

### Héros en seul dégradé

Sautez l’image de fond et utilisez l’effet **Gradient** avec deux couleurs de marque unies pour un héros qui charge vite.

### Héros divisé

1. Ajoutez une **Ligne** dans la section ; elle arrive avec deux colonnes égales.
2. Placez le texte et le bouton dans la colonne gauche et une image dans la colonne droite.

## Ce que vous voyez

La photo remplit l’écran avec votre titre, votre ligne d’appui et le bouton **Start free trial** centrés en blanc dessus. Quand vous défilez vers la deuxième section, la photo bouge moins vite que la page.

## Si le héros ne s’affiche pas comme montré

- **Le héros n’a que la hauteur de son texte.** **100% height** est désactivé. Activez-le dans les réglages de la section et cliquez sur **Save**.
- **La photo reste fixe au défilement.** **Background effect** est encore sur **Simple image**, **Parallax speed** est à 0, ou rien ne se trouve sous le héros vers quoi défiler. Réglez **Parallax image**, glissez **Parallax speed** au-dessus de 0 et ajoutez la deuxième section de l’étape 5.
- **Le titre reste sombre sur la photo.** L’élément Texte n’a pas de **Font color** à lui. Ouvrez son panneau **Style** et réglez **Font color**sur blanc.

## Et ensuite ?

- [Page de destination](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) pour construire une page complète autour de votre héros
- [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections) pour les options de mise en page de la section
- [Référence de l’onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) pour toutes les options de style