---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-a-propos'
title: 'Créer une page « à propos » | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:23:53+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page « à propos » : un en-tête de mission, votre histoire à côté d’une photo, trois chiffres qui défilent, des cartes d’équipe et un appel à l’action final. Utilisez-la quand une seule page doit dire aux visiteurs qui vous êtes. Pour une page qui répertorie chaque collègue, suivez plutôt Créer un annuaire d’équipe.
  La vidéo crée la page pour un studio de design à Rotterdam.
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-24T19:36:26+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 « à propos »'
      description: |-
        Créez ici une page « à propos » : un en-tête de mission, votre histoire à côté d’une photo, trois chiffres qui défilent, des cartes d’équipe et un appel à l’action final. Utilisez-la quand une seule page doit dire aux visiteurs qui vous êtes. Pour une page qui répertorie chaque collègue, suivez plutôt Créer un annuaire d’équipe.
        La vidéo crée la page pour un studio de design à Rotterdam.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:23:53+0000'
      dateModified: '2026-10-24T19:36:26+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-a-propos'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-a-propos'
      description: |-
        Créez ici une page « à propos » : un en-tête de mission, votre histoire à côté d’une photo, trois chiffres qui défilent, des cartes d’équipe et un appel à l’action final. Utilisez-la quand une seule page doit dire aux visiteurs qui vous êtes. Pour une page qui répertorie chaque collègue, suivez plutôt Créer un annuaire d’équipe.
        La vidéo crée la page pour un studio de design à Rotterdam.
      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 « à propos ».

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer un annuaire d’équipe](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/annuaire-d-equipe)
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte)

Créez ici une page « à propos » : un en-tête de mission, votre histoire à côté d’une photo, trois chiffres qui défilent, des cartes d’équipe et un appel à l’action final. Utilisez-la quand une seule page doit dire aux visiteurs qui vous êtes. Pour une page qui répertorie chaque collègue, suivez plutôt [Créer un annuaire d’équipe](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/annuaire-d-equipe).

La vidéo crée la page pour un studio de design à Rotterdam.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient une photo de votre bureau, de votre équipe ou de votre produit.
- La page existe : accédez à **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`), saisissez « About Us » comme **Title** et cliquez sur **Save**. La page s’ouvre avec le builder dessus.
- Sur DXPR CMS, masquez le titre de page du thème sur cette page : dans son formulaire de modification, ouvrez **DXPR Theme Settings** et cochez **Page Title** sous **DXPR Hide Regions**. Le **Title** du Jumbotron devient alors le seul Heading 1 de la page, comme l’explique [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).
- Les nouveaux éléments arrivent en haut de leur section ou colonne. Ajoutez les lignes d’une section, ou les éléments d’une colonne, dans l’ordre inverse, ou glissez-les ensuite à leur place.

## Étape 1 : ajouter un en-tête de mission

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**. Ouvrez le panneau **Style**, choisissez une pastille **Background** foncée et cliquez sur **Save**.
3. Cliquez sur **+** sur la section et choisissez **Jumbotron** dans l’onglet **Content**.
4. Saisissez votre raison d’être comme **Title** : « We build websites people enjoy using ».
5. Saisissez une phrase d’appui dans le champ **Lead** : « A 24-person studio in Rotterdam working with brands across Europe since 2012. »
6. Réglez **Type** sur **Primary** pour un texte blanc sur votre couleur primaire, puis cliquez sur **Save**.

## Étape 2 : raconter l’histoire de votre entreprise

1. Survolez la section et cliquez sur **Add Section Below**, le **+** en dessous.
2. Cliquez sur **+** sur la nouvelle section et choisissez **Row** ; elle arrive avec deux colonnes égales. Cliquez sur l’icône de grille (**Column layout**) de la ligne, choisissez le préréglage **2/3 + 1/3** et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne la plus large et choisissez **Text**. Saisissez « Our story » comme **Heading 2**, puis deux courts paragraphes : vos débuts et le déroulement d’un projet. Cliquez sur **Save**.
4. Cliquez sur **+** dans la colonne la plus étroite et choisissez **Image**.
5. Cliquez sur **Select Image**, recherchez dans la médiathèque avec **Apply filters**, cochez une photo de votre bureau ou de votre équipe et cliquez sur **Insert selected**.
6. Ouvrez le panneau **SEO**, renseignez l’**Alt attribute** et cliquez sur **Save**.

**Tip**

Restez bref et aérez le récit avec un sous-titre. Les visiteurs survolent avant de lire.

## Étape 3 : ajouter des chiffres clés avec compteurs

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**. 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 un élément **Text** avec le libellé du chiffre : « Projects delivered », « Years in business », « Clients who return ».
4. Dans chaque colonne, cliquez à nouveau sur **+** et choisissez **Number counter** ; il arrive au-dessus du libellé. Réglez :
    - **End** : le chiffre (140, 12, 98)
    - **Suffix** : « + » ou « % » le cas échéant
    - **Thousands separator** : **Comma**
    - **Speed** : 2500, les millisecondes que dure le décompte
5. Cliquez sur **Save** sur chaque compteur.

Le compteur n’a pas de champ de libellé propre, c’est pourquoi un élément Text se trouve en dessous.

## Étape 4 : créer une section d’équipe

1. Ajoutez une quatrième section avec **Add Section Below**.
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. Dans chaque colonne, cliquez sur **+** et choisissez **Card**. Ouvrez ses **Plus** > **Paramètres**, réglez **Header** sur le nom de la personne (« Sofia Andersen ») et **Title** sur sa fonction (« Creative Director »), puis cliquez sur **Save**.
4. Cliquez sur **+** sur la section elle-même et choisissez **Text** ; il arrive au-dessus de la ligne de cartes. Saisissez « Meet the team » comme **Heading 2**, centrez-le et cliquez sur **Save**.

## Étape 5 : ajouter une section finale

1. Ajoutez une dernière section avec **Add Section Below** et ouvrez ses **Plus** > **Paramètres**. Sous **HTML classes**, choisissez **Align text center**, pour que le texte et le bouton se centrent ensemble. Dans le panneau **Style**, choisissez votre couleur de marque comme **Background** et le blanc comme **Font color**, puis cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Button**. Définissez **Title** sur « Get in touch », **Link** sur `/contact`, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
3. Cliquez à nouveau sur **+** sur la section et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez « Want to work with us? » comme **Heading 2**, puis « We take on a handful of new clients each quarter. » Dans le panneau **Style**, réglez **Font color** sur blanc, puis 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’**eye icon**) et choisissez **Preview**.
3. Faites défiler la page pour vérifier chaque section.

## Aller plus loin

Non montré dans la vidéo, mais utile à ajouter :

- Un **Text** de biographie et une **Image** de portrait dans chaque carte, et des **Social links** en dessous
- **100% height** dans les réglages de la première section pour un en-tête qui remplit l’écran

## Ce que vous voyez

L’aperçu montre cinq bandeaux. L’en-tête foncé porte votre raison d’être et sa phrase d’appui en blanc. Votre histoire se tient à côté de la photo. Sur le bandeau gris, les trois chiffres défilent depuis zéro quand ils entrent à l’écran.

Le titre d’équipe est centré au-dessus de trois cartes, chacune avec un nom et une fonction. Le bandeau final centre un titre blanc sur un bouton clair **Get in touch**. Choisissez **Edit** dans le menu d’affichage pour continuer à travailler.

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

- **Aucun bouton Add Elements sur la page vide.** L’assistant de création de page est désactivé, la page ne propose donc que **Choose a template**. Cliquez sur la zone vide pour ouvrir le sélecteur d’éléments à la place.
- **Un nouvel élément se trouve au-dessus de celui ajouté avant.** Le builder insère les nouveaux éléments en haut de leur section ou colonne. Glissez-le à sa place par la poignée de glissement de sa barre de contrôle.
- **Number counter ou Card manque dans le sélecteur.** Votre profil d’utilisateur du builder le masque. Demandez à un administrateur de le cocher sous **Elements** sous **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **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 annuaire d’équipe](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/annuaire-d-equipe) pour une page d’équipe dédiée
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) pour les types de cartes et les éléments enfants
- [Éléments de contenu](/hc/documentation/learn-dxpr-builder/elements) pour la référence complète des éléments