Bloc Accordéon

Les accordéons affichent des sections de contenu réductibles, chacune avec un en-tête cliquable qui développe ou réduit le contenu. Dans ce guide, vous apprendrez à ajouter, personnaliser et utiliser le bloc Accordéon sur votre site WordPress.com.

Utilisez des accordéons pour organiser les informations, réduire la longueur des pages et permettre aux visiteurs de se concentrer sur le contenu qui leur importe le plus. Les accordéons fonctionnent bien pour organiser le contenu que les visiteurs peuvent vouloir parcourir de manière sélective. Voici quelques façons populaires de les utiliser :

• Conditions générales : présentez des informations juridiques ou politiques sans submerger les visiteurs.
• FAQ : regroupez les questions fréquemment posées avec des réponses extensibles.
• Détails du produit : affichez les spécifications, les guides de tailles ou les informations de livraison dans des sections repliables.
• Consignes étape par étape : divisez les didacticiels ou les guides en étapes faciles à assimiler.
• Horaires des événements : organisez les ordres du jour ou les itinéraires par heure ou par session.
• Bios d’équipe : présentez de brèves présentations avec des détails extensibles sur chaque membre de l’équipe.

Pour ajouter le bloc Accordéon à une page ou un article, procédez comme suit :

1. Consultez le tableau de bord de votre site.
2. Accédez à Pages ou Articles et cliquez sur la page ou l’article auquel vous souhaitez ajouter l’accordéon.
3. Cliquez sur l’icône de l’outil d’insertion de bloc +.
4. Recherchez le « bloc Accordéon », puis cliquez dessus pour l’ajouter à l’article ou à la page.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.

La première fois que vous ajoutez le bloc Accordéon à votre article ou à votre page, vous verrez les sections suivantes :

• Élément accordéon : chaque section repliable, contenant un titre et un panneau.
  • Titre de l’accordéon : titre cliquable qui développe ou réduit le contenu dans l’accordéon.
  • Panneau de l’accordéon : contenu révélé lorsque l’on clique sur l’en-tête.

Pour terminer votre accordéon :

1. Ajoutez le titre ou le texte d’en-tête que vous souhaitez toujours voir apparaître.
2. Cliquez à l’intérieur de la zone du panneau accordéon ou utilisez la vue en liste pour la sélectionner.
3. Cliquez sur l’outil d’insertion de blocs + pour ajouter des blocs dans la zone du panneau de l’accordéon. Vous pouvez ajouter tout type de contenu, y compris du texte, des images, des vidéos et d’autres blocs.

Le bloc Accordéon comprend des réglages qui contrôlent le comportement de l’accordéon. Pour accéder à ces réglages, sélectionnez le bloc accordéon parent à l’aide de la vue en liste et ouvrez les réglages du bloc dans la colonne latérale droite.

Lorsque l’option « Les blocs intérieurs utilisent la largeur du contenu » est activée, les blocs à l’intérieur du bloc Accordéon adhèrent à ces réglages de largeur :

• Contenu : largeur de la zone de contenu des blocs non définie sur grande largeur ou pleine largeur.
• Large : largeur du contenu des blocs définie sur grande largeur.

Lorsqu’elle est activée, l’ouverture d’un élément de l’accordéon ferme automatiquement tous les autres éléments ouverts. Votre contenu reste ainsi bien organisé et les visiteurs peuvent se concentrer sur une section à la fois.

Basculer l’icône de développement/réduction (généralement un « + » ou une flèche) qui apparaît à côté de chaque en-tête d’accordéon. Désactivez cette option pour un rendu plus net et minimaliste.

Choisissez si l’icône apparaît à gauche ou à droite de l’en-tête de l’accordéon.

Vous pouvez définir des éléments spécifiques de l’accordéon à afficher comme développés lors du chargement de la page. Pour ce faire, procédez comme suit :

1. Utilisez la vue en liste pour sélectionner le bloc d’élément de l’accordéon que vous souhaitez ouvrir par défaut.
2. Dans la colonne latérale des réglages du bloc, activez l’option « Ouvrir par défaut ».

Dans la colonne latérale des réglages du bloc, cliquez sur l’icône Styles pour accéder aux réglages de design du bloc. L’icône Styles se présente sous la forme d’un cercle à moitié plein :

Options disponibles :

• Couleurs : définissez les couleurs d’arrière-plan et de texte des en-têtes et des panneaux de l’accordéon.
• Image d’arrière-plan : ajoutez une image d’arrière-plan au bloc accordéon parent global.
• Typographie : ajustez la taille de la police et le style du texte.
• Dimensions : contrôlez les marges intérieures et les marges autour des éléments de l’accordéon.
• Bordure et ombre : ajoutez une bordure et une ombre à l’accordéon.