Accordéons : Transformer du contenu en accordéon

Exemple d'une liste d'accordéons cliquables

Exemple d'une liste d'accordéons

Le présent tutoriel vous expliquera comment transformer du contenu, tel qu'un fragment de contenu général, en accordéon à l'aide des styles de composants.

Qu'est-ce qu'un accordéon ?

En bref, un accordéon est un élément qui a été réduit de sorte qu'on ne peut voir que son titre et une flèche descendante. Lorsque l'on clique sur le titre, l'élément se développera afin de révéler le corps du contenu. Si l'on clique une deuxième fois sur le titre, l'élément rétrécira au point de masquer le corps du contenu. Les accordéons permettent aux visiteurs de parcourir rapidement les titres qui figurent sur la page, ce qui peut être utile dans certains cas comme des listes de foires aux questions (FAQ).

Prérequis

Aux fins du présent tutoriel, vous devez avoir un accès de niveau webmestre pour pouvoir modifier des pages de panneaux.

Étape 1 : Créer le contenu à formater en accordéon

Presque tous les types de contenu (p. ex. les fragments de contenu, les nœuds, les mini-panneaux, etc.) peuvent être formatés en accordéon. Aux fins du présent exercice, on travaillera avec des fragments de contenu.

  1. Commencez par naviguer à « Contenu ».
  2. Dans le coin supérieur droit de la page, cliquez sur l'onglet Fragments, puis cliquez sur le lien « Ajouter un fragment de contenu ».
  3. Dans la liste qui se présente, sélectionnez « Fragment de contenu général » et remplissez les champs comme suit :
    • Titre : Il n'est pas nécessaire de fournir un titre à cette étape, puisque le titre qui sera affiché au final sera saisi ailleurs. Cependant, vous voudrez peut-être quand même l'ajouter à titre de référence.
    • Corps : Dans le champ Corps, saisissez le contenu de votre premier élément à transformer en accordéon (p. ex. la réponse à votre première question de FAQ).
    • Étiquette : Dans le champ Étiquette, ajoutez une étiquette descriptive (p. ex. « FAQ - Question 1 » ou “Nom de page - Question de FAQ 1”). Habituellement, l'étiquette doit être en anglais.
    • Message du journal de révisions : Inscrivez un message qui décrit vos modifications.
  4. Au besoin, créez d'autres fragments de contenu généraux en répétant les étapes précédentes.

Étape 2: Ajouter le contenu à une page de panneaux ou un mini-panneau

La prochaine étape consiste à ajouter le contenu que vous venez de créer à une page de panneaux ou un mini-panneau. Aux fins du présent exercice, on travaillera avec des pages de panneaux.

  1. Naviguez à « Structure » et ensuite à « Pages ».
  2. Repérez la page à laquelle vous souhaitez ajouter le contenu et cliquez sur le lien « Modifier » qui lui est associé.
  3. Dans le menu de gauche, cliquez sur « Contenu ».
  4. Dans la page qui suit, vous verrez de nombreuses sections définies, comme « Rangée 1 – Gauche » et « Rangée 1 – Droite ». Cliquez sur la roue dentée située dans le coin supérieur gauche de l'une de ces régions et, dans la liste déroulante, sélectionnez l'option « Ajouter du contenu ».
  5. Une fenêtre s'affichera. Dans le menu de gauche de cette fenêtre, cliquez sur « Contenu » et sélectionnez l'option « Fragment de contenu ».
  6. Choisissez le fragment de contenu que vous avez créé à l'étape 1 (p. ex. « FAQ - Question 1 »), réglez le Mode d'affichage à « Corps du contenu », puis cliquez sur le bouton « Terminer ».

Étape 3 : Ajouter du style au contenu pour le transformer en accordéon

  1. Cliquez sur la roue dentée située dans le coin supérieur droit du contenu que vous venez d'ajouter. Dans le menu déroulant, sous Style, sélectionnez « Changer ».
  2. Une nouvelle fenêtre s'affichera. Sélectionnez « Styles de composants » et cliquez sur le bouton « Suivant ».
  3. Dans la page subséquente, configurez les options suivantes :
    • Afficher le titre ?: Réglez cette option à « Oui », puis fournissez les titres français et anglais qui seront présentés sur la page (p. ex. la première question de votre FAQ).
    • Mode d'affichage : Réglez cette option à « Accordéon ».
    • Ancre du mode d'affichage : Ce champ vous permet de définir un nom d'ancre qui peut être utilisé pour lier directement à l'accordéon (p. ex. /nom-de-page#nom-d-ancre). Il est conseillé de mettre le nom d'ancre en lettres minuscules et d'éviter les accents et toute ponctuation, y compris les espaces.
    • Type de conteneur : Réglez cette option à « Aucun(e) ».
    • Marge externe : Configurez cette option au besoin.
  4. Enregistrez vos changements, puis cliquez sur le bouton « Mettre à jour et enregistrer » pour sauvegarder la page de panneaux entière.
» Envoyer vos commentaires
    Sujets: 
  • Soutien
    Types: 
  • Tutoriels
Haut de page