---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire'
title: 'Créer un tableau tarifaire | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:48+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici un tableau tarifaire : trois offres côte à côte, chacune un panneau avec un prix, une liste de fonctionnalités et un bouton pleine largeur, avec l’offre du milieu mise en avant. Utilisez-le sur une page tarifaire ou dans une page de produit. Pour la page de produit complète autour, suivez Créer une page de produit.
  La vidéo crée trois offres pour un outil 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 un tableau tarifaire'
      description: |-
        Créez ici un tableau tarifaire : trois offres côte à côte, chacune un panneau avec un prix, une liste de fonctionnalités et un bouton pleine largeur, avec l’offre du milieu mise en avant. Utilisez-le sur une page tarifaire ou dans une page de produit. Pour la page de produit complète autour, suivez Créer une page de produit.
        La vidéo crée trois offres pour un outil 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:48+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/tableau-tarifaire'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/tableau-tarifaire'
      description: |-
        Créez ici un tableau tarifaire : trois offres côte à côte, chacune un panneau avec un prix, une liste de fonctionnalités et un bouton pleine largeur, avec l’offre du milieu mise en avant. Utilisez-le sur une page tarifaire ou dans une page de produit. Pour la page de produit complète autour, suivez Créer une page de produit.
        La vidéo crée trois offres pour un outil 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 un tableau tarifaire.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer une page de produit](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-produit)
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte)
- [Ajouter un panneau](/fr/hc/documentation/apprendre-dxpr-builder/elements/panneau)

Créez ici un tableau tarifaire : trois offres côte à côte, chacune un panneau avec un prix, une liste de fonctionnalités et un bouton pleine largeur, avec l’offre du milieu mise en avant. Utilisez-le sur une page tarifaire ou dans une page de produit. Pour la page de produit complète autour, suivez [Créer une page de produit](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-produit).

La vidéo crée trois offres pour un outil de reporting.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- 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 conteneur : dans chaque panneau, le bouton se place donc avant le prix.

## Étape 1 : ajouter la section et les colonnes

1. Cliquez sur **Add Elements** sur la page vide et choisissez **Section** dans l’onglet **Layout**.
2. Survolez la section et ouvrez **Plus** > **Paramètres**. Sous **HTML classes**, choisissez **Align text center**. Ouvrez le panneau **Style**, choisissez un **Background** gris clair et cliquez sur **Save**.
3. Cliquez sur **+** sur la section et choisissez **Row** ; elle arrive avec deux colonnes égales.
4. Cliquez sur l’icône de grille de la ligne (**Column layout**), choisissez le préréglage **1/3 + 1/3 + 1/3** et cliquez sur **Save**.

## Étape 2 : créer la première offre

1. Cliquez sur **+** dans la première colonne et choisissez **Panel** dans l’onglet **Content**.
2. Survolez le panneau et ouvrez **Plus** > **Paramètres**. Réglez le **Title** sur « Starter », gardez le **Type** sur **DXPR** et cliquez sur **Save**.
3. Cliquez sur **+** sur le panneau et choisissez **Button**. Définissez **Title** sur « Choose plan », **Link** sur `/signup` et **Type** sur **Primary**. Activez **Block button** pour qu’il remplisse la colonne, puis cliquez sur **Save**.
4. Cliquez à nouveau sur **+** sur le panneau et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez le prix comme **Heading 2**, ajoutez les fonctionnalités une par ligne et cliquez sur **Save**.

## Étape 3 : créer les autres offres

1. Répétez l’étape 2 dans la deuxième colonne pour « Professional ». Dans le panneau **Style** du panneau, choisissez le **Background** violet, et réglez le **Type** du bouton sur **Success**, pour que l’offre ressorte.
2. Répétez l’étape 2 dans la troisième colonne pour « Enterprise », avec « Custom pricing » comme prix.

**Tip**

La colonne du milieu attire le regard. Placez-y l’offre que vous voulez le plus vendre.

## Étape 4 : ajouter le titre

1. Cliquez sur **+** sur la section et choisissez **Text** ; il arrive au-dessus de la ligne.
2. Saisissez « Choose your plan » comme **Heading 2**, ajoutez une ligne comme « Simple monthly pricing. Cancel any time. » 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 :

- **Four plans** : choisissez plutôt le préréglage **1/4 + 1/4 + 1/4 + 1/4** et créez une quatrième colonne.
- **Most popular badge** : ajoutez un élément **Text** en haut du panneau mis en avant avec « Most popular » en gras.
- **Annual and monthly** : ajoutez une ligne **Text** au-dessus de la ligne comme « Monthly \| Annual (save 20%) ». La ligne est statique ; un basculeur en direct exige l’élément **HTML** avec votre propre script.
- **Feature ticks** : collez une coche avant chaque ligne de fonctionnalité, ou ajoutez un élément **Icon** au-dessus de la liste.

## Ce que vous voyez

« Choose your plan » trône centré au-dessus de trois offres sur un bandeau gris. Chaque panneau affiche son nom dans la barre de titre, le prix, trois fonctionnalités et un bouton **Choose plan** pleine largeur. L’offre du milieu ressort en violet avec un bouton vert.

## Si les offres ne s’affichent pas comme montré

- **Un panneau s’ouvre sans boîte de dialogue des réglages.** Les panneaux s’ouvrent vides, sans boîte de dialogue. Survolez le panneau et ouvrez **Plus** > **Paramètres** pour régler son **Title**.
- **Un Type de panneau comme Primary n’affiche aucune couleur.** Votre thème ne stylise pas ce type de panneau. Gardez le **Type** sur **DXPR** et choisissez un **Background** dans le panneau **Style** du panneau, comme à l’étape 3.
- **Les boutons ne sont larges que comme leur texte.** **Block button** est désactivé. Ouvrez les réglages de chaque bouton et activez-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 page de produit](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-produit) pour une page complète avec fonctionnalités et tarifs
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) pour un autre style de carte
- [Élément panneau](/fr/hc/documentation/apprendre-dxpr-builder/elements/panneau) pour tous les réglages de panneau