Comment ajouter un bouton à bascule à votre site WordPress

Vous voulez donner à vos utilisateurs un moyen rapide et propre de basculer entre différents contenus ou options de prix sur votre site WordPress ? Un bouton à bascule est la solution parfaite !

Grâce à un bouton de basculement, les visiteurs peuvent instantanément passer d'une option à l'autre, par exemple d'une tarification mensuelle à une tarification annuelle, d'un mode clair à un mode foncé, ou même de sections de contenu complètement différentes, sans encombrer votre page.

Dans cet article, vous découvrirez deux façons simples d'ajouter des boutons à bascule à votre site WordPress :

Méthode 1 : Ajouter un bouton de basculement pour tout type de contenu (texte, images, formulaires, etc.)
Méthode 2 : Ajouter un bouton de basculement pour les tableaux de prix ou tout autre type de données tabulaires

Plongeons dans l'aventure !

Méthode 1 : Ajouter un bouton à bascule pour n'importe quel type de contenu

Si vous souhaitez permettre à vos utilisateurs de passer d'un bloc de contenu à l'autre, par exemple FAQCette méthode s'adresse à vous si vous avez besoin de plus d'informations sur un produit, des détails sur un produit ou des caractéristiques différentes.

Nous utiliserons le Blocs ultimes qui propose un bloc de contenu polyvalent (Content Toggle ou Tabbed Content) adapté à tous les types de contenu.

Étape 1 : Installation du plugin Ultimate Blocks

Allez dans votre tableau de bord WordPress.
Naviguez vers Plugins > Ajouter un nouveau.
Recherchez "Ultimate Blocks" et installez/activez-le.

Étape 2 : Ajouter le bloc de contenu à onglets

Ouvrez un article ou une page dans l'éditeur WordPress.
Type /tabbed content ou utilisez l'icône + pour ajouter le bloc Tabbed Content.

Le bloc "Tabbed Content" se présente comme suit -

Étape 3 : Personnalisation du bloc pour une fonction de basculement

Sélectionnez le bloc et choisissez l'option Style des pilules dans les paramètres (les onglets ressemblent alors à des boutons).

Centrez l'alignement pour obtenir un aspect classique.

Cliquez sur le bouton + signe à côté du premier onglet pour en ajouter un autre. Ajoutez au moins deux onglets (par exemple, "Mensuel" et "Annuel" ou "Détails" et "Résumé"). Renommez les onglets pour qu'ils correspondent à vos options de basculement.

Utilisez les paramètres de couleur pour définir des couleurs contrastées, de manière à ce que l'onglet actif apparaisse clairement.

Étape 4 : Ajouter votre contenu

Cliquez à l'intérieur de chaque onglet pour ajouter le contenu de votre choix (texte, images, listes, formulaires ou même d'autres blocs).

Personnalisez davantage si nécessaire : modifiez l'arrière-plan des onglets, les couleurs du contenu, etc.

Étape 5 : Prévisualisation et publication

Utilisez l'option Aperçu pour tester la bascule.
Une fois que vous êtes satisfait, publiez ou mettez à jour la page.

C'est tout ! Vous disposez désormais d'un bouton de basculement flexible pour tout type de contenu sur votre site WordPress.

Méthode 2 : Ajouter un bouton à bascule pour les tableaux de prix (et autres)

Vous souhaitez permettre aux utilisateurs de basculer entre les tableaux de prix mensuels et annuels, ou de comparer différents ensembles de données côte à côte ? L'outil Bascule pour Tableberg du plugin Tableberg est conçu à cet effet !

Avec Tableberg ProAvec le bloc Toggle, vous pouvez organiser n'importe quel nombre de tableaux en onglets nets et cliquables, ce qui est parfait pour les plans tarifaires, les comparaisons de produits, les tableaux multilingues ou tout autre scénario dans lequel plusieurs tableaux sont utiles.

Étape 1 : Insérer le bloc "Toggle for Tableberg" (bascule pour Tableberg)

Ouvrez votre article ou votre page dans l'éditeur WordPress.
Cliquez sur l'icône + (plus) et recherchez "Toggle for Tableberg".
Ajoutez le bloc à votre page.

Étape 2 : Configurer et personnaliser vos onglets

Par défaut, vous verrez trois onglets intitulés "Onglet 1", "Onglet 2" et "Onglet 3".
Ajoutez ou supprimez des onglets selon vos besoins à l'aide des icônes + ou -.
Renommez chaque onglet (par exemple, "Mensuel", "Annuel" ou "Plan de base", "Plan pro").
Utilisez le panneau d'options de droite pour ajuster les titres, l'alignement, les couleurs et les bordures des onglets afin d'obtenir une image de marque.

Étape 3 : Ajouter vos tableaux

Cliquez sur chaque onglet pour ajouter un tableau unique à l'intérieur.
Créez une nouvelle table à partir de zéro ou insérez un modèle de table Tableberg pré-construit.
Chaque onglet peut contenir un tableau complètement différent, ce qui est idéal pour les comparaisons de fonctionnalités, les niveaux de prix, les ensembles de données, etc.

Cas d'utilisation populaires

Tableaux des prix : Permettez aux utilisateurs de basculer entre les prix mensuels et annuels, ou entre différents plans.
Comparaisons de données : Affichez les données régionales, les spécifications des différents produits ou les mesures de performance dans des onglets distincts.
Contenu éducatif : Organiser les leçons ou le matériel de cours pour faciliter la navigation.
Tableaux multilingues : Afficher les mêmes données dans différentes langues pour les visiteurs internationaux.

Étape 4 : Prévisualisation et publication

Prévisualisez vos onglets à bascule pour vous assurer que tout se présente et fonctionne comme prévu.
Publiez ou mettez à jour votre article/page lorsque vous êtes prêt.

Voici un exemple de bascule pour un tableau de prix.

Conclusion

L'ajout d'un bouton de basculement sur votre site WordPress est un excellent moyen d'améliorer la navigation, d'économiser de l'espace et de donner aux visiteurs un accès instantané au contenu qui les intéresse, qu'il s'agisse de passer d'un plan tarifaire à l'autre, d'afficher des détails ou de comparer des données.

Pour tout type de contenu, utilisez Blocs ultimes pour créer en quelques secondes des bascules flexibles.
Pour les tableaux de prix et les mises en page de tableaux plus avancées, essayez Tableberg Pro's Toggle block pour une expérience de tabulation transparente.

Essayez ces méthodes sur votre site et rendez votre contenu plus interactif et convivial. Vous avez des questions ou besoin d'aide ? Faites-le nous savoir dans les commentaires !