La création d'un tableau des prix est indispensable si vous souhaitez vendre vos produits et services sur votre site web. Mais pour afficher plusieurs plans tarifaires que les clients peuvent comparer facilement sans quitter la page, vous devez ajouter la fonction de basculement au tableau.
La fonction de basculement permet aux utilisateurs de naviguer ou de passer d'un ensemble d'options tarifaires à l'autre, créant ainsi une interface interactive. Par exemple, les utilisateurs peuvent passer d'un abonnement mensuel à un abonnement annuel ou à un abonnement à vie.
Dans cet article de blog, nous allons vous montrer un guide étape par étape sur la façon de créer un tableau WordPress avec toggle. Commençons.
Créer de belles tables
Avec l'éditeur de blocs
Comment créer un tableau de prix WordPress avec Toggle
Avant de plonger dans le tutoriel, vous devez avoir TableBerg et Blocs ultimes installés sur votre site. Avec TableBerg, vous pouvez créer un tableau de prix, et Ultimate Blocks vous permettra d'ajouter la fonction de basculement au tableau.
Une fois les plugins installés sur votre site, lancez-vous dans le processus de tutorat.
Étape 01 : Ajouter le bloc de contenu à onglets
Une fois le plugin Ultimate Blocks installé et activé, vous obtiendrez l'écran suivant Contenu à onglets dans la bibliothèque de blocs. Recherchez et ajoutez le bloc à l'éditeur.
Le bloc "Tabbed Content" sera instantanément ajouté à l'éditeur.
Étape 02 : ajouter le bloc TableBerg à l'intérieur du bloc de contenu à onglets
Le bloc Contenu à onglets vous permet d'ajouter d'autres blocs à l'intérieur de celui-ci. Cliquez sur l'icône bouton plus (+). Trouvez le bloc TableBerg et ajoutez-le.
Étape 03 : Créer un tableau de prix dans le premier onglet
Définissez le nombre de lignes et de colonnes de votre tableau. Nous choisissons 3*3 car nous voulons créer un tableau à trois colonnes.
Vous pouvez voir que la mise en page du tableau est prête.
Étape 04 : Ajouter du contenu au tableau
Le bloc TableBerg vous permet d'ajouter différents types de contenu à ses cellules. Vous pouvez ajouter des textes, des listes, des images, des boutons CTA, etc.
# Ajouter des titres de colonnes
Tout d'abord, nous devons ajouter des titres aux colonnes du tableau. Nous allons créer un tableau de prix pour un plugin imaginaire. Notre contenu sera donc en conséquence.
Vous pouvez voir que nous avons ajouté trois titres, que nous les avons alignés au centre et que nous avons augmenté leur taille.
# Ajouter des plans de tarification
Ensuite, ajoutez les plans tarifaires aux colonnes. Nous les avons colorés à l'aide de l'option Highlight de la barre d'outils Gutenberg.
# Liste des caractéristiques du produit
Il est maintenant temps de dresser la liste des caractéristiques de chaque plan. TableBerg vous permet d'ajouter les Bloc de listes au tableau. Trouvez et ajoutez le bloc Liste au tableau.
Vous pouvez constater que nous avons listé toutes les caractéristiques de chaque plan dans toutes les colonnes.
# Ajouter des boutons CTA
Enfin, commencez à ajouter des boutons CTA dans les colonnes à l'aide de la fonction Bloc de boutons.
Les boutons CTA sont prêts sur le tableau des prix.
Votre table est donc prête. Vous pouvez encore la personnaliser et la styliser à votre guise. J'espère que vous y parviendrez seul.
Étape 05 : Créer un nouveau tableau dans un autre onglet
Créez un nouvel onglet en cliquant sur le bouton icône plus (+). N'oubliez pas de renommer les onglets selon vos préférences.
Créez un nouveau tableau dans cet onglet de la même manière que nous l'avons décrit ci-dessus. Nous avons aligné les titres des onglets au centre pour une meilleure visualisation.
Votre tableau de prix avec la fonction de basculement est prêt. Prévisualisez le tableau dans un nouvel onglet pour vérifier que tout fonctionne correctement.
Conclusion
La création de tableaux de prix à l'aide de la fonction de basculement est aujourd'hui une pratique intelligente adoptée par la quasi-totalité des sites web de classe standard. La plupart des sites web les créent à l'aide de constructeurs de pages et de solutions similaires, ce qui alourdit souvent la page.
Cependant, comme TableBerg et Ultimate Blocks sont deux plugins basés sur des blocs, ils n'alourdiront jamais les pages de tarification. Vous pouvez même les tester sur vos sites d'essai ou sur votre hébergeur local. Vous apprécierez leur légèreté et leur rapidité.
Faites-nous part de vos réactions dans la boîte de commentaires ci-dessous. Par ailleurs, n'hésitez pas à nous poser des questions.
