---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/annuaire-d-equipe'
title: 'Créer un annuaire d’équipe | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:59+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page d’équipe : un en-tête centré, trois cartes de direction avec un lien LinkedIn sous la troisième, et une grille de quatre cartes d’équipe. Utilisez-la quand chaque collègue doit être facile à trouver. Pour une courte section d’équipe sur votre page d’entreprise, suivez plutôt Créer une page « à propos ».
  La vidéo crée la page d’équipe d’une entreprise de logistique.
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 un annuaire d’équipe'
      description: |-
        Créez ici une page d’équipe : un en-tête centré, trois cartes de direction avec un lien LinkedIn sous la troisième, et une grille de quatre cartes d’équipe. Utilisez-la quand chaque collègue doit être facile à trouver. Pour une courte section d’équipe sur votre page d’entreprise, suivez plutôt Créer une page « à propos ».
        La vidéo crée la page d’équipe d’une entreprise de logistique.
      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:59+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/annuaire-d-equipe'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/annuaire-d-equipe'
      description: |-
        Créez ici une page d’équipe : un en-tête centré, trois cartes de direction avec un lien LinkedIn sous la troisième, et une grille de quatre cartes d’équipe. Utilisez-la quand chaque collègue doit être facile à trouver. Pour une courte section d’équipe sur votre page d’entreprise, suivez plutôt Créer une page « à propos ».
        La vidéo crée la page d’équipe d’une entreprise de logistique.
      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 annuaire d’équipe.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte)
- [Ajouter un élément de liens sociaux](/fr/hc/documentation/apprendre-dxpr-builder/elements/liens-sociaux)
- [Créer une page « à propos »](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-a-propos)

Créez ici une page d’équipe : un en-tête centré, trois cartes de direction avec un lien LinkedIn sous la troisième, et une grille de quatre cartes d’équipe. Utilisez-la quand chaque collègue doit être facile à trouver. Pour une courte section d’équipe sur votre page d’entreprise, suivez plutôt [Créer une page « à propos »](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-a-propos).

La vidéo crée la page d’équipe d’une entreprise de logistique.

  ## 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 section ou colonne. C’est pourquoi les liens sociaux se placent avant la carte au-dessus d’eux.

## Étape 1 : ajouter l’en-tête

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**, puis cliquez sur **Save**.
3. Cliquez sur **+** sur la section et choisissez **Text** dans l’onglet **Content**.
4. Saisissez « Our team » comme **Heading 2**, ajoutez une ligne d’introduction 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 cartes de direction

1. Survolez la section et cliquez sur **Add Section Below**. Ouvrez les **Plus** > **Paramètres** de la nouvelle section, 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. Cliquez sur **+** dans la première colonne et choisissez **Card**. Ouvrez ses **Plus** > **Paramètres**, réglez le **Header** sur la fonction et le **Title** sur le nom, puis cliquez sur **Save**.
4. Ajoutez une **Card** à la deuxième colonne de la même façon.
5. Cliquez sur **+** dans la troisième colonne et choisissez **Social links**. Elle arrive avec deux lignes d’exemple. Saisissez `linkedin` par-dessus « Facebook » dans la première ligne et saisissez l’URL du profil à côté. Supprimez la deuxième ligne avec son **×**, réglez **Style** sur **Circle** et **Size** sur **2x**, puis cliquez sur **Save**.
6. Cliquez sur **+** dans la même colonne et choisissez **Card** ; elle arrive au-dessus des liens. Réglez ses **Header** et **Title** de la même façon et cliquez sur **Save**.
7. Cliquez sur **+** sur la section et choisissez **Text** ; il arrive au-dessus de la ligne. Saisissez « Leadership » comme **Heading 2** et cliquez sur **Save**.

## Étape 3 : ajouter la grille d’équipe

1. Ajoutez une troisième section avec **Add Section Below**, puis une **Row**. Cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **1/4 + 1/4 + 1/4 + 1/4** et cliquez sur **Save**.
2. Ajoutez une **Card** à chaque colonne. Ouvrez ses **Plus** > **Paramètres**, réglez la fonction comme **Header** et le nom comme **Title**, puis cliquez sur **Save**.
3. Cliquez sur **+** sur la section et choisissez **Text** ; il arrive au-dessus de la ligne. Saisissez « The team » comme **Heading 2** et cliquez sur **Save**.

## Étape 4 : 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 :

- **Photos and biographies** : cliquez sur **+** sur une carte et ajoutez une biographie **Text**. Cliquez à nouveau sur **+** sur la carte et ajoutez une **Image** ; elle arrive au-dessus du texte. Renseignez l’**Alt attribute** avec le nom de la personne.
- **Rounded photos** : sur chaque image, réglez **Border radius** dans le panneau **Style**. La valeur est en pixels, jusqu’à 100.
- **Lift on hover** : dans le panneau **Hover style** de la carte, réglez **Drop shadow** sur 2.
- **Team that updates itself** : créez un type de contenu « Team member » et une vue **Grid** avec un affichage de bloc. Insérez la vue depuis l’onglet **Drupal Views**, et les rédacteurs ajoutent des personnes sans toucher la page.

## Ce que vous voyez

« Our team » trône centré en haut. Sur le bandeau gris, trois cartes de direction affichent chacune la fonction dans l’en-tête et le nom en dessous, avec une icône LinkedIn ronde sous la troisième. « The team » suit avec quatre cartes côte à côte.

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

- **Une carte n’affiche aucune boîte de dialogue après son ajout.** Les cartes s’ouvrent vides, sans boîte de dialogue. Survolez la carte et ouvrez **Plus** > **Paramètres** pour renseigner **Header** et **Title**.
- **Un lien social affiche « No matching brand icon found ».** La marque n’est pas un nom d’icône connu. Saisissez-la en minuscules, par exemple `linkedin`.
- **L’icône LinkedIn se trouve au-dessus de la carte.** La carte est arrivée avant les liens, et les nouveaux éléments arrivent en haut de leur colonne. Glissez la carte au-dessus des liens 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 ?

- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) pour les types de cartes et les éléments enfants
- [Élément liens sociaux](/fr/hc/documentation/apprendre-dxpr-builder/elements/liens-sociaux) pour les styles et les couleurs des icônes
- [Créer une page « à propos »](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-a-propos) pour placer une section d’équipe plus courte sur votre page d’entreprise