Comment créer des bascules et des accordéons Elementor dans WordPress

Muneeb Tutoriels WordPress Feb 15, 2024

En tant que propriétaire de site Web WordPress, vous pouvez mettre en œuvre de nombreuses idées en utilisant Elementor pour rendre votre site Web beaucoup plus intéressant et professionnel. Et pour concrétiser ces idées, de nombreux plugins Elementor vous aident dans diverses tâches.

Une telle façon de procéder consiste à ajouter des accordéons et des bascules à votre site Web WordPress. Si vous ne savez pas ce que sont les accordéons et les accordéons, restez avec nous pendant que nous expliquons comment créer des bascules et des accordéons dans WordPress.

Que sont les bascules et les accordéons dans WordPress

Les accordéons et les bascules sont des composants de conception utilisés pour regrouper différents segments en une seule unité. En règle générale, cela signifie créer plusieurs parties divisées par des onglets extensibles. Cela les rend particulièrement utiles car ils vous permettent de regrouper de nombreuses informations dans ces sections tout en préservant l'espace sur la page.

Par exemple, vous souhaitez créer une page d’informations et vous souhaitez afficher de nombreux contenus. Ensuite, vous pouvez créer les questions dans un format extensible dans lequel l'utilisateur peut appuyer sur le bouton Développer pour connaître les réponses. De plus, cela augmente l’engagement des utilisateurs et contribue à conserver leur intérêt.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

En quoi les accordéons sont-ils différents des bascules?

Lorsque vous cliquez sur une section en accordéon, elle se développe et révèle son contenu caché. Lorsqu'une nouvelle section est sélectionnée, la précédente se ferme et la nouvelle se développe. Ainsi, avec un accordéon, un seul segment peut être ouvert à la fois.

D'un autre côté, une bascule permet de maintenir la partie précédente ouverte tout en en développant une autre. Vous pouvez bien entendu fermer manuellement chaque section si vous le souhaitez.

C'est la principale différence entre les accordéons et les bascules. Que vous souhaitiez ajouter des accordéons ou des bascules, Qi Addons For Elementor est ce dont vous avez besoin.

Comment créer des bascules et des accordéons avec les modules complémentaires Elementor et Qi

Qi Addons for Elementor est un addon fantastique qui vous permet de personnaliser complètement votre site WordPress avec 60 widgets différents. En quelques minutes, vous pouvez créer de superbes sections qui correspondent parfaitement au style de votre site Web, sans aucun codage requis.

Le widget Accordéons et bascules est l'un des nombreux widgets utiles inclus avec ce plugin. Vous pourrez créer des icônes uniques pour les accordéons et les bascules, ajuster les polices, utiliser et combiner plusieurs couleurs pour le texte, l'arrière-plan, les icônes et bien plus encore.

Pour commencer, accédez au backend de votre site Web ou publiez et recherchez dans la barre latérale Elementor des accordéons et des bascules. Le widget Accordéons et bascules apparaîtra immédiatement.

Après cela, faites-le simplement glisser vers la droite. Ensuite, nous effectuerons l'essentiel de la personnalisation dans l'onglet Contenu.

La première chose que vous remarquerez est que le widget est livré avec deux éléments, chacun avec du contenu Lorem Ipsum. Et aussi le comportement en accordéon où vous développez une section et l'autre se ferme.

En utilisant l' option Comportement dans la section Général, vous pouvez facilement ajuster ce comportement sur Toggle .

Après cela, vous constaterez que lorsque vous cliquez sur l'un des objets, ils resteront ouverts ; c'est le comportement de Toggle . Tous les autres paramètres des accordéons et des bascules restent les mêmes.

Dans l' onglet Style , l' option Standard est définie. Dans le même temps, vous pouvez choisir parmi trois autres options, à savoir Encadré avec le titre de chaque section souligné, Bordure en haut qui place la bordure au-dessus et Bordure entre où la bordure est placée entre les titres.

Les choix Icône Ouvrir et Icône Fermer sont les suivants. Vous pouvez sélectionner vos icônes d'ouverture et de fermeture dans la collection d'icônes ou télécharger un fichier SVG ici.

Une fois que vous avez choisi vos icônes d'ouverture et de fermeture, cliquez sur l'option Insérer un média .

Vos icônes d'ouverture et de fermeture changeront désormais automatiquement. En ce qui concerne les paramètres des éléments , vous ne trouverez que deux options par défaut. Cependant, vous pouvez rapidement en ajouter d'autres en sélectionnant le bouton Ajouter un élément.

Cliquez simplement sur l'élément que vous souhaitez modifier et saisissez votre titre dans la zone Titre pour remplacer les informations. En utilisant la section Contenu , vous pouvez améliorer l'apparence générale tout en optant pour le texte et l'option visuelle.

C'est tous les paramètres dont vous avez besoin pour créer un accordéon ou une bascule à l'aide d'Elementor dans WordPress.

La tâche suivante consiste à styliser votre accordéon. Dans l' onglet Style , vous trouverez une multitude de choix pour styliser vos accordéons comme bon vous semble.

Vous pouvez définir votre balise de titre avec la première option de la liste. Il est défini par défaut sur H3, mais vous pouvez le modifier entre H1 et H6.

Lorsque vous choisissez la section Typographie , une nouvelle liste d'options apparaît, vous permettant d'affiner la typographie de vos accordéons.

Vous pouvez modifier la famille de polices de votre texte à l'aide de l' option Famille , qui vous permet de saisir manuellement le nom de la police ou de la rechercher dans la liste déroulante.

À l’aide de l’ option Taille, vous pouvez ajuster la taille de votre police.

Vous pouvez utiliser l' option Poids pour mettre votre texte en gras. Vous pouvez également ajuster l'audace à l'aide de l'une des valeurs numériques.

En utilisant l' option de transformation de texte, vous pouvez rendre le titre en majuscule, en minuscule, en majuscule ou normal. De plus, l' option Style vous permettra de rendre votre texte en italique ou en oblique.

Vous pouvez également utiliser l' option Décoration pour ajouter un soulignement, un surlignement, un trait ou le laisser tel quel.

Le paramètre Line-Height vous permet de fournir un espace supplémentaire autour du titre. L'option Espacement des lettres vous permet d'augmenter l'espace entre les lettres.

Ce sont toutes les options de typographie avec lesquelles vous pouvez jouer pour donner au texte l’apparence que vous souhaitez.

Ensuite, vous verrez des options qui vous permettent de choisir entre les modes Normal et Actif . Le mode normal fait référence au moment où l'accordéon est fermé, tandis que le mode actif correspond au moment où l'accordéon est déployé.

L' option Couleur du titre dans les paramètres Normal vous permet d'ajuster la couleur des titres des éléments.

L'option Couleur d'arrière-plan vous permet de personnaliser l'arrière-plan du champ de titre de votre accordéon.

L’option Remplissage du titre est située juste en dessous. Vous verrez que lorsque vous augmentez les valeurs, l'espace entourant les titres s'agrandit uniformément.

Ensuite, sous la page Paramètres actifs, vous remarquerez que les options sont identiques à celles de l'onglet Normal.

Vous pouvez également utiliser ces variables pour créer un effet unique et les définir de telle sorte que la couleur change à mesure qu'un élément s'ouvre.

Nous avons toujours un accordéon avec les mêmes couleurs de fond actives et régulières qu'auparavant. Modifiez simplement la couleur d’arrière-plan d’un onglet pour les distinguer.

Vous pouvez également modifier la couleur du contenu dans les titres à l'aide de l'option Couleur du contenu .

Ensuite, il y a l'option Content Padding , qui vous permet d'ajuster l'espace environnant du texte.

Vous pouvez modifier la couleur des lignes entre les éléments à l'aide de l'option Couleur de la bordure .

L' option Taille de l'icône juste en dessous vous permet de modifier la taille des icônes en accordéon.

Enfin, il existe deux autres options avec une bascule : Normal et Survol. Ce sont les options permettant de changer la couleur de l'icône "normale" ainsi que la couleur de l'icône au survol.

Assurez-vous de choisir une couleur différente dans l'onglet Survol si vous souhaitez que la couleur change lorsque vous survolez une icône.

Cela résume la plupart des paramètres du widget Accordéons et bascules. Les options avancées sont similaires aux autres widgets Elementor.

Une fois que vous êtes satisfait de l'apparence de votre accordéon, cliquez sur le bouton Mettre à jour pour l'enregistrer.

C'est ainsi que vous créez, stylisez et ajoutez des accordéons et des bascules Elementor à l'aide d'Elementor sur votre site Web WordPress. Assurez-vous de nous rejoindre sur notre Facebook et Twitter pour d'autres mises à jour sur nos publications.

Divi WordPress Theme