Comment créer un accordéon avancé avec Elementor

Les visiteurs du site Web aiment les sections réductibles pour consulter rapidement des informations et les réduire en fonction de leurs intérêts. Ainsi, des accordéons avancés bien personnalisés aident à garder votre site WordPress propre et à fluidifier l'expérience utilisateur.

Dans ce guide, nous vous expliquerons étape par étape le processus de création d'un accordéon avancé avec Elementor.

Qu'est-ce qu'un accordéon ?

Un accordéon est un élément pliable qui vous permet de masquer et de révéler le contenu d'une page Web WordPress.
Vous pouvez utiliser l'accordéon pour organiser les informations en sections. Les sections peuvent être développées ou réduites selon les besoins, ce qui permet d'économiser de l'espace et d'améliorer l'expérience utilisateur.

Avantages de l'utilisation d'accordéons avancés dans la conception de sites WordPress

⭕ L'accordéon avancé Elementor fournit une manière claire et organisée de présenter des informations.

⭕ Vous pouvez réduire les temps de chargement des pages en cachant le contenu moins important dans des accordéons. Cela peut également améliorer le classement de votre site Web dans les moteurs de recherche.

⭕ Accéder à des informations supplémentaires avec des accordéons avancés est facile. Donc, il peut encourager les utilisateurs à explorer votre site Web. De plus, les accordéons s'adaptent à différents styles de conception et mises en page.

⭕ Vous pouvez concevoir un accordéon WordPress avancé pour autoriser les utilisateurs handicapés pour accéder à l'information.

Présentation de la Modules et widgets d'ElementsKit! 😍😍😍

Comment créer un accordéon avancé dans Elementor

Bien que le widget accordéon soit inclus dans Elementor, vous trouverez peut-être des options de style limitées. Si vous recherchez une personnalisation plus avancée, envisagez d'utiliser un module complémentaire Elementor. 

Ici, nous avons sélectionné ElementsKit. Le plugin propose un widget Accordéon avancé qui vous permet de créer un site Web plus attrayant visuellement et fonctionnel.

Comment créer un accordéon avec ElementsKit

Un widget accordéon est un type de widget qui vous permet de créer des sections réductibles sur votre site Web WordPress. Il permet d'organiser le contenu en plusieurs sections, chacune pouvant être développée ou réduite pour révéler son contenu. Cette méthode est souvent utilisée pour afficher les informations de manière compacte et conviviale.

Étape 1 : Obtenir le plugin ElementsKit

Accès au tableau de bord WordPress :
1. Accédez aux modules complémentaires
2. Cliquez sur Ajouter un nouveau plugin
3. Rechercher ElementsKit
4. Une fois que vous l'avez trouvé, cliquez sur le bouton Installer maintenant

Vous pouvez aussi Téléchargez le plugin ElementsKit depuis WordPress.org rapidement. Après cela, il vous suffit de le télécharger dans la section plugins de votre tableau de bord.

Cependant, Advanced Accordion est un widget Pro d'ElementsKitNe soyez pas en retard ! Choisissez un forfait flexible et profitez créer des accordéons avancés en toute simplicité.

Étape 2 : Activer le plugin

Après avoir installé le plugin, vous devez l'activer.

Étape 3 : Activez le widget Accordéon avancé

1. Accéder à ElementsKit
2. Trouver des widgets
3. Recherchez l'accordéon avancé et activez le bouton bascule
4. Cliquez sur ENREGISTRER LES MODIFICATIONS

Étape 4 : ouvrez une page depuis votre tableau de bord 

1. Accéder aux pages
2. Ouvrir une page existante ou ajouter une nouvelle page
3. Cliquez sur Modifier avec Elementor (Pour la nouvelle page, vous pouvez trouver cette option après avoir ouvert la page)

Étape 5 : ajouter Advanced Accordion à l'éditeur

Recherchez par le nom du widget, cliquez dessus ou faites-le glisser et déposez-le dans l'éditeur.

Étape 6 : Explorez les options de personnalisation

Dans la partie contenu, vous verrez –

• Accordéon:
  • Contenu: Ici, vous pouvez ajouter du contenu, modifier le titre, activer le bouton « garder ouvert »
  • Garder la première diapositive à ouverture automatique : Si vous souhaitez conserver la première diapositive ouverte, vous pouvez activer ce bouton.
  • Ajax : Si vous activez cette option, seul le contenu pertinent de l'accordéon sera mis à jour, ce qui offrira une expérience utilisateur plus fluide. Cela peut être particulièrement utile lorsque vous traitez un grand nombre d'éléments d'accordéon.
  • Style: Il existe plusieurs styles d'accordéon parmi lesquels choisir.
• Icône:
  • Position de l'icône : Définissez la position de l'icône à partir d'ici.
  • Afficher le nombre de boucles : Vous pouvez afficher le nombre de boucles ou le garder masqué.
  • Icône de droite : Choisissez le symbole qui pointe vers la droite. Il indique l'extension de l'élément accordéon.
  • Icône de droite active : Sélectionnez une icône pour indiquer l'état d'une icône de droite lorsqu'elle est cliquée ou appuyée.

Dans la partie style, vous pouvez personnaliser l’accordéon en utilisant ces options –

• Titre: Ici, vous pouvez modifier le typographie, couleur, type d'arrière-plan, ombre de boîte, marge inférieure, etc. pour les titres.
• Contenu: Pour styliser le contenu de l'accordéon, vous pouvez utiliser différentes couleurs, typographies, rayons de bordure, remplissage, etc.
• Frontière: Pour modifier le type de bordure, la largeur, la couleur, l'ombre de la boîte, etc. de chaque onglet ou de l'accordéon, vous pouvez utiliser cette option.
• Icône: Il vous permet d'ajuster la marge, la couleur et la taille de l'icône.

Voilà en bref comment créer un accordéon avancé avec Elementor ! ✌️

Pourquoi choisiriez-vous le widget Accordion avancé ElementsKit plutôt que le widget Accordion Elementor ?

Découvrons quelques différences entre l'accordéon avancé ElementsKit et l'accordéon Elementor.

💡 Ajoutez de l'unicité à votre site WordPress en appliquant Masquage d'image Elementor!

C'est ton tour maintenant

Maintenant, essayez-le vous-même ! Avec ElementsKit, vous pouvez efficacement incorporer des accordéons avancés exceptionnels dans la conception de votre site Web.

Conseils pour vous –

⭐ Expérimentez différentes options de personnalisation pour obtenir l’apparence et la fonctionnalité souhaitées.

⭐ Pensez à la conception globale de votre site Web.

⭐ Testez le résultat final sur différents appareils et navigateurs.
⭐ Mettez à jour vos accordéons régulièrement.