Principaux points à retenir
- Le widget Master Addons Pricing Table expédie cinq modèles de table de tarification Elementor sous forme de liste déroulante Mise en page : Par défaut, contenu d'alignement gauche, table arrondie, table avec image BG et modèle BG asymétrique.
- La modification de la liste déroulante de mise en page maintient le nom du plan, le prix, les fonctionnalités et le bouton en place, de sorte qu'un ensemble de contenu peut être prévisualisé dans les cinq conceptions en moins d'une minute.
- La bibliothèque de modèles Master Addons comprend des sections de tarification toutes faites, y compris des conceptions sombres, à deux plans, à quatre plans et à commutateur de facturation, qui importent dans n'importe quelle page Elementor depuis l'éditeur.
- Chaque exemple de table de tarification sur cette page suit le même ordre : nom du forfait, à qui il s'adresse, prix et période, trois à sept lignes de fonctionnalités, un bouton et une ligne de confiance en option.
- Un tableau de prix sombre se lit mieux avec un accent brillant sur le plan en surbrillance uniquement ; les exemples ci-dessous utilisent le vert, le cyan ou le rose pour cette seule carte.
- Un changement mensuel et annuel sur une section de tarification nécessite deux jeux de cartes et le widget Toggle Content de Master Addons Pro.
Un modèle de table de tarification Elementor vous permet d'économiser la partie du travail qui prend le plus de temps : les décisions de conception Les dispositions de widgets ci-dessous vous donnent une forme de carte en un clic, et les sections toutes faites vous donnent un bloc de tarification entier avec le cap, le commutateur et les cartes déjà disposés De toute façon vous remplacez les noms de plan, les prix et les fonctionnalités et gardez le design.
Cette page rassemble douze exemples de tableaux de prix construits avec Additions maîtres pour Elementor. Les cinq premières sont les propres mises en page du widget avec les paramètres exacts utilisés, de sorte que vous pouvez reproduire chacune d'elles Les sept suivantes sont des sections de la bibliothèque de modèles, choisies pour couvrir les formes de pages de tarification communes : trois plans, deux plans, quatre plans, sombre, clair, et un commutateur de facturation.
Table des matières
Comment utiliser ces modèles
Il y a deux sortes de modèle sur cette page Les exemples 1 à 5 sont des mises en page de widgets : déposez le Widget de table de tarification dans un conteneur, choisissez la mise en page dans le dépôt et copiez les paramètres répertoriés sous chaque exemple. Les exemples 6 à 12 sont des sections complètes : ouvrez le Bibliothèque de modèles(en), importez la section, et modifiez le texte en place.
Les paramètres répertoriés pour chaque mise en page sont ceux qui changent le look Tout le reste est à sa valeur par défaut Les couleurs sont données sous forme de valeurs hexadécimales afin que vous puissiez les coller dans l'onglet Style, et les cinq cartes de mise en page utilisent le même contenu : un plan de 29 $ avec trois fonctionnalités et un bouton “Obtenir démarré”.
Les cinq dispositions de widgets de la table de tarification
1. Défaut
La disposition par défaut est celle avec laquelle commencer L'en-tête est centré, le prix se situe sous le nom, et les caractéristiques et le bouton suivent dans le corps Il fonctionne pour n'importe quel nombre de plans et est le choix le plus sûr pour une ligne à trois colonnes.
- Mise en page : Défaut
- Schéma de couleurs d'en-tête : personnalisé, dégradé du #6938EF au #B497FF à 135 degrés
- Rubrique et couleur des prix : #FFFFFF ; sous-titre et période : #E4DBFF
- Icône de fonctionnalité : cochez, #6938EF ; texte de la fonctionnalité : #1A1033
- Bouton : arrière-plan #F1EEFF, texte #6938EF, rayon 6 px
- Info supplémentaire :“Annuler à tout moment”, #6B7280
2. Aligner le contenu à gauche
Left Align Content déplace le nom, le prix et les fonctionnalités sur le bord gauche Il se lit plus rapidement lorsque les noms des plans sont longs ou lorsque la carte se trouve à côté d'un paragraphe de texte, et il correspond aux pages de tarification de style éditorial où tout le reste est aligné.
- Mise en page : Contenu d'alignement gauche
- Toutes les couleurs comme par défaut
- Alignement des boutons : à gauche, avec 24 px de rembourrage à gauche sur le pied de page
3. Table ronde
Table arrondie met le prix à l'intérieur d'un grand cercle dans l'en-tête, ce qui fait du nombre la première chose que tout le monde voit Il a besoin d'un en-tête plus grand, alors donnez-lui le même compte de caractéristiques sur chaque carte ou la ligne aura l'air inégale Le soulignement jaune sur les lignes de caractéristiques fait partie de la disposition.
- Mise en page : Table Ronde
- Gradient d'en-tête comme par défaut ; gradient de cercle de #F50A7F à #FF6FB1 à 135 degrés, ou laissez-le sur la teinte par défaut
- Texte des fonctionnalités : #1A1033, couleur soulignée #FFD600 (par défaut de mise en page)
4. Tableau avec image BG
Table avec BG Image remplit toute la carte avec une image, un dégradé, une vidéo ou un diaporama, avec l'en-tête et les fonctionnalités flottant sur le dessus Il convient à un plan en vedette ou à une page de tarification pour un produit visuel Le panneau de caractéristiques a besoin d'un fond semi-transparent sombre pour que le texte reste lisible sur n'importe quelle photo.
- Mise en page : Table avec BG Image
- Arrière-plan : Image, centre de position, couverture de taille
- Caractéristiques arrière-plan : rgba (20, 10, 45, 0,6) ; présente le texte : #FFFFFF
- Gradient d'en-tête comme par défaut, avec 70 pour cent d'opacité, donc la photo se voit à travers
5. Modèle BG asymétrique
Skew BG Pattern coupe l'en-tête en biais et ajoute deux bandes blanches, ce qui donne au mouvement de la carte sans image Utilisez une couleur d'accent ; un dégradé se bat avec les rayures C'est la mise en page la plus souvent choisie pour une seule carte sur une page de destination.
- Mise en page : Modèle BG asymétrique
- Schéma de couleurs d'en-tête : personnalisé, solide #6938EF
- Rayon de la carte : 20 px ; fond de la carte #FFFFFF
- Souligner les fonctionnalités sur le bouton comme par défaut
6. trois plans avec une carte du milieu en surbrillance
La ligne de prix SaaS standard : trois widgets de table de tarification dans un conteneur à trois colonnes, celui du milieu relevé La carte surélevée utilise Highlight Table, un ruban indiquant “Most popular”, un bouton rose uni au lieu du contour, et le commutateur de vente avec 69 $ comme prix d'origine et 49 $ comme prix actuel Les cartes extérieures utilisent la couleur de corps plus claire pour que celle du milieu soit en avant.
- Conteneur : trois conteneurs pour enfants à 31,5 pour cent de largeur, espace 28 px, Aligner les éléments : étirer
- Carte du milieu : Tableau de surbrillance sur ; ruban“Most popular”, vertical 18, horizontal -10 ; fond de bouton #F50A7F, texte #FFFFFF
- Cartes extérieures : fond de corps #F6F5FA ; carte du milieu : #FFFFFF avec une ombre 0 24px 60px rgba(105, 56, 239, 0,28)
7. Tableau de tarification sombre à quatre plans
Quatre plans sur fond noir, avec un seul accent de citron vert sur la bordure et la balise du plan surligné Les caractéristiques sont identiques entre les cartes, ce qui est un choix délibéré : la différence entre les plans est uniquement le prix et le lecteur est censé choisir par budget Les boutons utilisent le widget Creative Button, donc les effets de survol proviennent de ce widget plutôt que du CSS personnalisé.
Utilisez ce modèle lorsque les plans diffèrent par des limites plutôt que par des fonctionnalités Le texte gras des fonctionnalités sur la première carte et le texte régulier sur les autres est la seule hiérarchie visuelle, alors gardez-le ainsi.
8. Tarification SaaS sombre avec un forfait personnalisé
À partir du kit de modèles Finix, cette section montre comment gérer un plan sans prix fixe La troisième carte imprime “Custom” où se trouverait le numéro et échange le texte du bouton pour “Talk à us” Une description d'une ligne sous chaque prix explique à qui s'adresse le plan, et une note de bas de page sous la ligne couvre la facturation et la remise annuelle en une phrase.
Les faibles cercles concentriques derrière les cartes sont une image de fond de section, ne faisant pas partie du widget Remplacez l'image ou retirez-la et les cartes restent telles quelles.
9. Tableau tarifaire léger à deux plans
Deux plans sont une décision oui ou non, donc cette disposition rend la carte payée impossible à manquer : la carte entière est remplie de la couleur d'accent et le bouton s'inverse vers l'obscurité. Vérifiez les icônes grises sur les caractéristiques de base des marques de carte qui ne sont pas incluses, ce qui permet aux deux cartes de conserver les mêmes quatre lignes.
Utilisez-le lorsqu'il existe un niveau gratuit et un niveau payant. Avec trois forfaits ou plus, la carte couleur devient trop forte.
10. Cartes de prix avec un commutateur de facturation
Cette section a le toggle mensuel et annuel déjà construit Le switch est le widget Toggle Content de Master Addons Pro, et chaque état charge une ligne de prix enregistrée Les cartes impriment “billed month” ou “billed annuellement” sous le prix pour que le lecteur sache quel état l'Importe, ouvrez Modèles > Modèles enregistrés, et modifiez les deux lignes de prix là Pour construire la même chose à partir de zéro, y compris le modèle de type Section catch, suivez le guide de bascule mensuel et annuel.
11. Comparaison à quatre plans avec les tiques caractéristiques
Lorsque les plans diffèrent par des caractéristiques plutôt que par des limites, les ticks et les croix permettent au lecteur de parcourir une colonne. Passé environ sept lignes, a tableau comparatif fait ce travail mieux que les cartes Les quatre cartes portent les mêmes sept lignes dans le même ordre, et l'icône change par plan Le plan en surbrillance est rempli de la couleur de l'accent, avec un bouton blanc, et se situe troisième plutôt que deuxième car la page s'attend à ce que la plupart des lecteurs choisissent le niveau supérieur.
12. Tarification sombre avec un basculement mensuel et annuel
Une section sombre avec des cartes claires est l'inverse de l'exemple 7, et elle fait des cartes la chose la plus brillante de la page La bascule se situe entre le titre et les cartes, la note par utilisateur sous chaque nom de plan définit les attentes, et “Aucune carte de crédit requise” sous chaque bouton supprime la dernière objection Les formes décoratives dans les coins sont des éléments de fond de section.
Comment importer une section de prix
- Ouvrez la page dans Elementor et cliquez sur l'icône du modèle Master Addons dans l'éditeur, ou ouvrez Modèles > Modèles Master Addons.
- Recherchez “pricing”, prévisualisez la section et cliquez sur Importer. Les sections construites avec les widgets Pro nécessitent Master Addons Pro actif.
- La section atterrit là où se trouvait votre curseur Modifiez le texte de chaque carte dans le panneau ; le design reste.
- Pour les sections avec bascule, modifiez les deux lignes de tarification sous Modèles > Modèles enregistrés.
Le guide d'importation de modèles couvre le bouton éditeur, l'écran Pages d'importation et ce qui arrive à la copie importée.
Vous voulez les cinq mises en page sans rien importer ? Le Widget de table de tarification les a dans une seule liste déroulante, et le Bibliothèque de modèles a les sections complètes indiquées ci-dessus.
Questions fréquemment posées
Elementor a-t-il des modèles de tableaux de prix ?
La bibliothèque de modèles d'Elementor propose des blocs de prix pour les utilisateurs Pro, et son widget Price Table est également Pro. Sur Elementor gratuit, les modèles de prix proviennent d'un addon : le widget Master Addons Pricing Table comporte cinq mises en page et sa bibliothèque de modèles comporte des sections de prix complètes.
Combien de forfaits un modèle de tableau de prix doit-il avoir ?
Trois est le numéro le plus sûr, et quatre fonctionne lorsqu'un plan est un niveau personnalisé ou d'entreprise Les exemples ci-dessus montrent deux, trois et quatre plans ; au-delà de quatre, les cartes côte à côte cessent de tenir sur un écran d'ordinateur portable.
Puis-je modifier la disposition après avoir construit la table ?
Oui. La liste déroulante Mise en page dans le widget Table de tarification des modules complémentaires principaux bascule entre les cinq modèles et maintient le nom du plan, le prix, les fonctionnalités et le bouton en place Seuls les paramètres de style qui appartiennent à une mise en page, comme le cercle ou le biais, changent.
Comment puis-je créer un tableau de prix sombre dans Elementor ?
Définissez l'arrière-plan de la section sur noir ou bleu marine foncé, donnez à chaque carte un corps gris foncé avec une bordure plus claire d'un pixel et utilisez une couleur d'accent pour la bordure, la balise et le bouton de la carte en surbrillance. Les exemples 7, 8, 10 et 12 ci-dessus montrent quatre versions de celui-ci.
Les exemples de tableaux de prix sont-ils réactifs ?
Oui. Les cartes s'empilent dans une colonne sur les téléphones Mettez le plan en surbrillance en premier ou en deuxième dans l'ordre des conteneurs pour mobile, maintenez les listes de fonctionnalités à environ cinq lignes et vérifiez le tableau au point d'arrêt mobile en mode réactif d'Elementor avant de publier.
Réflexions finales
Les douze modèles sont livrés par deux itinéraires Les cinq dispositions de widgets couvrent la forme de la carte et prennent un changement déroulant chacune Les sept sections de bibliothèque couvrent les formes de page : trois plans avec un milieu surligné, quatre plans sombres, SaaS avec un niveau personnalisé, une lumière à deux plans, un commutateur de facturation, des ticks et des croix à quatre plans et sombre avec des cartes claires Chacun garde l'ordre qui fonctionne : nom, à qui il s'adresse, prix, une liste de fonctionnalités courte, un bouton.
Commencez par la disposition ou la section la plus proche de vos plans sur le Page du widget de la table de tarification: changez le texte et vérifiez-le sur un téléphone avant sa mise en ligne.
Lecture connexe
- Conception de la table de tarification : 10 conseils avec exemples
- Bibliothèque de modèles Master Addons
- Kits de modèles d'éléments
- Modèles de sections d'éléments
- Documentation du widget de la table de tarification
- Comment ajouter un basculer mensuel et annuel à un tableau de prix des éléments
- Tableau de prix des éléments vs Tableau comparatif : lequel utiliser
- Comment créer une liste de prix ou un menu dans Elementor
