La présentation de vos tableaux de prix est importante pour influencer les clients. L'incorporation d'un ruban est un moyen efficace d'améliorer les tableaux de prix. Il s'agit visuellement d'une bannière d'étiquettes affichée en diagonale sur un tableau pour mettre en évidence des offres, des remises et des caractéristiques spécifiques.
Que vous fassiez la promotion d'une réduction limitée dans le temps, d'une fonction spéciale ou d'un produit en vogue, un ruban bien placé peut instantanément influencer les clients potentiels et les inciter à prendre une décision. Tableberg est un plugin intuitif et puissant.
Dans cet article, nous vous montrerons comment ajouter un tableau de prix avec ruban dans WordPress avec Tableberg.
Créer de belles tables
Avec l'éditeur de blocs
Une fois le plugin installé sur votre site, passez au tutoriel suivant.
Étape 1 : Ajouter le bloc Tableberg à l'éditeur
Le plugin ajoute un bloc nommé Tableberg à la bibliothèque de blocs de Gutenberg. Ajoutez le bloc à l'éditeur en appuyant simplement sur l'icône plus (+).
Définissez le nombre de colonnes et de lignes dont vous avez besoin pour votre tableau. Pour ce tutoriel, nous définirons 3*1 pour les colonnes et les lignes.
Vous pouvez voir que la structure de base du tableau de tarification a été créée avec des colonnes et une ligne.
Étape 2 : Ajouter du contenu au tableau
Un tableau de prix comprend généralement les noms des produits, les images, les prix, les prix réduits et les boutons CTA. Voyons comment les ajouter au tableau.
Ajouter le nom du produit
Tableberg vous permet d'ajouter différents types de blocs à ses cellules, à l'instar de l'éditeur de blocs Gutenberg. Ajoutez le bloc Bloc de paragraphes pour écrire le nom du produit. (Par défaut, le bloc de paragraphe est ajouté aux cellules du tableau).
Inscrivez le nom de votre produit dans la cellule. Alignez le texte au centre, mettez-le en gras, modifiez sa couleur et redimensionnez-le à l'aide des options présentées dans l'image ci-dessous.
Ajouter l'image du produit
Ajoutez le bloc Image au tableau des prix.
Le bloc d'image vous permet de télécharger l'image du produit. Redimensionnez l'image si nécessaire et alignez-la correctement.
Ajouter un prix précédent
L'affichage de la différence entre le prix précédent et le prix actuel est un excellent moyen de mettre en évidence la réduction. Ajoutons donc un prix précédent sous l'image du produit.
L'ajout d'un effet de biffure au prix précédent peut attirer l'attention des gens. Pour ce faire, procédez comme suit sélectionner le prix à l'aide du curseur. Cliquez sur les Plus d'options dans la barre d'outils.
Aller à les Mise en évidence et Options de biffage. Vous pourrez changer la couleur du prix et ajouter un barré.
Ajouter le prix actuel du produit
Ajoutez maintenant le prix actuel du produit dans une police relativement plus grande afin d'attirer l'attention des gens.
Ajouter un bouton CTA
À la fin de tout le contenu, ajoutez la mention Bloc de boutons.
Modifiez la couleur d'arrière-plan du bouton, la couleur du texte, la taille de la typographie et le remplissage. Effectuez ces changements comme vous le souhaitez.
Étape 3 : Ajouter des espaces entre les blocs
Le contenu de la colonne est donc prêt. Mais comme vous pouvez le voir, tous les blocs sont trop encombrés. Nous devons ajouter de l'espace entre eux pour créer un aspect plus frais.
Pour ce faire, sélectionner une colonne particulière. Ensuite, allez à la page Onglet Styles. Venez au Espacement des blocs en faisant défiler l'onglet. Augmenter l'espace en ajoutant une valeur à la case.
De même, ajoutez du contenu aux autres colonnes. Mais pour gagner du temps, vous pouvez dupliquer la colonne et mettre à jour le contenu. Voici un guide sur comment dupliquer une colonne et une ligne de Tableberg.
Étape 4 : Ajouter un rayon aux colonnes du tableau
Vous pouvez améliorer l'esthétique en ajoutant un rayon de bordure aux colonnes du tableau. Sélectionner les Icône Tabelberg dans la barre d'outils. Aller à les Onglet Styles.
Défilement et venir à Espacement des cellules. En faisant glisser l'option correspondante, vous pouvez ajouter des espaces entre les colonnes du tableau.
Vous verrez le Table Border juste en dessous. Set (jeu de mots) votre souhait Valeur du rayon for le bord intérieur et extérieur.
Vous pouvez ainsi préparer votre tableau de prix.
Étape 5 : Ajouter un ruban au tableau des prix
Sélectionnez la colonne à laquelle vous souhaitez ajouter un ruban. Cliquez sur l'icône plus (+) et recherchez l'icône Bloc de rubans. Ensuite, cliquez sur et sur le bloc dans la colonne.
Le ruban sera ajouté au tableau. Ensuite, dans la fenêtre Onglet Paramètressélectionner le type de ruban, le texte du ruban, le côté et la distance.
Ensuite, personnalisez le texte et la couleur d'arrière-plan à partir de l'onglet Onglet Styles.
Votre tableau de tarification est donc prêt, avec un ruban.
Fermeture !
J'espère que vous avez apprécié ce tutoriel. Mais il y a plusieurs points que vous devez garder à l'esprit. Veillez à ce que votre tableau soit propre et dégagé. Les tables de tarification minimalistes ont toujours un impact sur les clients potentiels.
Deuxièmement, utilisez un texte clair et concis qui attire instantanément les visiteurs. Si possible, ajoutez quelques avantages/caractéristiques des produits dans le tableau. Si vous souhaitez couvrir plusieurs plans dans vos tableaux de prix, il est préférable de les afficher à l'aide d'un interrupteur à bascule.
Voici un guide sur comment créer un tableau de prix avec un interrupteur à bascule dans WordPress.
