---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas'
title: 'Rédiger une étude de cas | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:05+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ici, vous rédigez un projet client en trois parties : le défi, la
  solution et les résultats. Vous terminez avec sept bandes : un héros
  photo, un aperçu avec le chiffre principal, le défi, la solution à côté
  d’une photo, trois compteurs, une citation et un appel à l’action. Pour
  montrer beaucoup de projets sur une page, suivez plutôt
  Créer une galerie de portfolio.
  La vidéo rédige le travail d’une agence pour Northwind Retail.
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: 'Rédiger une étude de cas'
      description: |-
        Ici, vous rédigez un projet client en trois parties : le défi, la
        solution et les résultats. Vous terminez avec sept bandes : un héros
        photo, un aperçu avec le chiffre principal, le défi, la solution à côté
        d’une photo, trois compteurs, une citation et un appel à l’action. Pour
        montrer beaucoup de projets sur une page, suivez plutôt
        Créer une galerie de portfolio.
        La vidéo rédige le travail d’une agence pour Northwind Retail.
      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:05+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/etude-de-cas'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas'
      description: |-
        Ici, vous rédigez un projet client en trois parties : le défi, la
        solution et les résultats. Vous terminez avec sept bandes : un héros
        photo, un aperçu avec le chiffre principal, le défi, la solution à côté
        d’une photo, trois compteurs, une citation et un appel à l’action. Pour
        montrer beaucoup de projets sur une page, suivez plutôt
        Créer une galerie de portfolio.
        La vidéo rédige le travail d’une agence pour Northwind Retail.
      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) # Rédiger une étude de cas.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter un bloc de citation](/fr/hc/documentation/apprendre-dxpr-builder/elements/bloc-de-citation)
- [Ajouter un compteur de nombres](/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-de-nombres)
- [Créer une galerie de portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio)

Ici, vous rédigez un projet client en trois parties : le défi, la solution et les résultats. Vous terminez avec sept bandes : un héros photo, un aperçu avec le chiffre principal, le défi, la solution à côté d’une photo, trois compteurs, une citation et un appel à l’action. Pour montrer beaucoup de projets sur une page, suivez plutôt [Créer une galerie de portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio).

La vidéo rédige le travail d’une agence pour Northwind Retail.

  ## Avant de commencer

- Votre rôle a la permission **Edit with DXPR Builder**.
- La médiathèque contient une photo large pour le héros et une photo de ce que vous avez livré.
- 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**.
- Les nouveaux éléments atterrissent en haut de leur section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les en place ensuite.

## Étape 1 : ajouter le héros

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**.
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 sombre et un **Font color**blanc, puis cliquez sur **Save**. La couleur s’affiche pendant le chargement de la photo.
5. Cliquez sur **+** sur la section et choisissez **Bouton**. Réglez **Title** sur « Visit the site », **Link** vers l’URL du client, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
6. Cliquez à nouveau sur **+** et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez le nom du client en **Heading 2** et un résumé d’une ligne en dessous. Réglez **Font color** sur blanc dans le panneau **Style** et cliquez sur **Save**. 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).

## Étape 2 : ajouter l’aperçu

1. Survolez le héros et cliquez sur **Add Section Below**. Ajoutez une **Ligne** à la nouvelle section, cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **2/3 + 1/3** et cliquez sur **Save**.
2. Cliquez sur **+** dans la colonne large et choisissez **Texte**. Tapez « Overview » en **Heading 2**, ajoutez le résumé et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne étroite et choisissez **Texte**. Tapez le libellé de la mesure, « More online orders », et cliquez sur **Save**.
4. Cliquez à nouveau sur **+** dans la colonne étroite et choisissez **Compteur de nombres** ; il atterrit au-dessus du libellé. Réglez **End** sur 32, **Suffix** sur %, **Thousands separator** sur **Comma**, réglez **Speed** sur 2500, puis cliquez sur **Save**.

Le compteur n’a pas de champ de libellé à lui ; l’élément Texte en dessous fait ce travail.

## Étape 3 : ajouter le défi

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 **Texte**. Tapez « The challenge » en **Heading 2**, décrivez le problème et cliquez sur **Save**.

## Étape 4 : ajouter la solution

1. Ajoutez une quatrième section, puis une **Ligne** ; elle arrive avec deux colonnes égales.
2. Cliquez sur **+** dans la colonne gauche et choisissez **Texte**. Tapez « The solution » en **Heading 2**, décrivez ce que vous avez construit et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne droite et choisissez **Image**. Cliquez sur **Select Image**, cochez une photo du livrable et cliquez sur **Insert selected**. Tapez l’**Alt attribute** dans le panneau **SEO**et cliquez sur **Save**.

## Étape 5 : ajouter les résultats

1. Ajoutez une cinquième section et ouvrez ses **Plus** > **Paramètres**. Choisissez **Align text center** sous **HTML classes**, puis le **Background** bleu marine et le **Font color** blanc dans le panneau **Style**. Cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Ligne**. 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. Dans chaque colonne, ajoutez d’abord un libellé **Texte**, puis un **Compteur de nombres** au-dessus, comme à l’étape 2 : **End** 32 avec **Suffix** %, **End** 2 avec **Suffix** s, et **End** 15000.

## Étape 6 : ajouter la citation

1. Ajoutez une sixième section.
2. Cliquez sur **+** sur la section et choisissez **Bloc de citation**. Tapez les mots du client, remplissez **Cite** avec son nom et son rôle, et cliquez sur **Save**.

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

1. Ajoutez une septiè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 **Bouton**. Réglez **Title** sur « Contact us », **Link** sur `/contact`, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
3. Cliquez à nouveau sur **+** et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez « Ready to get started? » en **Heading 2** et ajoutez une ligne. Réglez **Font color** sur blanc et cliquez sur **Save**.

## Étape 8 : 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**) et choisissez **Preview**.

## Ce que vous voyez

Le nom du client et le bouton **Visit the site** se placent centrés sur la photo. L’aperçu montre 32 % à côté de son résumé ; les visiteurs le voient compter quand il entre dans la vue. Le défi se dresse sur une bande grise, et la solution se tient à côté de sa photo.

Sur la bande bleu marine, les trois résultats comptent à leur entrée dans la vue : 32 %, 2s et 15 000. La citation du client et une bande **Contact us**violette ferment la page.

## Si vous ne voyez pas la page comme montrée

- **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**.
- **Le dernier compteur affiche 15000 sans séparateur de milliers.** **Thousands separator** est encore sur **None**. Ouvrez les réglages du compteur et choisissez **Comma**.
- **Un libellé se trouve au-dessus de son compteur.** Le compteur est entré avant son libellé, et les nouveaux éléments atterrissent en haut de leur colonne. Glissez le libellé sous le compteur par la poignée de glissement sur sa barre de contrôle.
- **Vos changements 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 ?

- [Élément bloc de citation](/fr/hc/documentation/apprendre-dxpr-builder/elements/bloc-de-citation) pour les options de style des témoignages
- [Élément compteur de nombres](/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-de-nombres) pour chaque réglage de compteur
- [Portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio) pour lister toutes vos études de cas sur une page