Le bloc Accordéon vous permet d'ajouter des sections de texte extensibles et repliables à vos pages SeedProd. Ce bloc vous aide à organiser de grandes quantités de contenu dans un format compact et convivial que les visiteurs peuvent explorer à leur rythme.
Les blocs accordéon sont parfaits pour les FAQ, les listes de fonctionnalités, les spécifications de produits, les conditions générales ou tout autre contenu pour lequel vous souhaitez présenter clairement les informations sans submerger les visiteurs avec des murs de texte. En permettant aux utilisateurs de cliquer pour afficher uniquement les informations dont ils ont besoin, vous créez une expérience de page plus claire et plus attrayante.
Ajouter le bloc Accordéon à vos pages
Suivez ces étapes pour ajouter un bloc Accordéon à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Accordéon dans la section souhaitée de votre page.
Le bloc Accordéon apparaît dans le panneau Blocs et peut être glissé dans n'importe quelle section ou colonne de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Accordéon pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez gérer vos éléments d'accordéon et personnaliser leur apparence.
Éléments de l'accordéon :
- Accordéon 1, Accordéon 2, etc. : cliquez sur chaque élément de l'accordéon pour modifier son titre et son contenu. Chaque élément représente une section repliable que les utilisateurs peuvent développer ou réduire.
- Ajouter un nouvel élément : cliquez sur ce bouton pour ajouter des sections supplémentaires à votre bloc. Vous pouvez ajouter autant d'éléments que nécessaire pour organiser efficacement votre contenu.
Typographie et espacement :
- Taille de la police : ajustez la taille du texte dans votre contenu accordéon en fonction de vos préférences en matière de conception.
- Espace entre : contrôlez l'espacement vertical entre les éléments de l'accordéon (la valeur par défaut est 24 pixels). Augmentez cette valeur pour obtenir plus d'espace ou diminuez-la pour obtenir une mise en page plus compacte.
Personnalisation des icônes :
- Alignement de l'icône : choisissez l'emplacement de l'icône d'expansion/réduction par rapport au titre de l'accordéon (généralement alignement à gauche ou à droite).
- Icône fermée : sélectionnez l'icône qui s'affiche lorsqu'une section accordéon est réduite. Cela aide les utilisateurs à identifier les sections qu'ils peuvent développer.
- Couleur de l'icône fermée : choisissez la couleur de l'icône lorsque l'accordéon est replié.
- Icône ouverte : sélectionnez l'icône qui s'affiche lorsqu'une section accordéon est développée, fournissant ainsi un retour visuel sur l'état de la section.
- Couleur de l'icône ouverte : choisissez la couleur de l'icône lorsque l'accordéon est déployé.
L'onglet Contenu propose des options permettant de gérer les éléments de l'accordéon, d'ajuster la typographie, de contrôler l'espacement et de personnaliser les icônes d'expansion/réduction.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Accordéon :
Styles :
- Typographie : ajustez la police, le poids, le style et d'autres propriétés du texte pour le contenu de l'accordéon.
- Couleur du texte : définissez la couleur du texte à l'intérieur des sections de contenu de l'accordéon.
- Typographie des en-têtes : contrôlez les propriétés des polices spécifiquement pour les titres/en-têtes en accordéon.
- Couleur de l'en-tête : choisissez la couleur des en-têtes de l'accordéon lorsqu'ils sont fermés.
- Couleur d'en-tête ouverte : définissez une couleur différente pour les en-têtes lorsque leurs sections sont développées, afin d'offrir un retour visuel clair.
- Couleur d'arrière-plan : ajoutez une couleur d'arrière-plan à vos sections accordéon pour une meilleure séparation visuelle.
- Couleur du séparateur : choisissez la couleur des lignes qui séparent les éléments de l'accordéon.
- Ombre de texte : ajoutez des effets d'ombre à votre texte en accordéon pour plus de profondeur et de lisibilité.
- Ombre : appliquez des effets d'ombre à l'ensemble du bloc accordéon ou à des éléments individuels.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc accordéon (haut, droite, bas, gauche). Cela détermine l'espace qui apparaîtra entre l'accordéon et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur dans vos sections accordéon (haut, droite, bas, gauche). Cela crée un espace entre le contenu et les bordures de l'accordéon.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc accordéon. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur de l'accordéon. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, aria-label|Section FAQ).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc accordéon sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc accordéon sur les tablettes.
- Masquer sur mobile : masquer le bloc accordéon sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque l'accordéon apparaît à l'écran. Cela ajoute un intérêt visuel et attire l'attention sur votre contenu.
L'onglet Avancé offre de nombreuses options de style, notamment la typographie, les couleurs, l'espacement et les effets visuels, afin de correspondre à votre marque.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé la configuration du bloc Accordéon et personnalisé son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Accordéon à votre page ! Ce bloc polyvalent vous aide à présenter de grandes quantités d'informations dans un format clair et convivial qui encourage l'engagement sans submerger les visiteurs. Testez différentes couleurs d'en-tête, différents styles d'icônes et différentes options d'espacement pour créer un accordéon qui correspond à votre marque et répond aux besoins de votre public.