Créer une page d’événement.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

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é.

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.

É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

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.

Et ensuite ?