Créer une base de connaissances.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici la page d’accueil d’un centre d’aide : un en-tête bleu marine, trois cartes de catégorie avec une icône chacune, deux listes d’articles populaires et un appel à l’action de support. Utilisez-la quand votre aide s’étend sur de nombreux articles. Pour une courte liste de questions et réponses, suivez plutôt Créer une page FAQ.

La vidéo crée le centre d’aide d’un produit logiciel.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • 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 section ou colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les ensuite à leur place.

É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. Dans le panneau Style, choisissez le Background bleu marine et le Font color blanc, puis cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Text. Saisissez « Help centre » comme Heading 2 et ajoutez « How can we help you today? ». Réglez Font color sur blanc dans le panneau Style 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.

Étape 2 : ajouter les catégories

  1. Survolez la section et cliquez sur Add Section Below. Donnez à la nouvelle section la classe Align text center.
  2. Cliquez sur + sur la section et choisissez Row. 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 Card. Ouvrez ses Plus > Paramètres, réglez le Header sur le nom de la catégorie et le Title sur le nombre d’articles, puis cliquez sur Save.
  4. Cliquez sur + dans la même colonne et choisissez Icon ; l’icône arrive au-dessus de la carte. Choisissez le jeu Font Awesome Free Solid, recherchez rocket et cliquez sur l’icône. Réglez Size sur Extra Large (2x) et cliquez sur Save.
  5. Répétez pour la deuxième colonne avec credit-card et la troisième avec screwdriver-wrench.
  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 Row ; elle arrive avec deux colonnes égales.
  3. Cliquez sur + dans chaque colonne et choisissez Text. Saisissez trois titres d’articles, un par ligne, et cliquez sur Save.
  4. Cliquez sur + sur la section et choisissez Text ; il arrive au-dessus de la ligne. Saisissez « Popular articles » comme Heading 2 et cliquez sur Save.

Étape 4 : ajouter l’appel à l’action de support

  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 Button. Définissez Title sur « Contact support », Link sur /support, 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 « Can’t find what you need? » comme 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’eye icon) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Search box : activez le module Search du cœur sous Extend. Cliquez sur + dans la section d’en-tête, ouvrez l’onglet Drupal Blocks et choisissez Block: Forms: Search form. Les visiteurs arrivent sur /search/node.
  • Clickable cards : ajoutez d’abord un élément Link à la colonne et réglez son Link sur la page de catégorie. Ajoutez ensuite la Card à l’intérieur.
  • Article links : sélectionnez chaque titre dans les listes et liez-le avec le bouton de lien de la barre d’outils.
  • More categories : ajoutez une deuxième Row avec le même préréglage. Les plus courantes sont Using the editor, Templates and design, et API and development.

Ce que vous voyez

L’en-tête bleu marine accueille les visiteurs avec « Help centre » en blanc. Trois catégories centrées suivent, chacune une icône au-dessus d’une carte avec son nom et son nombre d’articles. Un bandeau gris répertorie six articles populaires en deux colonnes, et un bandeau violet propose Contact support.

Si la page ne s’affiche pas comme montré

  • Une carte n’affiche aucune boîte de dialogue des réglages après son ajout. Les cartes s’ouvrent vides, sans boîte de dialogue. Survolez la carte et ouvrez Plus > Paramètres pour renseigner Header et Title.
  • Une icône se trouve sous sa carte. L’icône est arrivée avant la carte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez l’icône au-dessus de la carte par la poignée de glissement de sa barre de contrôle.
  • Le titre reste foncé sur bleu marine. L’élément Text n’a pas de Font color propre. Ouvrez son panneau Style et réglez Font color sur blanc.
  • 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.

Et ensuite ?