---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-produit'
title: 'Créer une page de produit | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:52+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page pour un produit. Une photo se tient à côté du nom, du prix et du bouton Buy now, suivis de trois fonctionnalités, d’une liste de caractéristiques et d’un appel à l’action commercial. Utilisez-la pour tout ce que vous vendez. Pour comparer plusieurs formules, ajoutez-y un tableau tarifaire.
  La vidéo crée la page d’un produit matériel appelé Insight Hub.
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 produit'
      description: |-
        Créez ici une page pour un produit. Une photo se tient à côté du nom, du prix et du bouton Buy now, suivis de trois fonctionnalités, d’une liste de caractéristiques et d’un appel à l’action commercial. Utilisez-la pour tout ce que vous vendez. Pour comparer plusieurs formules, ajoutez-y un tableau tarifaire.
        La vidéo crée la page d’un produit matériel appelé Insight Hub.
      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:52+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-produit'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-produit'
      description: |-
        Créez ici une page pour un produit. Une photo se tient à côté du nom, du prix et du bouton Buy now, suivis de trois fonctionnalités, d’une liste de caractéristiques et d’un appel à l’action commercial. Utilisez-la pour tout ce que vous vendez. Pour comparer plusieurs formules, ajoutez-y un tableau tarifaire.
        La vidéo crée la page d’un produit matériel appelé Insight Hub.
      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 produit.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer un tableau tarifaire](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire)
- [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone)
- [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing)

Créez ici une page pour un produit. Une photo se tient à côté du nom, du prix et du bouton **Buy now**, suivis de trois fonctionnalités, d’une liste de caractéristiques et d’un appel à l’action commercial. Utilisez-la pour tout ce que vous vendez. Pour comparer plusieurs formules, ajoutez-y un [tableau tarifaire](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire).

La vidéo crée la page d’un produit matériel appelé Insight Hub.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient une photo du produit.
- 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 colonne. C’est pourquoi la colonne de droite se construit à partir du bouton vers le haut.

## Étape 1 : ajouter le produit

1. Cliquez sur **Add Elements** sur la page vide et choisissez **Section** dans l’onglet **Layout**.
2. Cliquez sur **+** sur la section et choisissez **Row** ; elle arrive avec deux colonnes égales.
3. Cliquez sur **+** dans la colonne de gauche et choisissez **Image**. Cliquez sur **Select Image**, cochez la photo du produit et cliquez sur **Insert selected**. Saisissez l’**Alt attribute** dans le panneau **SEO** et cliquez sur **Save**.
4. Cliquez sur **+** dans la colonne de droite et choisissez **Button**. Définissez **Title** sur « Buy now », **Link** sur votre boutique, **Type** sur **Primary** et **Size** sur **Large**, puis cliquez sur **Save**.
5. Cliquez à nouveau sur **+** dans la colonne de droite et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez le prix comme **Heading 2** et cliquez sur **Save**.
6. Cliquez une fois de plus sur **+** et choisissez **Text** ; il arrive tout en haut. Saisissez le nom du produit comme **Heading 2**, ajoutez une ligne de description 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 la section 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 `plug` 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 `cloud` et la troisième avec `battery-full`.

## Étape 3 : ajouter les caractéristiques

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 **Text**. Saisissez « Specifications » comme **Heading 2**, puis une caractéristique par ligne, 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 « Talk to sales », **Link** sur `/contact`, **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 « Insight Hub from 249 euro » 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 :

- **Specification table** : insérez un tableau avec le bouton **Table** de la barre d’outils du texte plutôt qu’une ligne par caractéristique.
- **Gallery** : remplacez la photo unique par un **Image carousel** de photos du produit.
- **Plans** : reliez le prix à un [tableau tarifaire](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire).

## Ce que vous voyez

La photo du produit remplit la moitié gauche, avec le nom, le prix et le bouton **Buy now** à droite. Trois fonctionnalités centrées suivent, chacune une icône cerclée sur son nom et sa ligne. Les caractéristiques se tiennent sur un bandeau gris, et un bandeau violet conclut la page avec **Talk to sales**.

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

- **Le nom, le prix et le bouton sont dans le mauvais ordre.** Ils sont arrivés de haut en bas, et les nouveaux éléments arrivent en haut de leur colonne. Glissez-les à leur place par la poignée de glissement de leur barre de contrôle.
- **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**.
- **Le titre reste foncé sur violet.** L’élément Text n’a pas de **Font color** propre. Ouvrez son panneau **Style** et réglez **Font color** sur blanc.
- **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 un tableau tarifaire](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire) pour une section tarifaire à plusieurs niveaux
- [Élément icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone) pour les tailles et les styles d’icônes
- [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) pour une page de campagne autour du produit