---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-services'
title: 'Créer une page de services | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:56+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page qui répertorie ce que vous proposez. Elle comprend un en-tête, trois services avec icônes, un service détaillé à côté d’une photo, des logos clients et un appel à l’action. Utilisez-la quand vous vendez plusieurs services. Pour une page sur une seule offre, suivez plutôt Créer une page de destination marketing.
  La vidéo crée la page de services d’une agence numérique.
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 page de services'
      description: |-
        Créez ici une page qui répertorie ce que vous proposez. Elle comprend un en-tête, trois services avec icônes, un service détaillé à côté d’une photo, des logos clients et un appel à l’action. Utilisez-la quand vous vendez plusieurs services. Pour une page sur une seule offre, suivez plutôt Créer une page de destination marketing.
        La vidéo crée la page de services d’une agence numérique.
      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:56+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/page-de-services'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-services'
      description: |-
        Créez ici une page qui répertorie ce que vous proposez. Elle comprend un en-tête, trois services avec icônes, un service détaillé à côté d’une photo, des logos clients et un appel à l’action. Utilisez-la quand vous vendez plusieurs services. Pour une page sur une seule offre, suivez plutôt Créer une page de destination marketing.
        La vidéo crée la page de services d’une agence numérique.
      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 de services.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing)
- [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone)
- [Ajouter un Marquee](/fr/hc/documentation/learn-dxpr-builder/elements/marquee)

Créez ici une page qui répertorie ce que vous proposez. Elle comprend un en-tête, trois services avec icônes, un service détaillé à côté d’une photo, des logos clients et un appel à l’action. Utilisez-la quand vous vendez plusieurs services. Pour une page sur une seule offre, suivez plutôt [Créer une page de destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing).

La vidéo crée la page de services d’une agence numérique.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient une photo pour le service détaillé et quatre logos clients.
- 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**.
- 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 é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**. Survolez-la, ouvrez **Plus** > **Paramètres**, choisissez le **Background** bleu marine dans le panneau **Style** et cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Jumbotron** dans l’onglet **Content**.
3. Réglez le **Title** sur « Our services », le **Lead** sur une ligne à propos de votre offre et le **Type** sur **Primary**, puis cliquez sur **Save**.

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

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 **Text**. Saisissez « Design » comme **Heading 3**, ajoutez une ligne et cliquez sur **Save**.
4. Cliquez sur **+** dans la même colonne et choisissez **Icon** ; l’icône arrive au-dessus du texte. Choisissez le jeu **Font Awesome Free Solid**, recherchez `palette` et cliquez sur l’icône. Réglez **Size** sur **Very Large (3x)**, ouvrez **Icon utilities**, réglez **Style** sur **Circle** et cliquez sur **Save**.
5. Répétez pour « Development » avec `code` et « Marketing » avec `bullhorn`.

## Étape 3 : détailler un service

1. Ajoutez une troisième section avec **Add Section Below**, puis une **Row** ; elle arrive avec deux colonnes égales.
2. Cliquez sur **+** dans la colonne de gauche et choisissez **Image**. Cliquez sur **Select Image**, cochez une photo et cliquez sur **Insert selected**. Saisissez l’**Alt attribute** dans le panneau **SEO** et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne de droite et choisissez **Button**. Définissez **Title** sur « Get a quote », **Link** sur `/contact` et **Type** sur **Primary**, puis cliquez sur **Save**.
4. Cliquez à nouveau sur **+** dans la colonne de droite et choisissez **Text** ; il arrive au-dessus du bouton. Saisissez « Design » comme **Heading 2**, ajoutez la description et le contenu inclus, puis cliquez sur **Save**.

## Étape 4 : ajouter les logos clients

1. Ajoutez une quatrième section et ouvrez ses **Plus** > **Paramètres**. Choisissez **Align text center** sous **HTML classes** et un **Background** gris clair dans le panneau **Style**. Cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Marquee**. Supprimez les trois images d’exemple avec le **×** sur chacune. Cliquez sur **Select Image**, recherchez vos logos, cochez-en quatre et cliquez sur **Insert selected**. Activez **Gray scale** et cliquez sur **Save**.
3. Cliquez à nouveau sur **+** sur la section et choisissez **Text** ; il arrive au-dessus du chapiteau. Saisissez « Trusted by leading brands » comme **Heading 2** et cliquez sur **Save**.

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

1. Ajoutez une cinquiè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 « Schedule a consultation », **Link** sur `/contact`, **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 « Ready to get started? » comme **Heading 2** et ajoutez une ligne. Réglez **Font color** sur blanc et 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**.

## Aller plus loin

Non montré dans la vidéo :

- **One detail section per service** : répétez l’étape 3 pour Development et Marketing. Activez **Mirror row** dans les réglages d’une ligne sur deux, pour que les photos alternent de côté sur tablettes et ordinateurs.
- **Jump links** : définissez le **HTML ID** de chaque section détaillée (`design`, `development`, `marketing`). Ajoutez un **Button** sous chaque texte d’aperçu avec le **Link** `#design`, et ainsi de suite.
- **Testimonials** : ajoutez un **Block quote** par client au-dessus des logos.

## Ce que vous voyez

Un bandeau bleu marine ouvre la page, avec « Our services » en grands caractères blancs sur un résumé d’une ligne. Trois services centrés suivent, chacun une icône cerclée sur son nom et sa ligne. Design a son propre bandeau avec une photo, une description et **Get a quote**. Des logos clients gris défilent sur un bandeau clair, et un bandeau violet conclut la page.

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

- **Le chapiteau affiche encore les logos d’exemple.** Les trois images d’exemple restent jusqu’à leur suppression. Ouvrez les réglages du chapiteau, cliquez sur le **×** de chaque image d’exemple et enregistrez.
- **Les logos sont en couleur.** **Gray scale** est désactivé. Ouvrez les réglages du chapiteau, activez-le et cliquez sur **Save**.
- **Les icônes n’ont pas de cercle.** **Style** se trouve dans le panneau **Icon utilities**, pas dans **General**. Ouvrez les réglages de l’icône, ouvrez **Icon utilities** et réglez **Style** sur **Circle**.
- **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 destination marketing](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-de-destination-marketing) pour une page dédiée par service
- [Élément icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone) pour les tailles et les styles
- [Élément Marquee](/fr/hc/documentation/learn-dxpr-builder/elements/marquee) pour les réglages du bandeau de logos