Comment créer des bascules et des accordéons dans WordPress
Les accordéons et les bascules sont des éléments pratiques qui ajoutent plus de fonctionnalités à votre page, vous permettent de mieux structurer le contenu et aident à l’organisation globale du site Web. Leur ajout n’est pas particulièrement compliqué mais peut être particulièrement facile avec le bon outil.
C’est pourquoi nous avons opté pour les Qi Addons conviviaux pour Elementor qui incluent une grande variété d’options de personnalisation et sont incroyablement faciles à utiliser. Ce plugin est actuellement la plus grande collection de 60 widgets gratuits que vous pouvez utiliser pour ajouter plus de fonctionnalités à votre site Web. En outre, il existe une incroyable collection de plus de 40 widgets Qi premium. Et, ce qui est également très important, c’est qu’il est compatible avec tous les thèmes WordPress.
Ajout d’accordéons et basculement du widget gratuit avec les modules Qi pour Elementor
Qi Addons vous permet de personnaliser complètement le style des accordéons et des bascules en fonction du thème WordPress que vous utilisez, des polices aux couleurs et bordures et tout le reste.
Pour vous inspirer, nous vous recommandons de consulter la page des widgets. Nous allons vous montrer comment nous l’avons appliqué.
La perception de base du fonctionnement d’Elementor est tout ce que vous devez comprendre dans cette section. Il s’agit en fait d’une ligne contenant deux colonnes avec une image dans la colonne de gauche et des accordéons dans celle de droite. Bien sûr, un accordéon peut occuper toute la rangée ou n’importe quelle partie de la rangée, selon vos besoins.
Avant de continuer, vérifions certaines caractéristiques de style de base fournies avec cet addon. Commençons donc par le comportement. Deux types de comportement sont possibles: les accordéons où un seul élément peut être ouvert à un moment donné et les bascules qui permettent à plusieurs éléments d’être ouverts au même moment.
Le style peut en outre être défini avec des bordures et plusieurs options sont disponibles :
- Standard – pas de bordures
- Boxed – avec des bordures,
- Bordure en haut – n’a qu’une bordure en haut au-dessus du titre
- Border Between – n’a que la frontière entre le titre et la description
Comment ajouter des accoridons et des bascules avec les addons Qi
Pour commencer, nous allons définir la ligne à diviser en deux colonnes et ajouter une image à la colonne de gauche, juste pour rendre la section plus attrayante visuellement.
Une fois l’image ajoutée, nous trouverons le widget Accordéons et bascules en tapant dans la barre de recherche ou en faisant défiler le menu. Lorsque le widget est trouvé, cliquez simplement dessus, maintenez-le enfoncé et déplacez-vous à l’endroit où vous souhaitez placer le nouvel élément.
Nous avons ajouté le widget Accordéons et bascule sur le côté droit de la ligne, et vous pouvez voir tous les paramètres qui s’y rapportent sur la gauche. Les paramètres par défaut du widget sont définis de manière à ce que le texte et le style correspondent automatiquement au thème que vous utilisez, donc au cas où vous ne verriez pas la nécessité de le modifier, vous pouvez simplement terminer le processus ici, le widget aura l’air d’avoir naturellement appartenu au thème.
La prochaine chose que vous devez définir est le comportement et le style. Nous avons déjà mentionné les options Comportement et Style afin que vous puissiez définir ici tout ce qui vous convient. Pour les besoins de cet article, nous avons sélectionné l’option Accordéons dans le menu Comportement et le style Standard.
Ce qu’il faut faire maintenant, c’est ajouter des éléments. Faites défiler vers le bas pour trouver les options de l’élément. Vous remarquerez deux petites icônes dans le coin supérieur droit de l’onglet Éléments. Le premier sert à copier un élément existant et le petit X suivant sert à supprimer un élément. Sous l’onglet Article se trouve le bouton Ajouter nouveau qui sert à ajouter de nouveaux articles. Lorsque vous cliquez pour entrer un nouvel élément, vous devez d’ abord définir un titre, puis saisir le texte dans le champ désigné ci-dessous. Vous remarquerez de nombreuses options similaires à celles proposées dans divers éditeurs de texte pour styliser et formater le texte. Nous vous recommandons d’organiser le texte et le titre à ce stade, car vous aurez immédiatement un aperçu de ce à quoi il ressemblera à la fin.
Après avoir saisi le texte, vous pouvez définir la hauteur du contenu. Cette option fait référence à la taille du champ bascule. Si vous le réglez sur la hauteur de l’élément le plus haut, chaque élément aura la même taille que le plus grand. Si vous sélectionnez l’ option Hauteur de l’élément individuel, la taille de chaque élément correspondra à la taille de son contenu.
Si vous souhaitez modifier les icônes par défaut qui s’affichent lors de l’ouverture et de la fermeture de l’élément, cliquez simplement sur le champ Icône Ouvrir ou Icône Fermer et deux nouvelles options s’afficheront. L’un sert à ajouter de nouvelles icônes à partir de la bibliothèque d’icônes et l’autre à ajouter un SVG.
Nous pouvons maintenant passer aux paramètres de style. C’est ici que vous effectuez le réglage fin du style de widget accordéon et bascule.
Vous pouvez choisir le style de titre et définir la typographie du titre. Comme nous l’avons mentionné, les options par défaut sont définies de manière à ce que le style du widget corresponde au thème que vous utilisez. Mais vous pouvez toujours essayer toutes les autres options simplement en les sélectionnant et les changements seront immédiatement visibles dans le widget sur le côté droit de l’écran. Explorez les options et voyez ce qui vous convient le mieux.
Les paramètres suivants font référence aux changements de style qui se produisent sur un élément lorsqu’il est fermé ou ouvert. Vous pouvez, par exemple, définir le texte pour qu’il soit d’une couleur différente lorsqu’il est ouvert, ou l’arrière-plan peut être d’une couleur différente. Il y a aussi la possibilité de définir un rembourrage différent lorsque l’élément est actif, c’est-à-dire ouvert.
Si vous préférez les didacticiels vidéo, jetez un œil à celui-ci créé par les auteurs de Qi :
En conclusion
Au fur et à mesure que vous vous familiariserez avec le plugin, vous explorerez des options encore plus raffinées pour affiner le style de votre widget Accordéon et bascule. Cet outil intuitif est parfait pour les débutants car il est incroyablement facile à utiliser, tandis que les utilisateurs avancés apprécieront également de l’utiliser car il offre une telle plénitude d’options de personnalisation.