Comment créer un tableau de prix WordPress avec Toggle

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.

Ajouter le bloc de contenu à onglets

Le bloc "Tabbed Content" sera instantanément ajouté à l'éditeur.

Ajout d'un bloc à onglets dans 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.

Définir les lignes et les colonnes de votre tableau

Vous pouvez voir que la mise en page du tableau est prête.

Le tableau Mise en page est prêt

É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.

Ajouter des plans de tarification

# 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.

Afficher les caractéristiques du produit

# Ajouter des boutons CTA

Enfin, commencez à ajouter des boutons CTA dans les colonnes à l'aide de la fonction Bloc de boutons.

Ajouter des boutons CTA

Les boutons CTA sont prêts sur le tableau des prix.

Boutons CTA 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éer un nouvel onglet avec le bloc Tabbed Content

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.

Créer un nouveau tableau dans un nouvel onglet

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.



L'équipe Tableberg

L'offre de réservation anticipée est en ligne dès maintenant !
Texte par défaut de la barre de notification