Principaux points à retenir
- Une bonne conception de tableau de prix montre trois ou quatre plans côte à côte, avec un plan visuellement surélevé au-dessus du reste afin que le lecteur ait un choix par défaut.
- Un tableau de prix se convertit mieux lorsque chaque carte suit le même ordre : nom du forfait, à qui elle s'adresse, prix, période de facturation, liste de fonctionnalités courte et un bouton.
- Les lignes de fonctionnalités doivent comporter trois à six mots chacune ; une ligne qui s'enroule sur une deuxième ligne ralentit la lecture et rend les cartes inégales.
- Un prix original barré à côté du prix de vente donne au lecteur un point d'ancrage, et le widget Master Addons Pricing Table dispose d'un commutateur de vente pour exactement cela.
- Une bascule mensuelle et annuelle nécessite deux jeux de cartes ; dans Master Addons, le widget Toggle Content (Pro) bascule entre deux modèles de section enregistrés.
- Sur un téléphone, les cartes de prix s'empilent dans une colonne, le plan en surbrillance doit donc se situer en premier ou en deuxième, et non en troisième.
La conception de la table de tarification décide si un visiteur qui veut déjà votre produit peut trouver le bon plan en quelques secondes La mise en page est simple : une rangée de cartes, un prix chacune, un bouton chacune Les décisions qui comptent sont plus petites que cela : combien de plans, lequel est augmenté, à quoi ressemble le prix, combien de temps chaque rangée de fonctionnalités fonctionne et ce que dit le bouton.
Cet article passe en revue dix conseils de conception de tableaux de prix, chacun affiché sur un tableau réel construit avec le widget Table de prix de Master Addons for Elementor. Les exemples utilisent des plans inventés (Démarrage, Croissance, Agence) afin que vous puissiez copier la structure sans copier les prix. Lorsqu'un pourboire nécessite un deuxième widget, comme le basculer mensuel et annuel, le message indique lequel et s'il se trouve dans le plan Pro.
Table des matières
1. Afficher trois plans, quatre au maximum
Trois plans est la conception de table de prix que la plupart des lecteurs peuvent comparer en un coup d'œil Deux plans force une décision oui ou non Cinq plans ou plus transforme la table en feuille de calcul, et le lecteur commence à défiler latéralement sur un ordinateur portable et à abandonner sur un téléphone.
Mettez le plan que vous voulez que la plupart des gens achètent au milieu Les gens lisent une rangée de gauche à droite, mais ils s'installent au centre, qui est aussi l'endroit où l'œil atterrit en premier sur un téléphone lorsque les cartes s'empilent Si vous vendez un plan Agence ou Entreprise avec une tarification personnalisée, gardez-le comme quatrième carte avec un bouton “Contactez-nous” plutôt qu'un tableau séparé.
Dans Elementor, chaque carte est un widget Table de tarification déposé dans sa propre colonne ou conteneur Trois widgets dans un conteneur à trois colonnes, chacun défini sur la même disposition, vous donne le tableau ci-dessus Le Page du widget de la table de tarification a la liste de contrôle complète et cinq mises en page en direct.
2. Augmentez un plan au-dessus des autres
Un plan en surbrillance donne au lecteur un défaut, et la plupart le prendront Le surbrillance fait trois choses à la fois : la carte est un peu plus haute ou levée, le bouton utilise la couleur de l'accent au lieu du style de contour, et un ruban nomme la raison (“Most popular”, “Best value”, “Recommended”).
Mettez en surbrillance exactement une carte Deux cartes en surbrillance s'annulent Choisissez le plan avec la meilleure marge pour vous qui convient toujours à la plupart des lecteurs, pas le plus cher.
Dans le widget Table des prix, activez Tableau de surbrillance dans l'onglet Contenu, puis ouvrez le Ruban section pour définir le texte, l'alignement, la position et la rotation. Donnez à la carte en surbrillance une couleur de bouton différente dans l'onglet Style afin qu'elle ne repose pas uniquement sur le ruban.
3. Faites du prix la chose la plus importante sur la carte
Le prix doit être le texte le plus grand sur la carte, plus grand que le nom du plan Les lecteurs scannent un tableau de prix pour les chiffres en premier et lisent les noms du plan en second, donc un design qui rend le nom plus grand que le prix les ralentit.
Gardez le symbole de la devise et la période de facturation plus petite que le nombre. “$49” lit plus vite que “49.00 USD par mois” Si vous escomptez un forfait, montrez le prix original barré à côté du prix de vente Le numéro barré est un point d'ancrage : 49 semble moins cher lorsque 69 se trouve à côté qu'il ne le fait seul.
Le widget a un Vente basculer sous Tarification Allumez-le, remplissez le Prix Original(en), et le strike-through apparaît automatiquement Choisissez la devise dans la liste ou tapez votre propre symbole.
4. Nommez le plan d'après l'acheteur, pas le niveau
Les noms de forfait fonctionnent mieux lorsqu'ils indiquent au lecteur à qui s'adresse le forfait. “Starter, Growth, Agency” indique plus de “Basic, Standard, Premium” et un sous-titre d'une ligne sous chaque nom (“Pour un site”, “Pour les petites équipes”, “Pour le travail des clients”) supprime les suppositions.
Évitez les noms qui ont besoin de la liste de fonctionnalités pour avoir un sens Si un lecteur doit comparer les lignes pour déterminer quel plan est “Standard”, le nom a échoué Évitez les blagues et les noms de code internes pour la même raison.
Le widget Table de tarification a un Titre et un Sous-titre champ dans la section En-tête, plus une icône et une balise optionnelles Le sous-titre est le bon endroit pour “Pour les petites équipes”.
5. Gardez les lignes de fonctionnalités courtes et dans le même ordre
Chaque rangée de caractéristiques doit tenir sur une ligne, trois à six mots Enveloppement de longues rangées, les cartes deviennent inégales et le lecteur arrête de comparer entre les plans car les rangées ne s'alignent plus.
Commandez les lignes de la même façon dans chaque carte, avec les lignes qui changent entre les plans en haut (“1 site” vs “5 sites” vs “Unlimited sites”).Cinq à sept lignes par carte suffisent Si vous avez vingt fonctionnalités, le tableau des prix est le mauvais endroit pour eux : mettez les cinq premiers ici et liez à un tableau comparatif pour le reste.
Le widget Caractéristiques repeater prend un texte, une icône et une info-bulle facultative par ligne Utilisez la même icône pour chaque fonctionnalité incluse et une différente (ou aucune) pour les fonctionnalités qu'un plan n'inclut pas, de sorte que le motif visuel correspond à toutes les cartes.
6. Mettez le détail dans une info-bulle, pas dans la rangée
Une info-bulle vous permet de garder la ligne courte tout en répondant à la question “qu'est-ce que cela inclut ?” La ligne dit “All widgets” ; l'info-bulle dit “Every widget and extension”.
Utilisez des info-bulles pour les deux ou trois lignes qui génèrent des questions de support, pas pour chaque ligne Une carte où chaque fonctionnalité a un soulignement en pointillés semble cacher quelque chose Gardez le texte de l'info-bulle sur une phrase.
Dans le widget Table de tarification, chaque ligne du répéteur Caractéristiques a un Info-bulle switch, un champ de texte et une option de placement (en haut, en bas, à gauche, à droite).
7. Un bouton par carte, avec un verbe dessus
Le bouton est le seul élément de la carte qui fait n'importe quoi, alors donnez-lui un travail et étiquetez-le avec un verbe. “Get started”, “Start free trial”, “Choisissez Growth” tout travail. “Submit” et “Click here” ne.
Sous le bouton, une courte ligne de confiance supprime la dernière objection : “Annuler à tout moment”, “14-day money back”, “Aucune carte nécessaire” Gardez-la à cinq mots et n'empilez pas trois d'entre eux.
Le widget Pied la section contient le texte du bouton, le lien et un Informations supplémentaires champ pour la ligne de confiance Si vous vendez avec Easy Digital Downloads, la même section a un bouton d'achat EDD qui renvoie directement au produit Pour un produit WooCommerce, lier le bouton au produit ou à la page de paiement.
8. Ajoutez une bascule mensuelle et annuelle uniquement lorsque l'économie vaut la peine d'être affichée
Un basculement mensuel et annuel est logique lorsque la facturation annuelle permet au lecteur d'économiser un montant clair, généralement deux mois ou plus. Si la réduction annuelle est faible, le basculement ajoute une étape sans modifier la décision, et une seule ligne de” annuelle facturée avec des ressources effectue le même travail.
Afficher le prix annuel par mois (“39 $/mois,” annuel facturé) plutôt que le total annuel complet, donc les deux états à bascule se comparent comme pour comme. Mettez l'économie à côté de la bascule (“Save 20 %”) pour que le lecteur sache pourquoi le commutateur existe avant de cliquer dessus.
Le widget Table de prix contient un prix par carte, donc la bascule provient d'un deuxième widget. Construisez un jeu de cartes avec des prix mensuels et un avec des prix annuels, enregistrez-les chacun sous forme de modèle de section et mettez les deux dans le Basculer le widget Contenu(en anglais), qui se trouve dans le plan Master Addons Pro. La page Toggle Content comporte les étapes de configuration et un exemple en direct.
9. choisissez une mise en page qui correspond à la page, puis conservez-la
La disposition d'un tableau de prix doit correspondre à la section qui l'entoure : une carte simple sur une page SaaS propre, un en-tête arrondi sur une marque plus douce, une image de fond lorsque le reste de la page en choisit une et l'utilise pour chaque carte du tableau.
Mélanger les mises en page à l'intérieur d'une table est une erreur courante Le lecteur lit la différence de forme comme une différence dans les plans Gardez les couleurs limitées aussi : une couleur d'accent pour la carte surlignée, une neutre pour le reste.
Le widget Table de tarification comporte cinq mises en page dans le Disposition dropdown (Default, Left Align Content, Rounded Table, Table with BG Image and Skew BG Pattern), et le contenu reste en place lorsque vous basculez entre eux Bibliothèque de modèles a des sections de prix construites sur ces mises en page si vous préférez partir d'une conception finie.
10. Vérifiez le tableau sur un téléphone avant de publier
Sur un téléphone les cartes s'empilent dans une colonne, de sorte que le lecteur voit un plan à la fois et défile devant les autres Cela change deux décisions : quelle carte vient en premier, et quelle est la taille de chaque carte.
Mettez le plan en surbrillance en premier ou en deuxième sur mobile S'il se trouve en troisième position sur le bureau, utilisez la commande réactive d'Elementor sur le conteneur pour le déplacer vers le haut Gardez les listes de fonctionnalités sur cinq lignes afin qu'une carte tienne dans environ un écran et placez le bouton suffisamment large pour appuyer.
Ouvrez le mode réactif Elementor (l'icône du téléphone en bas du panneau) et vérifiez le tableau au point d'arrêt mobile Les commandes de l'onglet Style du widget Table de tarification sont dotées de commutateurs réactifs, vous pouvez donc réduire la police de prix et le remplissage sur les téléphones sans modifier la version du bureau.
Vous voulez les dix conseils dans un seul widget ? Le Widget de table de tarification a le commutateur de surbrillance, le ruban, le prix de vente, les info-bulles de fonctionnalités et cinq mises en page comme commandes de panneau, donc chaque conseil ci-dessus est un paramètre plutôt qu'un CSS personnalisé.
Questions fréquemment posées
Combien de forfaits un tableau de prix doit-il avoir ?
Trois est le numéro le plus sûr, et quatre fonctionne lorsqu'un plan a un prix personnalisé Deux plans force un oui ou pas de choix, et cinq arrêts ou plus s'adaptent côte à côte sur un écran d'ordinateur portable et se transforment en un long défilement sur un téléphone.
Quel plan doit être mis en évidence dans un tableau de prix ?
Mettez en surbrillance le plan qui convient à la plupart des lecteurs et qui a toujours une bonne marge pour vous, généralement celui du milieu. Levez-le avec une ombre, un bouton solide et un ruban tel que “Most popular” Mettez en surbrillance une seule carte ; deux cartes en surbrillance s'annulent.
Comment puis-je ajouter un basculer mensuel et annuel à un tableau de prix Elementor ?
Construisez deux jeux de cartes de prix, un avec des prix mensuels et un avec une année, et enregistrez chacun comme modèle de section Le widget Toggle Content dans Master Addons Pro affiche un modèle à la fois derrière un commutateur Le widget Table de prix lui-même détient un prix par carte.
Un tableau des prix doit-il indiquer le prix initial barré ?
Oui quand un forfait est réduit Un prix original barré à côté du prix de vente donne au lecteur un point d'ancrage, et le prix de vente semble plus bas qu'il ne le fait seul Dans le widget Master Addons Pricing Table, le commutateur de vente et le champ Prix d'origine font cela.
Comment puis-je faire des colonnes de table de tarification la même hauteur dans Elementor ?
Mettez les cartes dans un conteneur et réglez ses éléments d'alignement sur Stretch, puis donnez à chaque plan le même nombre de lignes de caractéristiques Les lignes qui s'enroulent sur deux lignes sont la cause habituelle des cartes inégales, alors raccourcissez le texte avant d'ajuster le remplissage.
Réflexions finales
La conception de la table de tarification se résume à une liste courte : trois plans, un relevé, le prix comme texte le plus important, les noms de plans qui disent à qui s'adresse le plan, les lignes de fonctionnalités qui correspondent à une ligne, les info-bulles pour les détails, un bouton avec un verbe, un basculer uniquement lorsque l'économie annuelle est réelle, une mise en page par table et une vérification sur un téléphone Chacun des dix exemples ci-dessus a été construit avec le widget Table de tarification et quelques paramètres de panneau.
Si vous repartez de zéro, ouvrez le Page du widget de la table de tarification pour voir les cinq mises en page en direct ou choisir une section de prix finie dans le Bibliothèque de modèles et changez les plans Le widget est l'un des widgets et extensions dans Master Addons, et le widget Basculer le contenu pour le commutateur de facturation est dans les plans sur le page de tarification.
Lecture Connexe
- Widget Tableau Comparatif: la matrice complète des fonctionnalités à laquelle un tableau de prix doit être lié
- Widget Table dynamique: une liste de prix avec un prix par ligne, pour les menus et les listes de services
- Boutons animés Élémenteur: styles de boutons pour le pied de page de la carte
- Widgets marketing d'élémenteurs: les autres widgets de conversion dans Master Addons
- Documentation du widget de la table de tarification: chaque contrôle expliqué
- Constructeur de thèmes: modèles d'en-tête et de pied de page pour le reste de la page de tarification
