Widget d'accordéon d'élémenteur gratuit pour FAQ et bascules
Advanced Accordion est un widget Master Addons pour les sections FAQ et le contenu pliable, et il n'a pas besoin de Master Addons Pro. 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 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.
Accordéon avancé en un coup d'œil
Ce que fait le widget, lisez le code Master Addons.
| Article | Widget Accordéon avancé |
|---|---|
| Modes | Accordéon (un article ouvert à la fois) ou Basculer (plusieurs ouverts) |
| Articles | Autant que vous ajoutez à la liste |
| Ouvrir en charge | Actif par défaut par élément ; sans aucun ensemble, tous les éléments commencent fermés |
| Icônes | Développez et réduisez les icônes du widget, ainsi que les icônes personnalisées par élément |
| Titre HTML tag | H1 à H6, div ou span |
| Style de titre | Normal, Hover et Actif : arrière-plan, couleur du texte, typographie, bordure, rayon, ombre, rembourrage |
| Contenu | Texte et médias ; section enregistrée, widget ou modèle de page avec Pro |
| Couleur de fond par article | Avec Pro |
| Nicher | Grâce à une section ou un modèle enregistré avec Pro |
| Vitesse d'animation | Basculer la vitesse en millisecondes |
| Schéma FAQ | Non |
| Paramètre étendu des éléments maximum | Non ; utilisez le mode Accordéon pour un à la fois |
| Besoins | Élémenteur et maître Addons |
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 sans Pro. 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 ou span, 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.
Gardez un accordéon élément fermé par défaut
Chaque article dans Advanced Accordéon commence fermé à moins que vous ne vous allumiez Actif par défaut pour cela. Pour un accordéon entièrement fermé au chargement de la page, laissez cet interrupteur désactivé sur chaque élément. Pour ouvrir uniquement le premier élément, allumez-le pour le premier élément et laissez le reste éteint.
En mode Accordéon un élément reste ouvert à la fois, donc un deuxième clic sur un autre titre ferme le premier En mode Basculer les visiteurs peuvent ouvrir autant d'éléments qu'ils le souhaitent, et chaque élément que vous définissez avec Actif en tant que Par défaut s'ouvre ensemble en charge L'accordéon propre d'Elementor gère cela avec deux paramètres de widget à la place : un état par défaut (premier élément étendu ou tous effondrés) et un nombre maximum d'éléments étendus.
Aucun élément n'a Active en tant que Default allumé, donc les quatre réponses commencent à se fermer.
Type de bascule avec deux éléments définis sur Active as Default : tous deux s'ouvrent ensemble en charge.
Accordéon, Basculer ou Basculer la teneur ?
Trois de nos widgets ouvrent et ferment le contenu Choisissez ce que le visiteur doit voir en même temps.
| Tu veux | Utilisation |
|---|---|
| Une liste FAQ où une réponse est ouverte à la fois | Accordéon avancé, type accordéon |
| Une liste de spécifications ou une liste de contrôle où les visiteurs ouvrent plusieurs éléments | Accordéon avancé, type à bascule |
| Un commutateur qui échange une section entière, comme les prix mensuels et annuels | Basculer le contenu |
| Étiquettes côte à côte avec un panneau montrant | Onglets |
Pour les comparaisons plus longues, lisez basculer vs accordéon dans Elementor et onglets vs accordéon.
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 | Inclus sans Pro ; le contenu du modèle a besoin de 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 sans Pro ; sections, widgets ou modèles enregistrés 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 d'un schéma FAQ ou de widgets à l'intérieur de chaque élément sans addon 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, Table des matières, Boîte d'informations et Heures d'affaires.
FAQ Schéma et accordéon avancé
Le schéma FAQ est une donnée structurée qui marque un bloc de questions et réponses comme une FAQ Advanced Accordion ne le génère pas Les questions apparaissent toujours sur la page et restent explorables ; le widget n'ajoute tout simplement aucun balisage FAQPage.
Google a cessé d'afficher les résultats riches de FAQ dans la recherche le 7 mai 2026, de sorte que le balisage n'ajoute plus la liste déroulante des questions sous un résultat de recherche Certains autres outils peuvent encore le lire Si vous le voulez quand même, utilisez le widget Accordéon d'Elementor et activez son option Schéma FAQ, ou conservez Advanced Accordéon pour la conception et ajoutez le schéma FAQ via votre plugin SEO Choisissez une source de balisage FAQ par page, car deux blocs FAQPage pour les mêmes questions confondent plus qu'ils n'aident.
Exemples d'accordéons avancés
Quatorze démos live construites avec Advanced Accordion : pages FAQ, panneaux d'assistance, questions pré-vente, listes d'étapes et tableau de plans.
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.
Ai-je besoin de Master Addons Pro pour Advanced Accordion ?
Types d'accordéon et de bascule, actifs par défaut, icônes personnalisées et tout le travail de style sans pro. La section enregistrée, le contenu du widget et du modèle ainsi que les couleurs d'arrière-plan par élément sont 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.
Comment puis-je garder tous les articles en accordéon fermés sur la charge de la page ?
Laissez Active comme Par défaut désactivé sur chaque élément Advanced Accordion ouvre uniquement les éléments où cet interrupteur est activé, donc sans aucun paramètre, chaque élément commence fermé et le visiteur ouvre celui dont il a besoin.
Pourquoi mon accordéon ne s'ouvre pas ?
Vérifiez que Advanced Accordéon est activé sous Addons principaux, Widgets, puis effacez votre cache Si un plugin de vitesse retarde JavaScript jusqu'au premier défilement ou à la première pression, les éléments ne s'ouvriront pas avant la fin de ce délai, alors excluez-en les scripts Master Addons.
L'accordéon ajoute-t-il un schéma FAQ ?
No. Advanced Accordion ne génère pas de données structurées FAQPage. Google n'affiche plus les résultats riches de FAQ (depuis mai 2026), donc le balisage compte moins qu'avant. Si vous le souhaitez toujours, utilisez le widget Accordéon d'Elementor avec son option FAQ Schema, ou ajoutez-le via un 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 en tant que défaut Avec le type Accordéon, définissez-le sur un seul élément : si deux éléments l'ont, les deux s'ouvrent en charge et le premier clic ferme tout sauf l'élément cliqué.
Puis-je mettre un accordéon dans un autre accordéon ?
Oui, avec Maître Addons Pro: enregistrez l'accordéon intérieur sous forme de section ou de modèle, puis choisissez-le comme type de contenu d'un article. Le widget d'accordéon imbriqué de Free Elementor niche également des accordéons sans addon.
Puis-je faire un accordéon horizontal ?
No. Advanced Accordion empile les éléments verticalement et ouvre chaque réponse sous son titre Pour les étiquettes côte à côte, le Onglets widget est le plus proche ajustement.
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
