Éditeur Studio : Ajouter et personnaliser un accordéon
Temps de lecture : 6 min
Utilisez l'élément Accordéon pour afficher une importante quantité de contenu dans un petit espace. En permettant aux visiteurs d'agrandir et de réduire des éléments, ils peuvent facilement trouver les informations dont ils ont besoin sans avoir à faire défiler une longue liste.
Dans cet article, découvrez comment :
Ajouter un élément Accordéon
Sélectionnez un design d'accordéon que vous aimez pour commencer. Vous pouvez personnaliser chaque élément de votre accordéon pour afficher le contenu de votre client. Ajoutez les éléments dont vous avez besoin et organisez-les comme vous le souhaitez à l'intérieur du conteneur.
Pour ajouter un élément Accordéon :
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Cliquez sur Outils de mise en page.
- Cliquez sur Accordéons.
- Faites glisser un accordéon que vous aimez sur votre page.
- Modifiez le contenu des éléments de l'accordéon :
- Sélectionnez l'élément Accordéon que vous venez d'ajouter.
- Cliquez sur Gérer les éléments.
- Cliquez sur l'élément que vous souhaitez modifier.
Suggestion : Cela ouvre l'élément sur la toile afin que vous puissiez voir ce qu'il affiche actuellement. - Ajoutez les éléments et informations pertinentes à votre élément.
Ajouter et gérer des éléments Accordéon
Gérez les éléments qui apparaissent dans votre élément Accordéon. Vous pouvez ajouter plus d'éléments pour le contenu de votre client, leur donner de nouveaux titres et modifier leur ordre d'apparition.
Pour ajouter et gérer des éléments Accordéon :
- Sélectionnez l'élément Accordéon.
- Cliquez sur Gérer les éléments.
- Survolez l'élément et cliquez sur l'icône Plus d'actions
. - Choisissez ce que vous voulez faire de cet élément accordéon : Dupliquer, Renommer ou Supprimer.
Suggestions :
- Cliquez sur Ajouter un élément en bas du panneau pour ajouter un nouvel élément vide.
- Vous pouvez modifier l'ordre de vos articles. Maintenez l'icône Réorganiser
à côté d'un élément et faites-le glisser à l'endroit souhaité.
Choisir comment l'Accordéon s'ouvre et se ferme
Décidez de l'apparence de votre Accordéon lorsque les visiteurs chargent la page. Vous pouvez avoir tous les éléments ouverts pour que les informations soient facilement accessibles, ou fermés pour un aspect plus minimaliste. Vous pouvez également choisir si les visiteurs peuvent ouvrir plusieurs éléments en même temps.
Pour choisir comment l'Accordéon s'ouvre et se ferme :
- Sélectionnez l'élément Accordéon.
- Cliquez sur l'icône Paramètres
. - Sélectionnez une option sous Choisir l'état par défaut :
- Tous les éléments fermés : Les visiteurs voient d'abord les éléments Accordéon fermés. Ils sélectionnent l'élément à agrandir pour en savoir plus.
- Premier élément ouvert : Les visiteurs voient le contenu de l'élément du haut tandis que les autres éléments sont fermés.
- Tous les éléments ouverts : Les visiteurs voient le contenu de tous les éléments lorsque la page se charge.
- Cliquez sur le curseur Autoriser plusieurs éléments ouverts :
- Activé : Les visiteurs peuvent avoir autant d'éléments ouverts qu'ils le souhaitent dans l'accordéon.
- Désactivé : Les visiteurs ne peuvent ouvrir qu'un élément à la fois.
- (Facultatif) Appliquez un effet de transition qui apparaît lorsque les visiteurs cliquent sur un élément pour l'ouvrir.
Remarque :
L'option pour autoriser plusieurs éléments ouverts dans l'Accordéon n'est pas disponible si vous choisissez Tous les éléments ouverts comme état par défaut.
Personnaliser le design d'un accordéon
Vous pouvez concevoir chaque partie de l'accordéon pour qu'elle corresponde au reste de votre page. Personnalisez les titres des éléments, les conteneurs qui affichent le contenu de chaque élément, ou tout l'espace d'un élément (titre et conteneur inclus).
Pour personnaliser un accordéon :
- Sélectionnez l'élément Accordéon.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'Éditeur.
- Sélectionnez le design que vous souhaitez dans le menu déroulant :
- Titres : Ce sont les titres de vos éléments. Vous pouvez personnaliser le design des titres pour qu'ils soient différents lorsque les visiteurs les survolent.
- Conteneurs : Ce sont les conteneurs qui affichent le contenu de chaque élément.
- Éléments d' accordéon : Cela contrôle tout l'espace d'un élément d'accordéon (titre et conteneur inclus).
- Utilisez les options disponibles pour choisir différents arrière-plans, polices, angles, bordures et plus encore.
Ajuster la mise en page de l'accordéon
Ajustez la mise en page de l'élément Accordéon à vos besoins. Vous pouvez choisir l'alignement, le remplissage et la position des titres de vos éléments, ainsi que l'icône qui apparaît à côté de chaque titre.
Suggestion :
Vous pouvez appliquer une grille CSS à chaque élément individuel pour créer votre mise en page parfaite au pixel près.
Pour ajuster la mise en page de l'Accordéon :
- Sélectionnez l'élément Accordéon.
- Cliquez sur l'icône Mise en page
. - Ajustez la mise en page de l'élément Accordéon :
- Choisir une icône : Sélectionnez l'icône qui apparaît à côté des titres de vos éléments : Flèche ou Plus.
- Position de l'icône : Décidez si l'icône apparaît à gauche ou à droite de vos titres.
- Remplissage du titre : Faites glisser les curseurs pour ajouter un remplissage horizontal et vertical autour des titres des éléments.
Cela vous a-t-il aidé ?
|