Si vous souhaitez imaginer un scénario dans lequel vos utilisateurs peuvent passer d'un état ou d'une option à l'autre, un bouton de basculement est la solution idéale. Ces boutons permettent aux utilisateurs d'accéder rapidement aux options sans occuper trop d'espace sur la page. Par exemple, ils sont parfaits pour passer d'une tarification mensuelle à une tarification annuelle, d'une vue détaillée à une vue synthétique, ou pour des préférences d'affichage telles que les modes clair et foncé.
Bien que WordPress ne prenne pas en charge les boutons à bascule, le bloc Tabbed Content d'Ultimate Blocks permet de reproduire facilement leur fonctionnalité. Le plugin est polyvalent, et contrairement à beaucoup d'autres options, il offre un large ensemble de blocs qui vous permet de transformer de simples onglets en états commutables avec seulement quelques ajustements.
Ce guide a pour but de vous montrer comment utiliser ce plugin pour obtenir un effet de bouton basculant élégant et convivial. Commençons par le commencement.
Étape 1 : Installation du plugin Ultimate Blocks
Commencez simplement par vous connecter à votre tableau de bord WordPress, puis naviguez vers Plugins > Ajouter un nouveau. Dans la barre de recherche, tapez "Blocs ultimeset une fois qu'il apparaît, cliquez sur Installer. Après l'installation, activer le plugin.
Étape 2 : Ajouter le bloc de contenu à onglets
Une fois que Ultimate Blocks est actif, décidez de l'endroit où ajouter le bouton de basculement. Vous pouvez ouvrir une nouvelle page ou un nouvel article, ou continuer sur une page existante.
Dans l'éditeur de WordPress, tapez /tabbed content ou cliquez sur le bouton + icône pour ouvrir la bibliothèque de blocs. Si vous utilisez la méthode de l'icône +, tapez "contenu à onglets" dans la barre de recherche pour trouver le Bloc de contenu à onglets et l'insérer dans votre page ou votre article.
Une fois que vous avez ajouté le bloc à votre éditeur, voici l'interface que vous obtiendrez dans votre éditeur.
À ce stade, le bloc ne ressemble pas encore à un bouton à bascule. Ce qu'il nous faut maintenant, c'est apporter quelques modifications aux paramètres du bloc pour le rapprocher d'une configuration imitant un bouton à bascule qui permet aux utilisateurs de passer d'une section de contenu visible à l'autre.
Étape 3 : Personnalisation et configuration du bloc de contenu à onglets
Une fois le bloc sélectionné, nous accédons à la page paramètres à droite. Sélectionnez l'option Pilules dans les paramètres pour que chaque onglet ressemble à un bouton au lieu d'un onglet.
Ensuite, nous devons ajuster l'attribut alignement au centre pour qu'il ressemble davantage à un bouton à bascule.
Pour créer un état de basculement, nous devons avoir au moins deux onglets. Il suffit de cliquer sur l'onglet + signe à côté du premier onglet pour en ajouter un autre. Si vous souhaitez avoir plus d'onglets, suivez la même procédure.
Une fois que nous avons fait cela, nous avons des onglets séparés avec lesquels nous pouvons travailler. Ce qu'il nous faut maintenant, c'est transformer ces onglets en boutons à bascule à l'aide des paramètres de couleur.
Mais d'abord, renommer les onglets avec des étiquettes différentes pour représenter les différents états de basculement, puis passez à l'étape suivante. paramètres de style dans la barre latérale droite. De là, utilisez la fonction Paramètres de couleur pour ajouter des couleurs contrastées à chaque onglet afin de mieux distinguer l'onglet actif.
À ce stade, votre bouton à bascule est prêt. Il ne vous reste plus qu'à ajouter votre contenu. Cliquez à l'intérieur de chaque onglet pour ajouter un contenu spécifique. Vous pouvez inclure du texte, des images, des vidéos, ou tout autre bloc correspondant à vos besoins. Il vous suffit de cliquer sur l'icône + signe et ajoutez le bloc correspondant à votre contenu préféré.
Ensuite, ajoutez du contenu connexe à chaque onglet. Ici, nous avons créé un exemple de section sur les prix en utilisant des blocs de paragraphes, d'en-têtes et de listes dans les deux onglets. Vous pouvez spécifier la couleur de chaque bloc dans la section des couleurs et, si vous estimez que ces onglets doivent être davantage mis en évidence, modifiez la valeur de l'attribut arrière-plan du contenu de l'ensemble du bloc.
Étape 4 : Prévisualisation et publication
Utiliser le Avant-première pour tester le fonctionnement de vos onglets en tant que boutons de basculement. Vérifiez que chaque onglet ouvre la bonne section de contenu. Une fois que vous êtes satisfait de l'aspect et de la fonctionnalité, cliquez sur Publier ou mettre à jour s'il s'agit d'un article existant. Votre effet de bouton de basculement est maintenant en place et prêt à offrir à vos utilisateurs un moyen facile de basculer entre les sections de contenu.
Conclusion
En suivant ces étapes, vous pouvez transformer des onglets standard en boutons à bascule entièrement fonctionnels. Cette configuration améliorera la présentation de votre contenu et le rendra accessible et facile à parcourir. Vos visiteurs peuvent désormais passer instantanément d'une option à l'autre, qu'il s'agisse d'explorer différents prix, d'afficher des détails supplémentaires ou de choisir leurs préférences d'affichage. Ce petit ajout apporte clarté et souplesse à votre site et permet aux utilisateurs d'explorer le contenu à leur guise tout en conservant une page propre et organisée.
