Une section FAQ vit ou meurt par son accordéon : les questions restent compactes, les réponses apparaissent sur clic, et la page ne se sent jamais longue Le Accordéon avancé widget dans Modules complémentaires principaux pour Elementor construit ce modèle avec une touche que la plupart des widgets en accordéon sautent : chaque élément peut contenir du texte brut ou un modèle d'élément entier enregistré, donc une réponse peut être un formulaire de contact, une table de tarification ou même un autre accordéon.
Ce guide parcourt le widget sur une section FAQ réelle, de la liste des articles à l'accordéon stylisé sur la page live.
Vous cherchez ce que fait le widget plutôt que comment le configurer ? Le Aperçu du widget d'accordéon d'élémenteur couvre les fonctionnalités, les options de style et les prix en une seule page.
Ce que fait le widget Advanced Accordéon #
Le widget rend une pile d'éléments pliables Chaque ligne a un titre, une zone de contenu et une icône à bascule qui bascule entre les états d'extension et d'effondrement. Le Type d'accordéon dropdown choisit le comportement : Accordéon garde un élément ouvert à la fois, fermant le dernier lorsqu'un nouveau s'ouvre ; Basculer permet aux visiteurs de maintenir plusieurs objets ouverts à la fois.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Le widget Advanced Accordéon activé dans le panneau d'options Master Addons, sous Widgets de base.
- Facultatif : un modèle Elementor enregistré si vous souhaitez en charger un dans un article en accordéon.
Ajouter et gérer des articles en accordéon #
Dans le Contenu onglet, la liste des éléments contient une entrée par question Cliquez sur un élément pour développer ses paramètres, dupliquer ou supprimer des lignes avec les icônes à côté de chacune d'elles et appuyez sur Ajouter un élément pour étendre la liste La démo exécute une FAQ de plomberie de cinq questions.
Sous la liste se trouvent les contrôles partagés :
- Afficher l'icône active/inactive?: bascule les icônes de développement et d'effondrement à droite de chaque titre.
- Développer l'icône et l'icône d'effondrement : deux onglets, un sélecteur d'icônes chacun. Plus sur ceux ci-dessous.
- Basculer la vitesse (ms) : à quelle vitesse les objets s'ouvrent et se ferment, 300 millisecondes par défaut. Cette valeur par défaut semble vive ; Au-delà de 600 ans, l'accordéon commence à avoir l'impression de caler.
- Titre HTML Tag : le balisage autour de chaque question, div par défaut Choisissez H3 si les questions doivent alimenter la structure de titre de la page.
Mettez du texte ou un modèle entier dans un élément #
Ouvrez un seul élément et les contrôles par élément apparaissent : Actif par défaut démarre la page avec cet élément ouvert, Activer l'icône personnalisée lui donne sa propre icône à bascule, et Activer la couleur d'arrière-plan des teintes juste cette rangée.
Celui dont il faut se souvenir est Type de contenu. Définissez-le sur le texte pour une réponse dactylographiée normale, ou sur Section enregistrée et choisissez n'importe quel modèle dans votre bibliothèque Elementor. La démo charge une section de contact, complétée par un formulaire de travail, à l'intérieur du premier élément en accordéon :
C'est aussi ainsi que fonctionnent les accordéons imbriqués : enregistrez un accordéon comme modèle, puis chargez-le à l'intérieur d'un élément d'un autre accordéon Catégories avec sous-questions, modules de cours avec leçons, ce genre de structure Deux niveaux est la limite pratique ; plus profond que cela et les visiteurs perdent la trace de l'endroit où ils se trouvent.
Définissez les icônes d'extension et d'effondrement #
Le Développer l'icône et Icône d'effondrement les onglets ouvrent chacun la bibliothèque d'icônes Elementor L'icône d'extension s'affiche sur les éléments fermés, l'icône d'effondrement sur celui ouvert.
Les paires correspondantes se lisent mieux : faites attention avec attention, plus avec moins, chevron avec chevron La démo s'installe sur les carets.
Style les titres #
Le Style tab s'introduit Articles, Titre, Contenu, et Basculer les icônes. La section Titre porte Normal, Survole, et Actif états-unis, la question ouverte peut donc être différente des autres.
- Type et couleur de fond : le remplissage de la barre de titre par état.
- Couleur du texte et typographie : le texte de la question.
- Titre Aligner : gauche, centre ou droite.
- Type de bordure, rayon de bordure, ombre de boîte, rembourrage : la démo utilise un rayon de 8 pixels et un remplissage de 20 x 16 pour les barres douces et spacieuses.
La démo donne aux titres un fond gris clair et du texte bleu, et la toile se met à jour en direct pendant que le sélecteur de couleurs est ouvert :
Stylez la zone de contenu #
Le Contenu styles de section le panneau de réponse : Couleur d'arrière-plan, Couleur du texte, Typographie, Rembourrage, et Ombre de texte. Gardez l'arrière-plan de la réponse plus léger que les barres de titre afin d'ouvrir les éléments lus comme connectés mais distincts.
Stylez les icônes à bascule #
Le Basculer les icônes la section termine les extrémités de la rangée.
- Position de l'icône : gauche du titre, droite de celui-ci, ou aucun.
- Taille de l'icône, espacement, rembourrage : la démo exécute des icônes de 18 pixels.
- Couleurs d'icônes : États normaux, de vol stationnaire et actifs, chacun avec la couleur de l'arrière-plan et de l'icône.
Le résultat sur la page #
Sur la page en direct, l'accordéon se comporte exactement comme configuré : une question ouverte à la fois, les carets se retournent lorsque les objets basculent et les barres de titre stylisées gardant la section scannable.
Cas d'utilisation courants #
- Rubriques FAQ sur les pages de destination, les pages de tarification et les pages de produits.
- Formulaires de contact ou de devis à l'intérieur d'une réponse(en), en utilisant le type de contenu Section enregistrée comme la démo.
- Accordéons imbriqués pour les ensembles de questions de catégorie et de sous-catégorie.
- Schémas de cours ou de documentation où chaque module développe ses leçons.
- Listes d'emploi avec le rôle comme titre et détails dans le panneau.
Conseils pour un meilleur accordéon #
- Choisissez le type d'accordéon pour les FAQ. Une réponse ouverte permet aux visiteurs de rester concentrés ; Basculer les combinaisons de contenu de référence que les gens comparent côte à côte.
- Ouvrez la question la plus posée par défaut. Définissez Active comme Par défaut sur votre meilleure question afin que la section ne commence jamais complètement fermée.
- Utilisez H3 comme balise HTML de titre sur les pages FAQ. Les moteurs de recherche lisent les questions comme des titres appropriés.
- Gardez les paires d'icônes cohérentes. Un caret qui retourne la direction communique instantanément l'état ; des icônes incompatibles font réfléchir les visiteurs.
- Poids du modèle mental dans les sections enregistrées. Un formulaire ou une table à l'intérieur d'un article est génial ; une section pleine largeur avec des images lourdes se chargera même lorsqu'elle est effondrée.
Tutoriels Vidéo #
Si vous préférez regarder l'accordéon avancé en action, cette vidéo passe en revue la facilité avec laquelle tout le monde peut en construire un, du début à la fin :
Et celui-ci montre comment ajouter un accordéon imbriqué, en chargeant un accordéon dans un autre avec le type de contenu Section enregistrée :
Foire aux questions #
Qu'est-ce que le widget Advanced Accordéon dans Master Addons ?
Il s'agit d'un widget Elementor pour les sections de contenu pliables Vous ajoutez des éléments avec des titres et des réponses, choisissez un comportement d'accordéon ou de bascule, définissez des icônes d'extension et d'effondrement et stylisez les titres, le contenu et les icônes par état Les éléments peuvent contenir du texte ou un modèle entièrement enregistré.
Quelle est la différence entre le type Accordéon et Basculer ?
Accordion garde un élément ouvert à la fois, fermant l'élément précédent lorsqu'un nouveau s'ouvre. Basculer permet aux visiteurs d'ouvrir plusieurs éléments à la fois et de fermer chacun indépendamment. Les deux sont définis à partir de la liste déroulante Type d’accordéon dans l’onglet Contenu.
Puis-je mettre un formulaire ou un modèle dans un article en accordéon ?
Oui. Définissez le type de contenu de l'élément sur la section enregistrée et choisissez n'importe quel modèle dans votre bibliothèque Elementor. La démo charge une section de contact complète avec un formulaire de travail à l'intérieur d'un élément en accordéon, et tout autre modèle enregistré fonctionne de la même manière.
Comment créer un accordéon imbriqué dans Elementor ?
Enregistrez d'abord un accordéon en tant que modèle Elementor Ensuite, dans l'accordéon parent, définissez le type de contenu d'un élément sur la section enregistrée et choisissez ce modèle L'accordéon intérieur se charge à l'intérieur de l'élément extérieur, vous donnant deux niveaux de contenu pliable.
Un élément peut-il rester ouvert par défaut ?
Oui. Développez l'élément dans l'onglet Contenu et activez Active en tant que défaut Cet élément commence à s'ouvrir lorsque la page se charge, ce qui fonctionne bien pour la question que les visiteurs posent le plus.
Envelopper #
Le widget Advanced Accordéon gère le modèle standard de FAQ, puis va plus loin : icônes et arrière-plans par élément, style à trois états et type de contenu Section enregistrée qui place des formulaires, des tableaux ou des accordéons imbriqués entiers dans n'importe quel élément. Parcourir l'ensemble complet de Widgets et extensions Master Addons pour voir ce qui est expédié d'autre avec le plugin, et vérifier le page de tarification pour les extras Pro comme les motifs en accordéon.
