---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing'
title: 'Créer une page de destination marketing | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:32+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page de destination pour une offre : un héros photo avec un bouton Request a demo, trois fonctionnalités avec icônes, deux témoignages et un appel à l’action final. Utilisez-la pour une page de campagne ou de produit avec un seul objectif. Pour un site entier sur une seule page à défilement, suivez plutôt Créer un site one-page à défilement.
  La vidéo crée une page pour un produit d’analyse appelé Insight.
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 page de destination marketing'
      description: |-
        Créez ici une page de destination pour une offre : un héros photo avec un bouton Request a demo, trois fonctionnalités avec icônes, deux témoignages et un appel à l’action final. Utilisez-la pour une page de campagne ou de produit avec un seul objectif. Pour un site entier sur une seule page à défilement, suivez plutôt Créer un site one-page à défilement.
        La vidéo crée une page pour un produit d’analyse appelé Insight.
      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:32+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/page-de-destination-marketing'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing'
      description: |-
        Créez ici une page de destination pour une offre : un héros photo avec un bouton Request a demo, trois fonctionnalités avec icônes, deux témoignages et un appel à l’action final. Utilisez-la pour une page de campagne ou de produit avec un seul objectif. Pour un site entier sur une seule page à défilement, suivez plutôt Créer un site one-page à défilement.
        La vidéo crée une page pour un produit d’analyse appelé Insight.
      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 page de destination marketing.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros)
- [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

Créez ici une page de destination pour une offre : un héros photo avec un bouton **Request a demo**, trois fonctionnalités avec icônes, deux témoignages et un appel à l’action final. Utilisez-la pour une page de campagne ou de produit avec un seul objectif. Pour un site entier sur une seule page à défilement, suivez plutôt [Créer un site one-page à défilement](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/site-one-page-a-defilement).

La vidéo crée une page pour un produit d’analyse appelé Insight.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient une photo large pour le héros.
- La page est ouverte dans le builder. Pour une nouvelle page, accédez à **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) et cliquez sur **Save**.
- Les nouveaux éléments arrivent en haut de leur section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les ensuite à leur place.

## Étape 1 : ajouter le héros

1. Cliquez sur **Add Elements** sur la page vide et choisissez **Section** dans l’onglet **Layout**. Survolez-la et ouvrez **Plus** > **Paramètres**.
2. Sous **HTML classes**, choisissez **Align text center**.
3. Ouvrez le panneau **Style**. Sous **Background image**, cliquez sur **Select Image**, cochez une photo et cliquez sur **Insert selected**. Réglez **Background style** sur **Cover**.
4. Choisissez un **Background** bleu marine foncé et un **Font color** blanc, puis cliquez sur **Save**.
5. Cliquez sur **+** sur la section et choisissez **Button**. Définissez **Title** sur « Request a demo », **Link** sur `/demo`, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
6. Cliquez à nouveau sur **+** et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez le titre comme **Heading 2** et le sous-titre en dessous. Réglez **Font color** sur blanc dans le panneau **Style** et cliquez sur **Save**. Le thème affiche 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).

## Étape 2 : ajouter les fonctionnalités

1. Survolez le héros et cliquez sur **Add Section Below**. Donnez à la nouvelle section la classe **Align text center**.
2. Cliquez sur **+** sur la section et choisissez **Row**. Cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **1/3 + 1/3 + 1/3** et cliquez sur **Save**.
3. Cliquez sur **+** dans la première colonne et choisissez **Text**. Saisissez le nom de la fonctionnalité comme **Heading 3**, ajoutez une ligne et cliquez sur **Save**.
4. Cliquez sur **+** dans la même colonne et choisissez **Icon** ; l’icône arrive au-dessus du texte. Choisissez le jeu **Font Awesome Free Solid**, recherchez `bolt` et cliquez sur l’icône. Réglez **Size** sur **Very Large (3x)**, ouvrez **Icon utilities**, réglez **Style** sur **Circle** et cliquez sur **Save**.
5. Répétez pour la deuxième colonne avec `chart-line` et la troisième avec `shield`.

## Étape 3 : ajouter les témoignages

1. Ajoutez une troisième section avec **Add Section Below**. Ouvrez ses **Plus** > **Paramètres**, choisissez un **Background** gris clair dans le panneau **Style** et cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Row** ; elle arrive avec deux colonnes égales.
3. Cliquez sur **+** dans chaque colonne et choisissez **Block quote**. Saisissez la citation, renseignez **Cite** avec le nom et la fonction de la personne, et cliquez sur **Save**.

## Étape 4 : ajouter l’appel à l’action

1. Ajoutez une quatrième section et ouvrez ses **Plus** > **Paramètres**. Choisissez **Align text center** sous **HTML classes**, puis le **Background** violet et le **Font color** blanc dans le panneau **Style**. Cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Button**. Définissez **Title** sur « Book a walkthrough », **Link** sur `/demo`, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
3. Cliquez à nouveau sur **+** et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez « See Insight on your own data » comme **Heading 2** et ajoutez une ligne. Réglez **Font color** sur blanc et cliquez sur **Save**.

## Étape 5 : enregistrer et prévisualiser

1. Cliquez sur **Save** dans la barre d’outils du builder.
2. Ouvrez le menu d’affichage (l’**eye icon**) et choisissez **Preview**.

## Aller plus loin

Non montré dans la vidéo :

- **Lead form** : insérez un bloc de formulaire web depuis l’onglet **Drupal Blocks** au lieu du dernier bouton ; voir [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Darker photo** : dans le panneau **Background effects** du héros, réglez **Background effect** sur **Gradient**. Choisissez la même couleur foncée à environ 60 % d’opacité comme **Start color** et **End color**
- **Taller hero** : donnez à la section héros 100 pixels de marge intérieure en haut et en bas dans le panneau **Style**
- **Start from a template** : sur une page vide, cliquez sur **Choose a template** et choisissez une mise en page de page de destination ; voir [Créer une page à partir d’un modèle](/fr/hc/documentation/apprendre-dxpr-builder/modeles-reutilisables/modeles-de-page)

## Ce que vous voyez

Le titre, le sous-titre et le bouton **Request a demo** sont centrés en blanc sur la photo. Trois fonctionnalités suivent, chacune une icône cerclée sur un titre court et une ligne. Deux citations se tiennent côte à côte sur un bandeau gris, et un bandeau violet conclut la page avec **Book a walkthrough**.

## Si la page ne s’affiche pas comme montré

- **Les icônes n’ont pas de cercle.** **Style** se trouve dans le panneau **Icon utilities**, pas dans **General**. Ouvrez les réglages de l’icône, ouvrez **Icon utilities** et réglez **Style** sur **Circle**.
- **La photo du héros ne remplit pas la section.** **Background style** est encore sur **Theme defaults**. Ouvrez le panneau **Style** de la section et réglez-le sur **Cover**.
- **Une icône se trouve sous le texte de sa fonctionnalité.** L’icône est arrivée avant le texte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez l’icône au-dessus du texte par la poignée de glissement de sa barre de contrôle.
- **Vos modifications ont disparu après un rechargement.** Vous avez quitté la page avant de cliquer sur **Save** dans la barre d’outils du builder. Si Save affiche une erreur, voir [Les modifications ne s’enregistrent pas](/fr/hc/documentation/apprendre-dxpr-builder/depannage/enregistrement-echoue).

## Et ensuite ?

- [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros) pour les options de héros pleine hauteur et parallaxe
- [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms) pour ajouter un formulaire d’inscription
- [Les tests A/B et multivariés](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) pour tester deux versions de la page