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

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.

Comment créer 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.

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

Installer ElementsKit

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.

Télécharger le plugin ElementsKit

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.

Activer ElementsKit

É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
Activer le widget accordéon avancé ElementsKit

É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)
Modifiez votre page avec Elementor

É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.

Faites glisser et déposez le widget accordéon avancé ElementsKit

É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.
Modifier le contenu du widget accordéon avancé ElementsKit

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.
Widget accordéon avancé Style ElementsKit

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.

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.

Module complémentaire ElementsKit Elementor

commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *