---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/base-de-connaissances'
title: 'Créer une base de connaissances | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:28+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici la page d’accueil d’un centre d’aide : un en-tête bleu marine, trois cartes de catégorie avec une icône chacune, deux listes d’articles populaires et un appel à l’action de support. Utilisez-la quand votre aide s’étend sur de nombreux articles. Pour une courte liste de questions et réponses, suivez plutôt Créer une page FAQ.
  La vidéo crée le centre d’aide d’un produit logiciel.
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 base de connaissances'
      description: |-
        Créez ici la page d’accueil d’un centre d’aide : un en-tête bleu marine, trois cartes de catégorie avec une icône chacune, deux listes d’articles populaires et un appel à l’action de support. Utilisez-la quand votre aide s’étend sur de nombreux articles. Pour une courte liste de questions et réponses, suivez plutôt Créer une page FAQ.
        La vidéo crée le centre d’aide d’un produit logiciel.
      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:28+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/base-de-connaissances'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/base-de-connaissances'
      description: |-
        Créez ici la page d’accueil d’un centre d’aide : un en-tête bleu marine, trois cartes de catégorie avec une icône chacune, deux listes d’articles populaires et un appel à l’action de support. Utilisez-la quand votre aide s’étend sur de nombreux articles. Pour une courte liste de questions et réponses, suivez plutôt Créer une page FAQ.
        La vidéo crée le centre d’aide d’un produit logiciel.
      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 base de connaissances.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter un bloc Drupal à votre page](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal)
- [Créer une page FAQ](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-faq)
- [Ajouter un lien](/fr/hc/documentation/apprendre-dxpr-builder/elements/lien)

Créez ici la page d’accueil d’un centre d’aide : un en-tête bleu marine, trois cartes de catégorie avec une icône chacune, deux listes d’articles populaires et un appel à l’action de support. Utilisez-la quand votre aide s’étend sur de nombreux articles. Pour une courte liste de questions et réponses, suivez plutôt [Créer une page FAQ](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-faq).

La vidéo crée le centre d’aide d’un produit logiciel.

  ## 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. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les ensuite à leur place.

## É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**. Dans le panneau **Style**, choisissez le **Background** bleu marine et le **Font color** blanc, puis cliquez sur **Save**.
3. Cliquez sur **+** sur la section et choisissez **Text**. Saisissez « Help centre » comme **Heading 2** et ajoutez « How can we help you today? ». Réglez **Font color** sur blanc dans le panneau **Style** 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 catégories

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 **Card**. Ouvrez ses **Plus** > **Paramètres**, réglez le **Header** sur le nom de la catégorie et le **Title** sur le nombre d’articles, puis cliquez sur **Save**.
4. Cliquez sur **+** dans la même colonne et choisissez **Icon** ; l’icône arrive au-dessus de la carte. Choisissez le jeu **Font Awesome Free Solid**, recherchez `rocket` et cliquez sur l’icône. Réglez **Size** sur **Extra Large (2x)** et cliquez sur **Save**.
5. Répétez pour la deuxième colonne avec `credit-card` et la troisième avec `screwdriver-wrench`.

## Étape 3 : ajouter les articles populaires

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** ; elle arrive avec deux colonnes égales.
3. Cliquez sur **+** dans chaque colonne et choisissez **Text**. Saisissez trois titres d’articles, un par ligne, et cliquez sur **Save**.
4. Cliquez sur **+** sur la section et choisissez **Text** ; il arrive au-dessus de la ligne. Saisissez « Popular articles » comme **Heading 2** et cliquez sur **Save**.

## Étape 4 : ajouter l’appel à l’action de support

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 « Contact support », **Link** sur `/support`, **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 « Can’t find what you need? » 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 :

- **Search box** : activez le module **Search** du cœur sous **Extend**. Cliquez sur **+** dans la section d’en-tête, ouvrez l’onglet **Drupal Blocks** et choisissez **Block: Forms: Search form**. Les visiteurs arrivent sur `/search/node`.
- **Clickable cards** : ajoutez d’abord un élément **Link** à la colonne et réglez son **Link** sur la page de catégorie. Ajoutez ensuite la **Card** à l’intérieur.
- **Article links** : sélectionnez chaque titre dans les listes et liez-le avec le bouton de lien de la barre d’outils.
- **More categories** : ajoutez une deuxième **Row** avec le même préréglage. Les plus courantes sont Using the editor, Templates and design, et API and development.

## Ce que vous voyez

L’en-tête bleu marine accueille les visiteurs avec « Help centre » en blanc. Trois catégories centrées suivent, chacune une icône au-dessus d’une carte avec son nom et son nombre d’articles. Un bandeau gris répertorie six articles populaires en deux colonnes, et un bandeau violet propose **Contact support**.

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

- **Une carte n’affiche aucune boîte de dialogue des réglages 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**.
- **Une icône se trouve sous sa carte.** L’icône est arrivée avant la carte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez l’icône au-dessus de la carte par la poignée de glissement de sa barre de contrôle.
- **Le titre reste foncé sur bleu marine.** 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 ?

- [Intégration de Drupal Blocks](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal) pour les autres blocs à insérer
- [Créer une page FAQ](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-faq) pour des réponses repliables dans une page de catégorie
- [Élément lien](/fr/hc/documentation/apprendre-dxpr-builder/elements/lien) pour l’enveloppe cliquable autour d’une carte