Centre régional universitaire d'informatique de Kaiserslautern-Landau

Élément de contenu "Accordéon

Instructions avec exercice

À propos de l'élément de contenu

L'accordéon est un élément de commande qui affiche les contenus en les dépliant dès que le visiteur de la page clique dessus.

  • Les titres cliquables des contenus sont placés les uns en dessous des autres comme une liste.
  • Si l'on clique sur un titre, le contenu de l'élément en accordéon se déploie.
  • Si l'on clique sur un deuxième titre, ce contenu s'ouvre et le premier élément en accordéon se referme.
  • L'élément accordéon ne doit contenir que du texte.

Utilisation :

  • Pour des informations détaillées structurées qui
    • rendraient le site web peu lisible et
    • qui ne sont pas assez volumineuses pour une page Web propre.
  • Le contenu n'est pas essentiel pour le site web et peut être ignoré.
Voici à quoi cela ressemble

Vue en direct de l'élément de contenu

des informations détaillées qui

  • rendraient le site web peu lisible et
  • qui ne sont pas assez volumineuses pour un site web à part entière,

peuvent très bien être placées dans des accordéons.

Remarque : cet élément en accordéon contient peu d'informations, mais celles-ci sont tellement essentielles qu'elles sont plus faciles à lire sans interaction. C'est pourquoi elles figurent à nouveau dans le texte ci-dessus.

L'accordéon sert à placer sur une page des informations détaillées plus étendues, mais pour lesquelles il ne vaut pas la peine de créer une page individuelle, sans pour autant la surcharger. Les images, en revanche, attirent l'attention du visiteur de la page et perdent cette fonction dans un accordéon.

Notre expérience montre que les rédacteurs* ont tendance à "nettoyer" leurs pages web surchargées en accordéon, tout en cachant les informations essentielles du site. Ce faisant, ils négligent le fait qu'un accordéon "coûte" à un visiteur du site une interaction ; surtout si toutes les informations contenues dans l'accordéon sont en fait pertinentes. La probabilité qu'un visiteur quitte une page parce qu'elle coûte trop d'interaction et qu'il suppose donc que l'information recherchée ne se trouve pas sur la page est relativement élevée.

Comme les accordéons présentent d'autres inconvénients, nous avons décidé de ne plus autoriser les images dans l'accordéon. Si une information détaillée doit être enrichie d'images, elle peut probablement aussi figurer sur une page séparée.

Remarque : cette fois, les informations dans l'accordéon sont détaillées et clarifient une question souvent posée. Cependant, les informations générales sur l'accordéon les surchargeraient. Ceci est un bon exemple d'accordéon.

Pas à pas

Instructions illustrées

Étape 1 :

Il faut d'abord créer un élément de contenu"Accordion" à l'endroit correspondant, qui se trouve sous l'onglet Interactive .

Étapes 2 et 3 :

2. il faut ensuite attribuer un titre et cliquer sur"Créer un nouvelélément" sous"Accordion-Item".
3. il est maintenant possible d'ajouter l'en-tête et le texte .

Auto-apprentissage TYPO3

Exercice

  1. Créez un élément de contenu "Accordéon".
  2. Donnez à l'accordéon le titre "FAQ".
  3. Créez deux éléments accordéon. Remplissez-les avec du texte issu du générateur de texte fictif.
  4. Affichez le résultat dans le frontend.

Travail de tête

Considérez une de vos pages (ou une page quelconque) contenant relativement beaucoup d'informations :

  • Voyez-vous des informations qui doivent être saisies dans tous les cas ?
  • Y a-t-il des informations qui pourraient être trop détaillées pour certains visiteurs de la page ?
  • Ces informations peuvent-elles être ignorées ?
  • Réfléchissez en gros à la manière dont vous restructureriez la page. Les accordéons peuvent-ils améliorer la vue d'ensemble ?
Vers le Sandbox

Aller de l'avant

Aller à l'aperçuSujet suivant