Le bloc Tableau des tarifs vous permet de créer des tableaux de tarifs avancés et visuellement attrayants pour présenter vos produits ou services. Que vous présentiez des formules d'abonnement, des niveaux de service ou des offres groupées de produits, ce bloc vous offre un contrôle total sur la manière dont chaque formule est affichée.
Chaque tableau tarifaire comprend le nom du forfait, le prix avec le symbole monétaire, la période de facturation, la description, le prix normal/d'origine facultatif, une liste des fonctionnalités et jusqu'à deux boutons d'appel à l'action. Utilisez plusieurs blocs Tableau tarifaire côte à côte pour créer une section tarifaire complète qui aide les visiteurs à comparer les forfaits et à prendre une décision d'achat.
Ajouter le bloc Tableau des tarifs à vos pages
Suivez ces étapes pour ajouter un bloc Tableau des tarifs à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Tableau des tarifs dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Tableau des tarifs pour ouvrir ses paramètres. L'onglet Contenu est organisé en une zone de paramètres principaux pour l'en-tête et les boutons du forfait, suivie d'une section Liste des fonctionnalités pour les éléments du forfait.
En-tête du plan :
- Nom du forfait : entrez le nom de votre forfait tarifaire (par exemple, Basic, Pro, Enterprise). Il apparaîtra en haut du tableau des tarifs.
- Prix : Entrez le prix numérique du forfait (par exemple, 29). Le symbole monétaire et la période sont définis séparément.
- Symbole monétaire : choisissez le symbole monétaire à afficher dans une liste déroulante des devises courantes, notamment le dollar ($), l'euro (€), la livre sterling (£), la roupie (₹), le yen (¥) et bien d'autres encore. Sélectionnez Personnalisé pour saisir le symbole de votre choix dans le champ Symbole personnalisé.
- Position du symbole monétaire : définissez si le symbole monétaire apparaît avant ou après le prix.
- Période : entrez le texte de la période de facturation qui apparaît après le prix (par exemple, /mois, /an, /utilisateur). Laissez ce champ vide pour afficher le prix sans période.
- Afficher le prix normal : activez cette option pour afficher le prix d'origine ou normal au-dessus du prix actuel, ce qui est utile pour indiquer un tarif réduit. Lorsque cette option est activée, saisissez le montant du prix normal et une étiquette de prix normal (par exemple, « Normalement ») qui le précède.
- Description : Entrez un slogan ou une description succincte du programme (par exemple, « Parfait pour les débutants »). Prend en charge le formatage de texte enrichi de base, notamment le gras, l'italique, le soulignement et les liens.
Boutons :
- Afficher le bouton supérieur : activez cette option pour afficher un bouton d'appel à l'action au-dessus de la liste des fonctionnalités. Une fois cette option activée, saisissez le texte du bouton supérieur, le lien du bouton supérieur et, si vous le souhaitez, cochez la case Ouvrir dans une nouvelle fenêtre pour le lien. Définissez le rayon de la bordure du bouton supérieur (0 à 100 pixels) pour contrôler l'arrondi des coins du bouton.
- Afficher le bouton inférieur : activez cette option pour afficher un deuxième bouton d'appel à l'action sous la liste des fonctionnalités. Une fois cette option activée, saisissez le texte du bouton inférieur, le lien du bouton inférieur et cochez éventuellement la case Ouvrir dans une nouvelle fenêtre. Définissez le rayon de la bordure du bouton inférieur en fonction de votre design.
Liste des fonctionnalités :
- Éléments de fonctionnalités : chaque fonctionnalité apparaît sous forme de ligne pouvant être déplacée. Faites glisser les éléments pour les réorganiser. Passez la souris sur un élément pour afficher les boutons de duplication et de suppression. Cliquez sur le texte d'un élément pour développer ses paramètres individuels.
- Texte : saisissez le texte descriptif de l'élément. Prend en charge le formatage de texte enrichi de base, notamment le gras, l'italique, le soulignement et les liens.
- Icône : choisissez une icône à afficher à côté du texte de la fonctionnalité à l'aide du sélecteur d'icônes. L'icône par défaut est une coche.
- Ajouter un nouvel élément : cliquez sur le bouton situé en bas de la liste des fonctionnalités pour ajouter une nouvelle ligne de fonctionnalités.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner la typographie, les couleurs, les boutons et l'apparence générale de votre tableau des prix. L'onglet Avancé est organisé en cinq sections de style, suivies des commandes standard d'espacement et de visibilité.
En-tête :
- Typographie du nom du plan : définissez la police, la taille, l'épaisseur et le style du texte du nom du plan.
- Couleur du nom du plan : définissez la couleur du texte du nom du plan.
- Typographie du prix normal : définissez la typographie du texte du prix normal (original) lorsque l'option Afficher le prix normal est activée.
- Couleur du prix normal : définissez la couleur du texte du prix normal.
- Description Typographie : définissez la typographie du texte de description du plan.
- Couleur de la description : définissez la couleur du texte de la description.
- Couleur d'arrière-plan : définissez la couleur d'arrière-plan de la zone d'en-tête (nom du forfait, prix et description).
- Remplissage : définissez l'espacement intérieur (0 à 100 pixels) dans la zone d'en-tête.
Boutons :
- Couleur du bouton supérieur : définissez la couleur d'arrière-plan du bouton d'appel à l'action supérieur.
- Taille du bouton supérieur : choisissez la taille du bouton supérieur — Petit, Moyen, Grand, Très grand ou Très très grand.
- Icône avant le texte du bouton supérieur : ajoutez une icône qui apparaît avant le texte du libellé du bouton à l'aide du sélecteur d'icônes.
- Icône après le texte du bouton supérieur : ajoutez une icône qui apparaît après le texte du libellé du bouton à l'aide du sélecteur d'icônes.
- Couleur du bouton inférieur : définissez la couleur d'arrière-plan du bouton d'appel à l'action inférieur.
- Taille du bouton inférieur : choisissez la taille du bouton inférieur — Petit, Moyen, Grand, Très grand ou Très très grand.
- Icône avant le texte du bouton inférieur : ajoutez une icône qui apparaît avant le texte de l'étiquette du bouton inférieur.
- Bouton inférieur après l'icône de texte : ajoutez une icône qui apparaît après le texte de l'étiquette du bouton inférieur.
Prix :
- Typographie des prix : définissez la police, la taille, l'épaisseur et le style du chiffre principal indiquant le prix.
- Couleur du prix : définissez la couleur du chiffre principal du prix.
- Typographie des indices supérieurs pour les prix : définissez la typographie du symbole monétaire lorsqu'il est affiché en indice supérieur à côté du prix.
- Superscript haut du prix : ajuste la position verticale du symbole monétaire en exposant par rapport au chiffre du prix.
Liste des fonctionnalités :
- Liste des fonctionnalités Typographie : définissez la police, la taille, l'épaisseur et le style de tous les textes des fonctionnalités.
- Liste des fonctionnalités Couleur : définissez la couleur du texte des éléments de fonctionnalité.
- Couleur des icônes : définissez la couleur des icônes affichées à côté de chaque élément de fonctionnalité.
- Espace entre : définissez l'espacement (1 à 100 pixels) entre chaque élément de la liste.
- Alignement : définissez l'alignement horizontal de la liste des fonctionnalités : à gauche, au centre ou à droite.
- Couleur d'arrière-plan : définissez une couleur d'arrière-plan pour la zone de la liste des fonctionnalités.
- Remplissage : définissez l'espacement intérieur (0 à 100 pixels) dans la zone de la liste des fonctionnalités.
Bloc :
- Rayon de la bordure : définissez l'arrondi des coins de l'ensemble du bloc du tableau des prix (0 à 100 px).
- Style de bordure : définissez le style de bordure du bloc : pleine, pointillée ou en pointillés.
- Couleur de la bordure : définit la couleur de la bordure du bloc.
- Largeur de la bordure : définissez l'épaisseur de la bordure pour chaque côté (haut, droite, bas, gauche). Activez l'icône de synchronisation pour appliquer la même valeur à tous les côtés à la fois.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Tableau des prix (haut, droite, bas, gauche). Cela détermine l'espace qui apparaîtra entre le tableau et les éléments environnants sur la page.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Tableau des prix (haut, droite, bas, gauche). Cela crée un espace entre le contenu du tableau et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Tableau des tarifs. Cet ID est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-plan|pro).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc « Tableau des tarifs » sur les écrans d'ordinateur.
- Masquer sur tablette : masquer le bloc « Tableau des tarifs » sur les tablettes.
- Masquer sur mobile : masquer le bloc « Tableau des tarifs » sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le tableau des tarifs apparaît à l'écran. Les options comprennent Rebond, Fondu entrant, Zoom avant, Rotation vers l'intérieur et bien d'autres encore. L'ajout d'une animation subtile peut aider à attirer l'attention sur vos plans tarifaires au moment opportun.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Tableau des prix et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Tableau des tarifs à votre page ! Placez plusieurs blocs Tableau des tarifs côte à côte dans une disposition en colonnes pour créer une section complète dédiée aux tarifs qui permet aux visiteurs de comparer les offres en un coup d'œil. Testez différents arrière-plans d'en-tête, couleurs de boutons et polices de caractères pour créer une section dédiée aux tarifs qui correspond à votre marque et favorise les conversions.