---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-d-images'
title: 'Créer une galerie d’images | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:24+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une galerie photo : un titre centré, trois photos côte à côte avec un texte alternatif, et un diaporama sur un bandeau gris. Utilisez-la pour montrer un lieu ou un événement en images. Pour présenter des projets avec une description chacun, suivez plutôt Créer une galerie de portfolio.
  La vidéo crée une galerie de peintures d’étudiants pour une université.
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 d’images'
      description: |-
        Créez ici une galerie photo : un titre centré, trois photos côte à côte avec un texte alternatif, et un diaporama sur un bandeau gris. Utilisez-la pour montrer un lieu ou un événement en images. Pour présenter des projets avec une description chacun, suivez plutôt Créer une galerie de portfolio.
        La vidéo crée une galerie de peintures d’étudiants pour une université.
      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:24+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-d-images'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-d-images'
      description: |-
        Créez ici une galerie photo : un titre centré, trois photos côte à côte avec un texte alternatif, et un diaporama sur un bandeau gris. Utilisez-la pour montrer un lieu ou un événement en images. Pour présenter des projets avec une description chacun, suivez plutôt Créer une galerie de portfolio.
        La vidéo crée une galerie de peintures d’étudiants pour une université.
      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 d’images.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter une image](/fr/hc/documentation/apprendre-dxpr-builder/elements/image)
- [Ajouter un carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images)
- [Créer une galerie de portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio)

Créez ici une galerie photo : un titre centré, trois photos côte à côte avec un texte alternatif, et un diaporama sur un bandeau gris. Utilisez-la pour montrer un lieu ou un événement en images. Pour présenter des projets avec une description chacun, suivez plutôt [Créer une galerie de portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio).

La vidéo crée une galerie de peintures d’étudiants pour une université.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La médiathèque contient au moins six photos, recadrées 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**.

## É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 « Student art gallery » 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 photos

1. Survolez la section et cliquez sur **Add Section Below**. Cliquez sur **+** sur la nouvelle section et choisissez **Row** ; elle arrive avec deux colonnes égales.
2. Cliquez sur l’icône de grille de la ligne (**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 **Image**.
4. Cliquez sur **Select Image**, recherchez dans la médiathèque avec **Apply filters**, cliquez sur une photo et cliquez sur **Insert selected**.
5. Ouvrez le panneau **SEO** et saisissez l’**Alt attribute** : ce qu’une personne qui ne voit pas la photo doit savoir. Cliquez sur **Save**.
6. Répétez pour les deuxième et troisième colonnes.

Des photos recadrées aux mêmes proportions gardent la ligne régulière.

## Étape 3 : ajouter le diaporama

1. Ajoutez une troisième section avec **Add Section Below** 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 **Image carousel**.
3. Cliquez sur **Select Image**, recherchez dans la médiathèque, cliquez sur trois photos et cliquez sur **Insert selected**, puis cliquez sur **Save**.
4. Cliquez à nouveau sur **+** sur la section et choisissez **Text** ; il arrive au-dessus du carrousel. Saisissez « Slideshow » 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 :

- **Captions** : placez une **Card** dans la colonne et ajoutez un élément **Text** avec la légende à l’intérieur. Ajoutez ensuite l’**Image** dans la carte ; elle arrive au-dessus de la légende.
- **Full-size photos** : réglez **Image link** sur le fichier en taille réelle et **Image link target** sur **New window**.
- **Style** : sur chaque image, réglez **Border radius** sur 4 et **Drop shadow** sur 1 dans le panneau **Style** pour un léger relief.
- **Slideshow timing** : réglez **Interval** sur le carrousel, en millisecondes. Sous **Hide**, cochez **Hide pagination control** ou **Hide prev/next buttons** pour supprimer ces contrôles.
- **Gallery that fills itself** : sous **Structure** > **Views** > **Add view**, créez une vue du média Image avec un affichage de bloc au format **Grid**. Insérez-la depuis l’onglet **Drupal Views**, et les nouveaux téléversements apparaissent d’eux-mêmes.

## Ce que vous voyez

Le titre centré ouvre la page, suivi de trois photos côte à côte. Sur le bandeau gris en dessous, le diaporama montre une photo à la fois et passe à la suivante toutes les cinq secondes.

## Si les photos ne s’affichent pas comme montré

- **Insert selected n’ajoute aucune photo.** La médiathèque rechargeait encore après **Apply filters**, votre clic n’a donc pas coché la photo. Attendez que la grille se stabilise, vérifiez que la photo affiche une coche, et cliquez à nouveau sur **Insert selected**.
- **La médiathèque est vide.** Aucune image n’est encore téléversée, ou le navigateur de médias n’est pas configuré. Voir [Les images ne se téléversent pas ou disparaissent](/fr/hc/documentation/apprendre-dxpr-builder/depannage/images-et-medias).
- **Les trois photos 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.
- **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 image](/fr/hc/documentation/apprendre-dxpr-builder/elements/image) pour tous les réglages d’image
- [Carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images) pour les options du diaporama
- [Créer une galerie de portfolio](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/galerie-de-portfolio) pour une grille de projets avec filtre