Elementor est le constructeur de pages le plus utilisé et le plus personnalisable pour WordPress. Cependant, il y a certaines choses que les utilisateurs ne trouvent pas d'option directe pour changer à un moment ou à un autre.
Par exemple, le contenu du widget accordéon est ouvert par défaut. De nombreuses personnes souhaitent qu'il soit fermé, mais elles ne trouvent pas d'option pour le faire.
Alors, comment faire pour que l'accordéon reste fermé par défaut dans Elementor ?
Pour que les éléments de l'accordéon restent fermés par défaut dans Elementor, allez dans la section Onglet Contenu >> Interaction. Utilisez la fonction “État par défaut” >> “Tous effondrés”L'option " ", puis l'option " ", puis l'option " ", puis l'option " ". Publier.
Je vous propose donc 3 méthodes simples pour maintien de l'accordéon fermé par défaut dans Elementor.
Alors, commençons !
Des moyens fiables pour maintenir les articles en accordéon fermés ou repliés
Lors de l'utilisation de Elementor's widget accordéon, le “premier point”, ou “première diapositive”, de la l'accordéon est ouvert par défaut. Et le contexte est lisible. Mais ce n'est peut-être pas ce que vous préférez.
Comme nous l'avons appris, Elementor ne fournit pas de paramètres pour fermer ou réduire la diapositive de l'accordéon par défaut.
Mais ne vous inquiétez pas, c'était le bon vieux temps. Désormais, vous pouvez fermer ou ouvrir l'accordéon à votre guise. Elementor propose désormais un réglage intégré.
De plus, après avoir essayé et testé, j'ai trouvé deux autres méthodes faciles.
Vous pouvez fermer ou ouvrir l'accordéon en utilisant les trois méthodes ci-dessous.
- Méthode 1 : Utiliser les paramètres de Elementor (méthode gratuite)
- Méthode 2 : Utilisation d'un simple code CSS (nécessite Elementor PRO)
- Méthode 3 : Utilisation de code JavaScript (pour les utilisateurs avancés, mais gratuit)
Méthode 1 : Utiliser les paramètres de Elementor
C'est la solution la plus simple pour conserver le Élément en accordéon fermé ou replié. Elle est disponible dans les paramètres intégrés de Elementor. Il s'agit également d'une méthode d'initiation sans codage. Cette méthode est destinée aux utilisateurs gratuits de Elementor.
Commençons par les étapes suivantes :
- Ouvrez votre page dans l'éditeur Elementor, où vous avez la section accordéon.
- Sélectionnez un élément dans le widget accordéon.
- Dans la barre latérale gauche, allez à la rubrique Onglet Contenu >> Interaction.
- Définir l'état par défaut à Tous effondrés.
- Publier maintenant.
Et c'est tout !
Conseil : Fixer le nombre maximum d'éléments développés à 1 (facultatif). Il est fortement recommandé de le faire pour une meilleure expérience utilisateur. N'hésitez pas à modifier la vitesse d'animation et le style des icônes pour les adapter à votre design.
Maintenant, la grande question ! Cela fonctionne-t-il avec la version gratuite de Elementor ?
Oui, c'est le cas ! Tant que vous utilisez la dernière version. Cette fonctionnalité est disponible dans Elementor Free.
Méthode 2 : Utilisation d'un simple code CSS (nécessite Elementor PRO)
Si vous travaillez sur des sites ou des modèles plus anciens où la bascule intégrée n'est pas disponible (avant la mise à jour), le CSS offre une solution rapide sans refaire la conception. Vous pouvez donc suivre cette méthode pour conserver l'option de basculement intégrée. Accordéon Item fermé ou réduit. Toutefois, cette fonction est réservée aux utilisateurs de Elementor Pro.
- Ouvrez votre page dans l'éditeur Elementor, où vous avez la section accordéon.
- Sélectionnez le widget accordéon.
- Dans la barre latérale gauche, allez à la rubrique Onglet Contenu >> Mise en page.
- Dupliquer le tout premier élément de l'accordéon (Attention, dupliquer le premier élément, pas tout le widget).
- Copiez n'importe quel code CSS fourni ci-dessous
.elementor-accordion .elementor-accordion-item:first-of-type {
display : none;}
.elementor-accordion {
border-top : 1px solid #D4DFF2C7 ;
}- Allez dans l'onglet Avancé du widget accordéon.
- Ensuite, faites défiler vers le bas et collez le code CSS dans le champ Custom CSS.
- Aujourd'hui, publier la page.
Après avoir mis à jour la page en collant le fichier CSS, le premier fichier duplication d'un élément de l'accordéon sera caché, tandis que les autres éléments seront réduits par défaut, comme vous le souhaitiez.
Méthode 3 : Utilisation d'un code JavaScript
Si vous avez raté la première méthode à cause de problèmes de version et la deuxième méthode parce que vous n'avez pas Elementor Pro, suivez cette méthode gratuite.
Tout ce que vous devez faire dans cette méthode est d'ajouter un widget HTML et un petit code qui vous aidera à fermer l'accordéon. Voici comment procéder.
- Ouvrez votre page dans l'éditeur Elementor, où vous avez la section accordéon.
- Juste au-dessus de votre widget accordéon, placez un “Widget HTML” dans le panneau des éléments.
- Copiez le code JavaScript ci-dessous.
.- Collez le code JavaScript fourni ci-dessus dans le code HTML.
- Une fois que c'est fait, publiez la page et voyez-la en direct.
- Vous constaterez que votre premier accordéon commence à se fermer.
Conseil de pro : Vous utilisez plusieurs widgets en accordéon sur votre site et souhaitez appliquer la même fonctionnalité partout ? Il vous suffit d'ajouter l'extrait JavaScript à Elementor > Codes personnalisés. Il fonctionnera ainsi de manière cohérente sur l'ensemble des pages et des messages.
Bonus : 4 modèles d'accordéon de qualité supérieure - prêts à l'emploi
Pourquoi utiliser L'accordéon de base de Elementor alors qu'il est facile d'obtenir des produits riches en fonctionnalités et magnifiquement conçus. modèles en accordéon?
Certes, le widget par défaut de Elementor fait l'affaire. Mais si vous souhaitez une expérience plus dynamique et visuellement attrayante, vous aurez besoin de quelque chose de plus avancé.
Et le Elementor Pack Les modèles en accordéon vous offrent bien plus. Comme un style avancé, l'intégration d'icônes, le contrôle des animations et la flexibilité de la mise en page. Ils améliorent instantanément la présentation de votre contenu.
Qu'il s'agisse de créer des FAQ, des descriptions de services ou des sections de contenu interactif, ces modèles de qualité supérieure vous permettent de gagner du temps et d'obtenir une apparence élégante sans avoir à les personnaliser manuellement.
Voici 5 modèles d'accordéon prêts à l'emploi de Element Pack :
Accordéon 01 : Il permet d'organiser le contenu à l'aide d'un accordéon moderne et réactif, d'une FAQ ou d'un spoiler.
Accordéon 02 : Il s'agit d'une mise en page en accordéon propre et réactive pour une meilleure lisibilité.
Accordéon 03 : Affichez proprement les FAQ ou le contenu des spoilers grâce à un accordéon réactif.
Accordéon 04 : Gestion de contenu sans effort à l'aide de widgets en accordéon modernes.
Accordéon 05 : Offrez une navigation transparente à l'utilisateur en activant des URL basées sur le hachage qui ouvrent instantanément des accordéons ou des onglets spécifiques lors du chargement de la page.
FAQ
Q1. Les éléments en accordéon doivent-ils être ouverts ou fermés par défaut ?
C'est à vous de choisir. De nombreux créateurs choisissent de fermer le premier élément de l'accordéon pour encourager l'interaction avec l'utilisateur. D'autres préfèrent l'ouvrir pour mettre en évidence le contenu essentiel. Il n'y a pas de règle stricte. Concevez-le en fonction de votre public et de vos objectifs de mise en page.
Q2. Quelle est la différence entre les widgets Toggle et Accordion dans Elementor ?
Bien que les deux widgets offrent des fonctionnalités similaires, ils se comportent différemment lors du chargement de la page. Ils se comportent différemment au chargement de la page.
– Elementor Widget à bascule: Tous les éléments restent réduits par défaut.
– Elementor Widget accordéon: Le premier élément est développé, tandis que les autres restent fermés.
En outre, les widgets en accordéon ne permettent d'ouvrir qu'un seul élément à la fois. Les widgets à bascule, quant à eux, permettent aux utilisateurs d'ouvrir plusieurs éléments simultanément.
Q3. Puis-je réduire les éléments de l'accordéon Elementor sans utiliser de code ?
Oui ! Avec les dernières mises à jour de Elementor, vous pouvez simplement activer l'option “All Collapsed” sous Mise en page >> Interactions, aucun codage n'est nécessaire.
4. Qu'est-ce qu'un accordéon d'images dans Elementor ?
Un accordéon d'images affiche plusieurs images dans un format repliable. Il est agrémenté d'effets de survol et d'animations fluides. Il s'agit d'un widget visuellement attrayant qui ajoute de l'interactivité et de l'élégance à votre design.
Dernier mot
Si vous travaillez avec la dernière version de Elementor. Le paramètre État par défaut de Elementor est le moyen le plus simple et le plus efficace de garder tous les éléments de l'accordéon fermés par défaut.
Cette méthode, qui ne nécessite que quelques clics, garantit une expérience propre. Aucun code personnalisé n'est nécessaire. Cette fonction intégrée est idéale pour les créateurs qui souhaitent obtenir des résultats rapides sans avoir à procéder à des ajustements techniques.
Cependant, si vous utilisez une version plus ancienne de Elementor. Vous avez besoin d'un contrôle plus fin sur le comportement de vos accordéons. Vous pouvez par exemple cibler des widgets spécifiques, personnaliser les animations ou ignorer les conflits de thèmes. Dans ce cas, l'utilisation d'une approche basée sur JavaScript ou CSS peut être une meilleure solution.
Et si vous souhaitez renoncer entièrement à la mise en forme manuelle, il existe une autre option intelligente. Vous pouvez utiliser les modèles d'accordéon prêts à l'emploi disponibles dans Element Pack Pro.
Ces modèles sont conçus par des professionnels, sont entièrement réactifs et ont été élaborés dans un souci de convivialité. Qu'il s'agisse de créer des FAQ, des descriptions de services ou des sections de contenu interactif, ces modèles permettent de gagner du temps et d'obtenir des résultats satisfaisants. Ces modèles préconstruits vous permettent de gagner du temps et d'obtenir de bons résultats.
