Widget d'accordéon d'élémenteur gratuit pour FAQ et bascules
Advanced Accordion est un widget Master Addons gratuit pour les sections FAQ et le contenu pliable Choisissez Accordéon pour garder un élément ouvert à la fois ou Basculer pour laisser les visiteurs en ouvrir plusieurs Chaque élément a un titre et une réponse, peut commencer à s'ouvrir, et peut utiliser ses propres icônes d'extension et d'effondrement Titres de style pour les états Normal, Hover et Actif, puis styliser les réponses et les icônes. Maître Addons Pro ajoute des sections enregistrées, des widgets enregistrés et des modèles de pages comme contenu d'élément, c'est également ainsi que vous imbriquez un accordéon dans un autre.
Comment créer une FAQ Accordéon dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons de WordPress.org.
- Vérifiez que Advanced Accordion est allumé ci-dessous Additions maîtresses, widgets.
- Dans l'éditeur Elementor, recherchez Accordéon avancé et faites-le glisser sur la page.
- Définissez le type d'accordéon sur l'accordéon pour une FAQ classique.
- Ajoutez un élément par question, tapez la réponse et définissez votre question la plus posée sur Active par défaut.
- Définissez le titre HTML Tag sur H3 pour que les questions deviennent des titres.
- Stylez les titres, les réponses et les icônes dans l'onglet Style.
À propos du schéma FAQ : ce widget ne génère pas de données structurées FAQPage. Si vous souhaitez des résultats riches en FAQ, activez l'option FAQ Schema dans le propre widget Accordéon d'Elementor ou ajoutez les questions avec un bloc FAQ de plugin SEO. Chaque paramètre est couvert dans le Paramètres avancés du widget Accordéon.
Comportement accordéon ou basculer
Type d'accordéon définit le comportement : Accordéon ferme l'élément ouvert lorsqu'un autre s'ouvre, et Basculer en laisse plusieurs rester ouverts Pour chaque élément, ajoutez le Titre et le Contenu, activez Actif par défaut pour l'ouvrir en charge, et allumer Activer l'icône personnalisée pour ses propres icônes. Type de contenu est un contenu simple dans le plugin gratuit. Section enregistrée, widget enregistré et modèle de page enregistrée, plus une couleur d'arrière-plan par élément, besoin de Pro.
- Basculez la vitesse en millisecondes pour l'animation ouverte et fermée.
- Titre HTML Tag de H1 à H6, div, span ou a, donc les questions peuvent être de véritables titres.
- Accordéons imbriqués : enregistrez un accordéon comme modèle et chargez-le dans un élément avec Pro.
Style et structure des titres basés sur l'État
La barre de titre est ce que les utilisateurs cliquent sur « chaque état visuel intentionnel » Style le titre séparément pour ses états Normal, Hover et Actif (ouvert).Pour chaque état, définissez un type d'arrière-plan unique (couleur, dégradé), Couleur du texte et Typographie Contrôlez le titre Alignez, Rembourrage, Bordure, Rayon de bordure, et ajoutez un Box Shadow Ce niveau de détail vous permet de créer un parcours visuel clair : un défaut neutre, un survol invitant et un état de” distinct qui confirme l'action de l'utilisateur.
- Conception triple état : appliquez des styles distincts aux barres de titre normales, en vol stationnaire et actives.
- Arrière-plans avancés : utilisez des couleurs unies ou des dégradés pour différents états afin de créer de la profondeur.
- Contrôle complet de la boîte : ajustez le rembourrage, les bordures et l'ombre de la boîte pour faire de chaque barre de titre un composant conçu.
Icônes à bascule personnalisables avec double état
Déplacez-vous au-delà de l'icône triangulaire générique Activez l'icône personnalisée pour choisir n'importe quelle icône de la bibliothèque pour les actions Expand (état fermé) et Collapse (état ouvert).Positionnez l'icône vers la gauche ou la droite. Ensuite, stylisez ces icônes indépendamment pour les états Normal, Hover et Actif, en modifiant leur couleur, leur taille et leur arrière-plan Ajustez l'espacement et le remplissage des icônes autour de l'icône pour un alignement parfait Cela transforme un indicateur fonctionnel en une partie cohérente de votre langage de conception.
- Icônes doubles : définissez différentes icônes pour les états plus“” (expand) et “moins” (collapse).
- Style d'icône spécifique à l'État : modifiez la couleur et l'arrière-plan de l'icône lorsque l'élément est plané ou actif.
- Alignement correctement : contrôlez l'alignement, la position et l'espacement des icônes par rapport au texte du titre.
Zone de contenu et style des conteneurs
Le contenu qui glisse vers le bas mérite sa propre considération de conception Style la zone Contenu avec sa propre Couleur d'arrière-plan, Couleur du texte, Typographie, et Padding interne Ajouter un ombre de texte pour la lisibilité si nécessaire Ensuite, style le conteneur d'éléments global qui contient toutes les sections d'accordéon : définir l'espacement entre les éléments, une bordure globale, Rayon de frontière, et ombre de boîte Cela garantit que le widget entier se sent comme un composant unifié et poli, et le contenu ouvert est facile et agréable à lire.
- Conception de zone de contenu : stylisez l'arrière-plan et le texte du contenu déroulant pour une lisibilité optimale.
- Polonais au niveau du conteneur : appliquez Border Radius et Box Shadow à l'ensemble du groupe d'accordéons.
- Espacement de l'article : contrôlez l'espacement (marge) entre chaque article en accordéon pour un look épuré et séparé.
Accordéon élémentor vs Accordéon avancé Master Addons
Free Elementor a maintenant son propre widget Accordéon Voici comment les deux se comparent, afin que vous puissiez choisir le bon.
| Caractéristique | Accordéon Élémenteur | Accordéon avancé Master Addons |
|---|---|---|
| Prix | Gratuit en Elementor | Gratuit, avec le contenu du modèle dans Pro |
| Schéma FAQ | FAQ Option schéma | Aucune sortie de schéma |
| Contenu imbriqué | Déposez tous les widgets dans chaque élément, y compris un autre accordéon | Texte en libre ; sections enregistrées, widgets ou modèles avec Pro |
| Comportement ouvert | État par défaut et éléments maximum développés | Accordéon ou Basculer, plus Actif par défaut par article |
| Icônes par élément | Icônes partagées | Icônes d'extension et d'effondrement personnalisées par élément |
| Style de titre | Normal, Hover et Actif | Normal, Hover et Actif avec arrière-plan, bordure et ombre |
Choisissez l'accordéon d'Elementor lorsque vous avez besoin gratuitement du schéma FAQ ou des widgets à l'intérieur des éléments Choisissez l'accordéon avancé pour les icônes par élément et Basculez le comportement avec un style détaillé Widgets associés : Basculer le contenu, Onglets et Table des matières.
Questions fréquemment posées pour l'accordéon avancé
Quelle est la différence pratique entre les“Accordion” et les“Toggle” type ?
Accordéon : Un seul élément peut être ouvert à la fois L'ouverture d'un nouvel élément ferme automatiquement le précédent Meilleur pour les pages FAQ ou les instructions séquentielles où vous souhaitez minimiser le défilement et concentrer l'attention.
Basculer : plusieurs éléments peuvent être ouverts simultanément Les utilisateurs peuvent développer plusieurs éléments pour comparer ou rassembler des informations. Idéal pour les listes de contrôle de fonctionnalités, les listes de spécifications de produits ou le contenu où les utilisateurs doivent voir plusieurs sections à la fois.
Le widget Advanced Accordéon est-il gratuit ?
Oui. Le widget est gratuit avec les types Accordéon et Basculer, Actif par défaut, icônes personnalisées et style complet. Section enregistrée, contenu du widget et du modèle et couleurs d'arrière-plan par élément nécessaires Maître Addons Pro.
Quels sont les types de contenu Section enregistrée et Modèle de page enregistrée ?
Ce sont des options Master Addons Pro qui chargent quelque chose de votre bibliothèque de modèles Elementor dans un élément, comme une section de formulaire de contact ou un autre accordéon C'est ainsi que vous construisez des accordéons imbriqués avec ce widget.
L'accordéon ajoute-t-il un schéma FAQ ?
No. Advanced Accordion ne génère pas de données structurées FAQPage. Pour les résultats riches en FAQ, utilisez le widget Accordion d'Elementor avec son option FAQ Schema ou un bloc FAQ de plugin SEO.
Puis-je contrôler la vitesse d'animation d'ouverture et de fermeture ?
Oui. Dans l'onglet Contenu, vous trouverez Toggle Speed (ms).La valeur est en millisecondes (par exemple, 300).Un nombre inférieur (comme 200) le rend plus rapide et plus vif ; un nombre plus élevé (comme 500) le rend plus lent et plus délibéré.
Comment puis-je ouvrir un élément par défaut ?
Ouvrez l'élément dans l'onglet Contenu et activez Active as Default Avec le type Accordéon, définissez-le sur un seul élément.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
