Editor X : Ajouter et personnaliser un accordéon

Temps de lecture : 6 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Utilisez l'élément Accordéon pour afficher une grande 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.
Un GIF montrant un exemple de l'élément Accordéon dans un site Editor X
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 votre contenu. 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 :

  1. Cliquez sur Ajouter des éléments  en haut de l'Editor X.
  2. Cliquez sur Outils de mise en page.
  3. Cliquez sur Accordéon.
  4. Faites glisser un Accordéon que vous aimez sur votre page. 
  5. Modifiez le contenu de chaque élément Accordéon :
    1. Cliquez sur l'élément Accordéon dans votre Éditeur.
    2. Cliquez sur Gérer les éléments.
    3. Cliquez sur l'élément que vous souhaitez modifier. Cela ouvre l'élément pour que vous puissiez voir ce qu'il affiche actuellement.
    4. Ajoutez les éléments et informations pertinents à votre élément.
Une capture d'écran du panneau Ajouter des éléments où vous pouvez ajouter un nouvel élément Accordéon

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 votre contenu, leur donner de nouveaux titres et modifier leur ordre d'apparition.

Pour ajouter et gérer des éléments Accordéon :

  1. Cliquez sur l'élément Accordéon dans votre Éditeur.
  2. Cliquez sur Gérer les éléments.
  3. Survolez l'élément et cliquez sur l'icône Plus d'actions .
  4. Choisissez que 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é.
Une capture d'écran du panneau Gérer Accordéon où vous pouvez ajouter, renommer, dupliquer, supprimer et réorganiser des éléments

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 minimal. 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 :

  1. Cliquez sur l'élément Accordéon dans votre Éditeur.
  2. Cliquez sur l'icône Paramètres .
  3. 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. 
  4. 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.
  5. (Facultatif) Ajoutez un effet de transition qui apparaît lorsque les visiteurs cliquent sur un élément pour l'ouvrir.
Une capture d'écran du panneau Paramètres d'Accordéon, où vous pouvez définir la façon dont il s'ouvre et se ferme

Concevoir un accordéon

Vous pouvez concevoir le design de chaque partie de l'Accordéon de manière à ce qu'il soit assorti au reste de votre page. Personnalisez les titres des éléments, les conteneurs qui affichent le contenu de chaque élément ou l'espace entier d'un élément (titre et conteneur inclus).

Pour concevoir un accordéon :

  1. Cliquez sur l'élément Accordéon dans votre Éditeur.
  2. Cliquez sur l'icône Inspecteur  en haut de l'Éditeur X.
  3. Cliquez sur l'onglet Design .
  4. Sélectionnez le design que vous souhaitez dans le menu déroulant :
    • Titres : Ce sont les titres de vos éléments. Vous pouvez concevoir les 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 Accordéon: Cela contrôle l'espace entier d'un élément Accordéon (titre et conteneur inclus).
  5. Utilisez les options disponibles pour choisir différents arrière-plans, polices, angles, bordures et plus encore.
Une capture d'écran de l'onglet Design dans l'Inspecteur, où vous pouvez personnaliser l'élément Accordéon

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, l'espacement et la position des titres de vos éléments, ainsi que l'icône qui apparaît à côté de chaque titre.

Pour ajuster la mise en page de l'Accordéon :

  1. Cliquez sur l'élément Accordéon dans votre Éditeur.
  2. Cliquez sur l'icône Mise en page .
  3. 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. 
Une capture d'écran du panneau Mise en page d'accordéon dans l'Editor X
Suggestion :
Chaque élément est livré avec une grille que vous pouvez ajuster selon vos besoins. Ajoutez plus de rangées et de colonnes pour créer votre mise en page parfaite au pixel près.

Cela vous a-t-il aidé ?

|