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Ă©
- Accéder à ElementsKit
- Trouver des widgets
- Recherchez l'accordéon avancé et activez le bouton bascule
- Cliquez sur ENREGISTRER LES MODIFICATIONS
Ătape 4Â : ouvrez une page depuis votre tableau de bord
- Accéder aux pages
- Ouvrir une page existante ou ajouter une nouvelle page
- 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.
Fonctionnalité | Accordéon Elementor | Accordéon avancé ElementsKit |
---|---|---|
Personnalisation | Options de style limitées | Apparence, styles et icÎnes personnalisables |
Fonctionnalité | Extension et réduction de base | Plusieurs éléments ouverts, logique conditionnelle |
Expérience utilisateur | Simple et fonctionnel | Amélioré avec un pliage lisse et personnalisé éléments |
Polyvalence | Limité aux cas d'utilisation de base | Adapté à divers styles de conception et scénarios complexes |
đĄ 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.
Laisser un commentaire