Élément d'accordéon

Qu'est-ce qu'un élément d'accordéon ?

Un accordéon est une liste d'en-têtes empilés verticalement sur lesquels les visiteurs peuvent cliquer pour développer ou réduireCela permet aux clients de contrôler les informations qu'ils voient, gardant votre page organisée et facile à parcourir.

Un cas d'utilisation courant pour la conception d'accordéon est le Page FAQ, où plusieurs questions sont répertoriées et les spectateurs peuvent simplement cliquer sur une question pour révéler la réponse qu'ils recherchent :

Comment ajouter l'élément Accordéon dans GemPages

Pour ajouter l'élément Accordéon à votre page, veuillez suivre les étapes ci-dessous :

Étape 1: Dans le Tableau de bord GemPages, sélectionnez votre page pour entrer dans l'éditeur.

Une fois terminé, les configurations de l'élément Accordéon seront présentées dans la barre latérale gauche :

Configuration de l'élément accordéon

L'élément Accordéon de GemPages est entièrement personnalisable. Les paramètres sont divisés en deux onglets principaux: Paramètres Avancé.

1. L'onglet Paramètres

Gestion des articles

• Pour ajouter un élément:Cliquez simplement sur le Ajouter plus option. 
• Pour dupliquer un élément: Passez la souris sur la diapositive souhaitée et cliquez sur l’icône dupliquer. 
• Pour supprimer un élément: Passez la souris sur la diapositive spécifique et cliquez sur l’icône de la corbeille.

Style d'article

• Arrière-plan : couleur d'arrière-plan pour chaque élément (y compris l'état réduit et développé de l'élément) dans l'accordéon.

• Bordure : personnalisez la couleur, l’épaisseur et le contour de la bordure.

• Coin : ajustez le rayon du coin pour les bords arrondis.

• Ombre : ajoutez des effets d'ombre pour plus de profondeur.

En-tête de l'élément

• Icône de titre : les paramètres de l'icône de l'en-tête d'accordéon.

• Titre : Le style de texte du titre de l'en-tête.

• Développer l'icône : les paramètres de l'icône développée de chaque élément de l'accordéon.

• Hauteur : la hauteur de l'en-tête accordéon. Par défaut, sa hauteur est définie sur Auto, ce qui signifie qu'elle s'ajuste automatiquement au contenu de l'en-tête. 

• Arrière-plan : modifiez la couleur d’arrière-plan de l’en-tête.

• Rembourrage : Le remplissage de l'en-tête Accordéon crée l'espacement intérieur du bord au contenu à l'intérieur.

• Bordure : personnalisez les bordures d’en-tête.

• Aligner : alignement du contenu de l'en-tête (y compris l'icône d'en-tête et le titre).

Contenu de l'article

• Rembourrage : le remplissage de la zone de contenu pour chaque élément d'accordéon

Espacement des éléments

• Espacement : espacement entre chaque élément de l'accordéon. Espacement par défaut : 16 px.

Effect

• Élément de survol : les paramètres du style d'en-tête accordéon lors du survol.

• Développer l'en-tête : paramètres du style d'en-tête accordéon une fois développé. Cliquer sur le paramètre « Développer » ouvre la fenêtre contextuelle contenant les paramètres de développement.

Taille

• Largeur : taille du contenu réel à l'intérieur de l'élément Accordéon.

Forme

Ces paramètres de forme concernent l'enveloppe de l'accordéon.

• Frontière
• CORNER
• Shadow

Condition d'affichage

• Mode développement:Sélectionnez le nombre d'articles qu'un client peut ouvrir simultanément.
• Le mode unique leur permet d'ouvrir un seul élément.
• L'option multiple leur permet d'ouvrir plus d'un élément en même temps.
• Extension automatique: Définissez l'un des éléments de l'accordéon pour qu'il soit initialement ouvert par défaut.

Lorsque cette option est définie sur Oui, le paramètre de choix de l'élément développé par défaut apparaîtra. Sélectionnez l'élément développé par défaut. Si plusieurs éléments sont ouverts par défaut, séparez-les par une virgule.

Aligner

• L'alignement sera désactivé lorsque la largeur de l'élément est de 100 %.
• Sinon, les options d'alignement par défaut sont Aligner au centre.

2. L'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Onglet Avancé et suivez les instructions dans cet article.