---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio'
title: 'Créer une galerie de portfolio | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:44+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page de portfolio : un titre centré, trois projets côte à côte avec une photo de couverture et un résultat d’une ligne chacun, et un appel à l’action. Utilisez-la pour montrer votre travail d’un coup d’œil et relier chaque projet à son histoire. Pour présenter un projet en profondeur, suivez Rédiger une étude de cas.
  La vidéo crée une page d’agence intitulée « Our work ».
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 galerie de portfolio'
      description: |-
        Créez ici une page de portfolio : un titre centré, trois projets côte à côte avec une photo de couverture et un résultat d’une ligne chacun, et un appel à l’action. Utilisez-la pour montrer votre travail d’un coup d’œil et relier chaque projet à son histoire. Pour présenter un projet en profondeur, suivez Rédiger une étude de cas.
        La vidéo crée une page d’agence intitulée « Our work ».
      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:44+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/galerie-de-portfolio'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio'
      description: |-
        Créez ici une page de portfolio : un titre centré, trois projets côte à côte avec une photo de couverture et un résultat d’une ligne chacun, et un appel à l’action. Utilisez-la pour montrer votre travail d’un coup d’œil et relier chaque projet à son histoire. Pour présenter un projet en profondeur, suivez Rédiger une étude de cas.
        La vidéo crée une page d’agence intitulée « Our work ».
      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 galerie de portfolio.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Afficher une vue Drupal sur votre page](/fr/hc/documentation/apprendre-dxpr-builder/integrations/vues-drupal)
- [Rédiger une étude de cas](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas)
- [Ajouter une image](/fr/hc/documentation/apprendre-dxpr-builder/elements/image)

Créez ici une page de portfolio : un titre centré, trois projets côte à côte avec une photo de couverture et un résultat d’une ligne chacun, et un appel à l’action. Utilisez-la pour montrer votre travail d’un coup d’œil et relier chaque projet à son histoire. Pour présenter un projet en profondeur, suivez [Rédiger une étude de cas](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas).

La vidéo crée une page d’agence intitulée « Our work ».

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient une photo de couverture par projet, recadrée aux mêmes proportions.
- 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 colonne : chaque photo de couverture se place donc après son texte.

## É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 work » 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 la grille de projets

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** ; elle arrive avec deux colonnes égales. 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 le nom du projet comme **Heading 3**, ajoutez le résultat d’une ligne et cliquez sur **Save**.
4. Cliquez sur **+** dans la même colonne et choisissez **Image** ; elle arrive au-dessus du texte. Cliquez sur **Select Image**, cochez la photo de couverture et cliquez sur **Insert selected**. Saisissez l’**Alt attribute** dans le panneau **SEO** et cliquez sur **Save**.
5. Répétez pour les deuxième et troisième colonnes.

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

1. Ajoutez une troisième section avec **Add Section Below** 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 us », **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 « Let’s work together » comme **Heading 2** et ajoutez une ligne. Réglez **Font color** sur blanc dans le panneau **Style** 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 :

- **Link each project** : réglez **Image link** de la photo de couverture sur la page d’étude de cas.
- **Lift on hover** : dans le panneau **Style** de chaque image, réglez **Border radius** sur 4 et **Drop shadow** sur 1. Dans **Hover style**, montez **Drop shadow** à 3.
- **More projects** : ajoutez une autre **Row** avec le même préréglage sous la première.

## Rendre la grille filtrable

La grille statique convient pour une poignée de projets. Pour laisser les visiteurs filtrer par type, enregistrez chaque projet comme contenu et affichez-les avec une vue qui a un filtre exposé. Views fait partie du cœur de Drupal.

### 1. Créer le type de contenu Portfolio

1. Accédez à **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Nommez-le « Portfolio » et enregistrez.
3. Sous l’onglet **Manage fields**, ajoutez un champ **Image** intitulé « Cover image ».
4. Ajoutez un champ **List (text)** intitulé « Project type » avec des valeurs comme `web|Web`, `branding|Branding` et `campaign|Campaign`.
5. Créez quelques éléments Portfolio sous **Content** > **Add content** > **Portfolio**.

### 2. Créer la vue

1. Accédez à **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Nommez-la « Portfolio grid » ; sous **View settings**, affichez du **Content** de type **Portfolio**.
3. Cochez **Create a block**, réglez le format d’affichage sur **Grid** de **fields** et enregistrez.
4. Dans l’éditeur de vue, ajoutez les champs **Cover image** et **Title**, et réglez la grille sur 3 colonnes dans ses réglages de format.
5. Sous **Filter criteria**, cliquez sur **Add**, choisissez **Project type** et cochez **Expose this filter to visitors**. Intitulez-le « Filter by type ».
6. Sous **Advanced**, réglez **Use AJAX** sur Yes. Les filtres exposés d’une page du builder ne fonctionnent que via AJAX.
7. Enregistrez la vue.

### 3. Insérer la vue dans la page

1. De retour dans DXPR Builder, videz les trois colonnes statiques ou ajoutez une nouvelle **Row**.
2. Cliquez sur **+**, ouvrez l’onglet **Drupal Views** et choisissez **View: Portfolio grid (Block)**.
3. Dans la boîte de dialogue des réglages, cochez **Show exposed filters** et cliquez sur **Save**. La grille s’affiche avec la liste déroulante « Filter by type » au-dessus, et les nouveaux éléments Portfolio apparaissent d’eux-mêmes.
4. Cliquez sur **Save** dans la barre d’outils du builder.

## Ce que vous voyez

Le titre centré « Our work » ouvre la page. Sur le bandeau gris en dessous, trois projets se tiennent côte à côte, chacun une photo de couverture sur son nom et son résultat. Un bandeau violet conclut la page avec **Contact us**.

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

- **Une photo de couverture se trouve sous son texte.** La photo est arrivée avant le texte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez la photo au-dessus du texte par la poignée de glissement de sa barre de contrôle.
- **Les couvertures ont des hauteurs différentes.** Leurs proportions diffèrent. Recadrez-les aux mêmes proportions, téléversez-les à nouveau et choisissez les nouvelles copies.
- **Portfolio grid n’est pas dans l’onglet Drupal Views.** La vue est désactivée, ou votre profil d’utilisateur du builder la masque. Activez-la sous **Structure** > **Views**, ou demandez à un administrateur de la cocher sous **Views** dans votre profil d’utilisateur.
- **L’éditeur affiche « Turn on Ajax on this view to use exposed filters. »** La vue n’utilise pas AJAX. Réglez **Use AJAX** sur Yes sous **Advanced** dans l’éditeur de vue ; voir [Un élément s’affiche ou se comporte mal](/fr/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **La liste déroulante « Filter by type » manque.** **Show exposed filters** est désactivé sur l’élément. Ouvrez les réglages de l’élément de vue, cochez-le et cliquez sur **Save**.

## Et ensuite ?

- [Intégration de Drupal Views](/fr/hc/documentation/apprendre-dxpr-builder/integrations/vues-drupal) pour la façon dont les affichages de vues arrivent dans le sélecteur d’éléments
- [Rédiger une étude de cas](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas) pour la page vers laquelle chaque projet renvoie
- [Élément image](/fr/hc/documentation/apprendre-dxpr-builder/elements/image) pour tous les réglages d’image