---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-d-evenement'
title: 'Créer une page d’événement | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:12+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ici, vous construisez une page pour un événement. Elle a un héros
  photo avec la date et un bouton Register now, les détails à côté
  d’une carte, des cartes d’intervenants et une bande d’inscription.
  Utilisez-la pour les journées portes ouvertes, les conférences et les
  webinaires. Pour un site entier sur une seule page à défiler, suivez
  plutôt
  Créer un site one-page à défilement.
  La vidéo construit la page d’une journée portes ouvertes d’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 page d’événement'
      description: |-
        Ici, vous construisez une page pour un événement. Elle a un héros
        photo avec la date et un bouton Register now, les détails à côté
        d’une carte, des cartes d’intervenants et une bande d’inscription.
        Utilisez-la pour les journées portes ouvertes, les conférences et les
        webinaires. Pour un site entier sur une seule page à défiler, suivez
        plutôt
        Créer un site one-page à défilement.
        La vidéo construit la page d’une journée portes ouvertes d’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:12+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-d-evenement'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/page-d-evenement'
      description: |-
        Ici, vous construisez une page pour un événement. Elle a un héros
        photo avec la date et un bouton Register now, les détails à côté
        d’une carte, des cartes d’intervenants et une bande d’inscription.
        Utilisez-la pour les journées portes ouvertes, les conférences et les
        webinaires. Pour un site entier sur une seule page à défiler, suivez
        plutôt
        Créer un site one-page à défilement.
        La vidéo construit la page d’une journée portes ouvertes d’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 page d’événement.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter une carte](/fr/hc/documentation/learn-dxpr-builder/elements/map)
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte)
- [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros)

Ici, vous construisez une page pour un événement. Elle a un héros photo avec la date et un bouton **Register now**, les détails à côté d’une carte, des cartes d’intervenants et une bande d’inscription. Utilisez-la pour les journées portes ouvertes, les conférences et les webinaires. Pour un site entier sur une seule page à défiler, suivez plutôt [Créer un site one-page à défilement](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/site-one-page-a-defilement).

La vidéo construit la page d’une journée portes ouvertes d’université.

  ## Avant de commencer

- Votre rôle a la permission **Edit with DXPR Builder**.
- La médiathèque contient une photo large pour le héros.
- La page est ouverte dans le builder. Pour une nouvelle, accédez à **Content** > **Add content** > **Landing Page**(`/node/add/landing_page`) et cliquez sur **Save**.
- Les nouveaux éléments atterrissent en haut de leur section ou colonne. Ajoutez les éléments d’une section dans l’ordre inverse, ou glissez-les en place ensuite.

## Étape 1 : ajouter le héros

1. Cliquez sur **Ajouter des éléments** sur la page vide et choisissez **Section** depuis l’onglet **Mise en page**. Survolez-la et ouvrez **Plus** > **Paramètres**.
2. Sous **HTML classes**, choisissez **Align text center**.
3. Ouvrez le panneau **Style**. Sous **Background image**, cliquez sur **Select Image**, cochez une photo et cliquez sur **Insert selected**. Réglez **Background style** sur **Cover**.
4. Choisissez un **Background** bleu marine sombre et un **Font color**blanc, puis cliquez sur **Save**.
5. Cliquez sur **+** sur la section et choisissez **Bouton**. Réglez **Title** sur « Register now », **Link** vers la page d’inscription, **Type** sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
6. Cliquez à nouveau sur **+** et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez le nom de l’événement en **Heading 2**, puis la date et un slogan. Réglez **Font color** sur blanc dans le panneau **Style** et cliquez sur **Save**. Le thème imprime 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 détails et la carte

1. Survolez le héros et cliquez sur **Add Section Below**. Cliquez sur **+** sur la nouvelle section et choisissez **Ligne** ; ses deux colonnes égales sont la division voulue.
2. Cliquez sur **+** dans la colonne gauche et choisissez **Texte**. Tapez « Event details » en **Heading 2**, ajoutez une ligne pour la date, le lieu et le contact, et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne droite et choisissez **Carte**. Tapez l’**Address** du lieu, réglez **Map height** sur 320 et cliquez sur **Save**.

## Étape 3 : ajouter les intervenants

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 **Ligne**. 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 chaque colonne et choisissez **Carte**. Ouvrez ses **Plus** > **Paramètres**, réglez le **Header** sur la session et le **Title** sur le nom et le rôle de l’intervenant, puis cliquez sur **Save**.

## Étape 4 : ajouter l’appel à l’inscription

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 **Bouton**. Réglez **Title** sur « Sign up », **Link** vers la page d’inscription, **Type**sur **Light** et **Size** sur **Large**, puis cliquez sur **Save**.
3. Cliquez à nouveau sur **+** et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez « Register today » en **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’**icône en forme d’œil**) et choisissez **Preview**.

## Aller plus loin

Non montré dans la vidéo :

- **Photos d’intervenants** : cliquez sur **+** sur une carte et ajoutez une biographie **Texte**, puis cliquez à nouveau sur **+** sur la carte et ajoutez une **Image** ; elle atterrit au-dessus du texte
- **Photo plus sombre** : dans le panneau **Background effects** du héros, réglez **Background effect** sur **Gradient**. Choisissez la même couleur sombre à environ 60 % d’opacité comme **Start color** et **End color**
- **Programme** : ajoutez un élément **Texte** et insérez un tableau avec le bouton **Table** pour l’heure, la session et l’intervenant
- **Inscription sur la page** : voir [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## Ce que vous voyez

Le nom de l’événement, la date et le bouton **Register now** se placent centrés et blancs sur la photo. En dessous, les détails remplissent la moitié gauche et une carte du lieu la droite. Trois cartes d’intervenants se dressent sur une bande grise, et une bande violette ferme la page avec **Sign up**.

## Si vous ne voyez pas la page comme montrée

- **La photo du héros ne remplit pas la section.** **Background style**est encore sur **Theme defaults**. Ouvrez le panneau **Style** de la section et réglez-le sur **Cover**.
- **La carte montre le mauvais endroit.** Google Maps cherche l’adresse telle que tapée. Ajoutez le code postal, la ville et le pays à **Address**et enregistrez à nouveau.
- **Une carte n’affiche aucune boîte de dialogue de réglages après ajout.**Les cartes s’ouvrent vides, sans boîte de dialogue. Survolez la carte et ouvrez **Plus** > **Paramètres** pour renseigner **Header** et **Title**.
- **Vos changements 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/learn-dxpr-builder/elements/map) pour les réglages de la carte
- [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) pour les types de cartes et éléments enfants
- [Créer une section héros](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/section-heros) pour plus d’options de héros