Créer une page FAQ.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Ici, vous construisez une page FAQ où chaque question s’ouvre et se ferme au clic. Vous terminez avec un titre centré, une catégorie de questions dans un panneau repliable et un appel à l’action vers le contact. Utilisez-la pour une courte liste de questions courantes. Pour des articles d’aide groupés par sujet, suivez plutôt Créer une base de connaissances.

La vidéo construit la FAQ d’une clinique.

Avant de commencer

  • Votre rôle a la permission Edit with DXPR Builder.
  • 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 et nouveaux volets atterrissent en haut de leur conteneur. Ajoutez les questions de la dernière à la première, ou glissez-les en place ensuite.

Étape 1 : ajouter l’en-tête

  1. Cliquez sur Ajouter des éléments sur la page vide et choisissez Section depuis l’onglet Mise en page.
  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 Texte depuis l’onglet Contenu.
  4. Tapez « Frequently asked questions » et réglez-le sur Heading 2 depuis la barre d’outils. Ajoutez une ligne qui dit ce que la page couvre, puis 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 une catégorie avec des questions

  1. Survolez la section et cliquez sur Add Section Below.
  2. Cliquez sur + sur la nouvelle section et choisissez Panneau repliable depuis l’onglet Mise en page ; il arrive avec un volet vide.
  3. Ouvrez Plus > Paramètres sur le panneau. Activez Collapse pour que chaque question démarre fermée, réglez Expand icon sur +, puis cliquez sur Save.
  4. Ouvrez Plus > Paramètres sur le volet, tapez la question comme son Toggle title et cliquez sur Save. Les nouveaux volets atterrissent en haut, donc commencez par la dernière question.
  5. Cliquez sur la question pour ouvrir son corps, cliquez sur + dedans et choisissez Texte. Tapez la réponse et cliquez sur Save.
  6. Cliquez sur Add toggle sur le panneau et répétez les étapes 4 et 5 pour chaque question, en remontant vers la première.
  7. Cliquez une fois de plus sur + sur la section et choisissez Texte ; il atterrit au-dessus du panneau. Tapez le nom de la catégorie en Heading 2 et cliquez sur Save.

Visez 3 à 6 questions par catégorie.

Étape 3 : ajouter un appel à l’action vers le contact

  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 Bouton. Réglez Title sur « Contact us », Link sur /contact, Type sur Primary et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Texte ; il atterrit au-dessus du bouton. Tapez « Still have questions? » en Heading 2, ajoutez une ligne qui pointe vers votre équipe, puis 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’icône en forme d’œil) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Plus de catégories : répétez l’étape 2 pour chaque catégorie, une section et un panneau repliable chacune. Les courantes sont Getting started, Account and billing, Features, Troubleshooting, et Privacy and security.
  • Onglets au lieu de sections : avec peu de catégories, ajoutez un élément Onglets depuis l’onglet Mise en page, un onglet par catégorie, et placez un panneau repliable dans chaque onglet. Chaque catégorie reste à portée sans défilement.

Conseils SEO

  • Utilisez la vraie question comme Toggle title
  • Répondez dans la première phrase, puis détaillez
  • Liez les réponses vers la page concernée
  • Ajoutez des données structurées FAQ via votre thème ou un module Drupal

Ce que vous voyez

Le titre se place centré en haut. Sous le titre de catégorie, chaque question est fermée et montre un +. Un clic ouvre la réponse, et la bande de fermeture offre le bouton Contact us.

Si vous ne voyez pas la page comme montrée

  • Toutes les questions démarrent ouvertes. Collapse est désactivé sur le panneau repliable. Ouvrez les Plus > Paramètres du panneau, activez Collapse et cliquez sur Save.
  • Il n’y a pas de + dans un volet. Le corps du volet est fermé. Cliquez sur la question pour l’ouvrir, puis cliquez sur + dedans.
  • Les questions apparaissent dans le mauvais ordre. Les nouveaux volets atterrissent en haut du panneau. Glissez chaque volet en place par la poignée de glissement sur sa barre de contrôle.
  • 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 ?