Le prix est l'endroit où les visiteurs décident, donc le tableau doit être facile à numériser et facile à comparer Le gratuit Widget de table de tarification dans Modules complémentaires principaux pour Elementor crée un plan unique avec un en-tête, un prix, une liste de fonctionnalités et un bouton d'appel à l'action, et vous en définissez quelques-uns côte à côte pour créer une section de tarification complète.
Vous nommez le plan, définissez le prix et la période, répertoriez les fonctionnalités, puis ajoutez un ruban pour marquer le populaire et stylisez les couleurs Pas de tableaux codés à la main Ce guide couvre chaque paramètre du widget.
Ce que fait le widget Table de tarification #
Le widget construit un plan à la fois Chacun a un en-tête avec un titre, un sous-titre et un prix, une liste de fonctionnalités avec des icônes de coche, un bouton et une note de bas de page en option. Déposez trois dans une rangée et vous avez une comparaison de prix classique.
Trois onglets l'exécutent. Contenu contient la mise en page, le texte de l'en-tête, le prix, les fonctionnalités et le ruban. Style gère l'arrière-plan de l'en-tête, les couleurs des fonctionnalités et des prix, ainsi que le bouton. Avancé est l'espacement et la visibilité habituels des éléments.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Les noms de vos plans, les prix, les listes de fonctionnalités, et où chaque bouton doit se lier.
Comment ajouter le widget Table des prix #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Tableau des prix(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on the page and it loads with a sample plan you can edit.
Définir la disposition #
Ouvrir le Contenu onglet. Le Contenu des prix la section définit la disposition générale plus deux bascules rapides, et en dessous se trouvent les sections En-tête, Tarification, Caractéristiques, Pied de page et Ruban.
- Mise en page : l'un des cinq modèles suivants : contenu par défaut, alignement gauche, table arrondie, table avec image BG ou motif BG asymétrique.
- Tableau de surbrillance?: soulevez ce plan pour qu'il se démarque des autres.
- Afficher les fonctionnalités?: afficher ou masquer la liste des fonctionnalités.
Modifier l'en-tête #
Ouvrir le En-tête section pour le nom du plan et le slogan C'est également là que vous choisissez l'arrière-plan de l'en-tête, ce qui donne sa couleur à chaque plan.
- En-tête BG Couleur : l'un des trois préréglages de dégradé, ou Personnalisé pour définir vos propres couleurs dans l'onglet Style.
- Titre et HTML Tag : le nom du plan et son niveau de cap.
- Sous-titre : une ligne courte sous le titre, comme Convient à un site Web unique.
Fixez le prix #
Ouvrir le Tarification section pour le numéro et la façon dont il se lit Vous définissez la devise, le montant, la période de facturation, et un prix de vente optionnel.
- Symbole de devise : le symbole affiché avant le prix, comme $ ou € Euro.
- Prix et vente : le montant, avec une bascule de vente pour afficher un original barré.
- Période: le texte du cycle de facturation, comme /Mois ou /Année.
Ajouter les fonctionnalités #
Ouvrir le Caractéristiques section. C'est un répéteur, donc chaque élément de liste est sa propre entrée avec une étiquette et une icône.
- Texte: le label de fonctionnalité, comme la fonctionnalité n°1 ou les billets illimités.
- Icône: la coche ou la croix affichée à côté de chaque fonctionnalité.
- Info-bulle : une note de vol stationnaire facultative pour expliquer une fonctionnalité.
- Ajouter un élément : ajoutez autant de fonctionnalités que le plan en a besoin.
Ajouter un ruban #
Ouvrir le Ruban section pour ajouter un badge de coin comme Tendance ou Populaire C'est le moyen le plus rapide de pointer les gens vers le plan que vous souhaitez qu'ils choisissent.
- Afficher et titre : allumez le ruban et définissez son texte.
- Aligner et positionner : placez le ruban dans un coin et poussez-le.
- Faire pivoter : inclinez le ruban sur le coin.
Style la table #
Ouvrir le Style onglet pour contrôler les couleurs et l'espacement Il y a des sections pour l'en-tête, la tarification, les fonctionnalités, le pied de page et le ruban, chacune avec ses propres couleurs et typographie.
Le Pied la section stylise le bouton d'appel à l'action, avec la taille, les couleurs, la bordure et les états Normal et Hover, de sorte que le bouton correspond à votre marque et se démarque de la liste des fonctionnalités.
Cas d'utilisation courants #
- SaaS et plans d'applications avec trois niveaux et un favori mis en évidence.
- Sites d'adhésion avec des niveaux d'accès basiques et premium.
- Agences et freelances affichage des niveaux de service packagés.
- Hébergement et outils liste des fonctionnalités par forfait avec coches.
- Cours et événements offre de billets de base et premium.
Conseils pour travailler avec le widget Table de tarification #
- Mettre en évidence un plan. Utilisez la bascule Highlight Table et un ruban sur le plan que vous souhaitez que la plupart des gens achètent Mettez en surbrillance les trois et aucun d'entre eux ne se démarque.
- Conservez même les listes de fonctionnalités. Des comptes de lignes similaires sur tous les plans les rendent faciles à comparer en un coup d’œil.
- Faites correspondre le bouton à l'action. Achetez maintenant, démarrez gratuitement et démarrez, lisez tous différemment, alors choisissez celui qui correspond à l'offre.
- Utilisez les dégradés avec parcimonie. Une couleur d'accent par plan indique plus propre que trois dégradés forts se battant.
- Fixez des périodes claires. Toujours afficher /Mois ou /Année pour que le prix ne soit jamais ambigu.
Foire aux questions #
Qu'est-ce que le widget Table de prix dans Master Addons ?
Il s'agit d'un widget Elementor qui crée un plan de tarification avec un en-tête, un prix et une période, une liste de fonctionnalités et un bouton. Vous en placez quelques-uns côte à côte pour créer une section de tarification complète, et tout est défini à partir du panneau Elementor sans code.
Comment puis-je marquer un plan comme le plus populaire ?
Activez la bascule Highlight Table dans la section Contenu des prix pour augmenter le plan et ajoutez un ruban dans la section Ruban avec un texte comme Tendance ou Populaire. Ensemble, ils attirent l'attention sur le plan que vous souhaitez que les visiteurs choisissent.
Puis-je ajouter une vente ou un prix réduit ?
Oui. La section Tarification a une bascule Vente Allumez-la et le widget affiche le prix d'origine barré à côté du prix de vente, afin que les visiteurs puissent voir la remise Vous définissez le symbole de la devise et la période de facturation dans la même section.
Puis-je afficher plus ou moins de fonctionnalités par forfait ?
Oui. La section Fonctionnalités est un répéteur Utilisez Ajouter un élément pour ajouter des lignes et le X pour les supprimer, afin que chaque plan puisse répertorier exactement ses propres fonctionnalités. Vous pouvez également masquer entièrement la liste des fonctionnalités avec la bascule Afficher les fonctionnalités.
Puis-je ajouter des info-bulles aux fonctionnalités de tarification ?
Oui. Chaque fonctionnalité du répéteur a un onglet Tooltip, vous pouvez donc joindre une courte note de survol qui explique ce que signifie la fonctionnalité. Il est pratique pour les fonctionnalités techniques où l'étiquette à elle seule n'est pas assez claire.
Envelopper #
Le widget Table de tarification transforme vos plans en une comparaison nette : définissez l'en-tête et le prix, répertoriez les fonctionnalités, ajoutez un ruban sur le plan populaire, puis stylisez les couleurs et le bouton Pour les widgets associés, consultez le Widget Appel à l'action et le Widget de boîte d'informations: parcourez le tableau complet Widgets et extensions Master Addons& voir le Page du widget de la table de tarification pour une construction étape par étape, les cinq mises en page et une comparaison avec le tableau des prix d'Elementor Pro.
