Accordéon avancé
De longs blocs de texte, mais les réponses cachées frustrent Un accordéon trouve l'équilibre parfait (l'équilibre parfait) submergé lorsqu'il est conçu de manière réfléchie Master Addons Advanced Accordéon Element vous donne un contrôle complet sur cet outil interactif classique Choisissez entre un comportement propre Accordéon (un ouvert à la fois) ou flexible Basculer (plusieurs ouverts) Remplissez des éléments avec du texte, des images ou même des modèles entiers enregistrés Ensuite, stylez chaque état : le titre normal, le survol, l'élément ouvert actif et la zone de contenu elle-même Ce n'est pas seulement pour les FAQ ; c'est pour les listes de fonctionnalités, les spécifications de produits, les portefeuilles ou tout contenu qui bénéficie d'une présentation propre et révélative à la demande.
Modes à double comportement et contenu dynamique
Commencez par définir comment votre accordéon se comporte Sélectionnez Type d'accordéon : accordéon traditionnel pour un flux focalisé ouvert sur un élément, ou Basculez pour un style de liste de contrôle plus flexible où les utilisateurs peuvent ouvrir plusieurs éléments Ensuite, construisez vos éléments Pour chaque onglet, définissez un Titre et choisissez un Type de contenu Allez au-delà du simple texte (Tent) pour le texte riche et les médias, ou sélectionnez de la section enregistrée, du widget enregistré, ou du modèle de page enregistré pour insérer des blocs de contenu pré-conçus entiers Cela en fait un outil puissant pour la construction de pages modulaires et la réutilisation de mises en page complexes.
- Deux modèles d'interaction : Accordéon (unique ouvert) pour les processus échelonnés, Basculer (plusieurs ouverts) pour les listes de contrôle ou les fonctionnalités.
- Sources de contenu riches : Remplissez des éléments en accordéon avec du texte simple, des images ou des sections et modèles d'élémenteur entièrement enregistrés.
- Élément actif par défaut : définissez n'importe quel élément comme étant actif par défaut lors du chargement de la page.
- Gestion facile : ajoutez, supprimez et réorganisez des éléments avec le bouton + Ajouter un élément et un répéteur intuitif.
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é.
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.
Puis-je faire en sorte qu'un élément commence à s'ouvrir lorsque la page se charge ?
Oui. Lors de la modification d'un élément individuel dans l'onglet Contenu, vous trouverez une option Active as Default Définissez ceci sur Oui pour l'élément que vous souhaitez pré-ouvrir Un seul élément doit avoir cet ensemble dans un type Accordéon pour éviter les conflits.
Que sont « Section enregistrée » ou « Modèle de page enregistrée » comme types de contenu ?
Ce sont de puissantes fonctionnalités d'Elementor Pro. Si vous avez une section (comme un profil d'équipe) ou un modèle de page entier (comme un formulaire de contact) enregistré dans votre bibliothèque Elementor, vous pouvez le sélectionner pour apparaître à l'intérieur de l'élément accordéon Cela vous permet d'intégrer des mises en page complexes et pré-conçues dans votre accordéon.
Comment fonctionnent les états de vol stationnaire et actif sur mobile ?
Sur les appareils tactiles, la première pression déclenchera souvent les états Hover et Active en succession rapide (à mesure que l'élément s'ouvre).Le style que vous appliquez à l'état Active est le plus important pour mobile, car il indiquera quel élément est actuellement ouvert. L’état Hover peut ne pas être considéré comme une étape distincte.
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é.
L'accordéon est-il accessible pour la navigation au clavier et les lecteurs d'écran ?
Un widget accordéon correctement codé doit être accessible L'utilisation de balises HTML de titre sémantiques (comme <div>, <h3>) permet de structurer le contenu Les états interactifs et les attributs ARIA pour les états étendus/récupérés sont généralement gérés par le widget pour garantir que les lecteurs d'écran peuvent annoncer les modifications.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
