Le bloc Tableau des Prix vous permet de créer des tableaux de prix avancés et visuellement attrayants pour présenter vos produits ou services. Que vous présentiez des plans d'abonnement, des niveaux de service ou des packages de produits, ce bloc vous donne un contrôle total sur la façon dont chaque plan est affiché.
Chaque tableau de prix comprend un nom de plan, un prix avec symbole monétaire, une période de facturation, une description, un prix régulier/original facultatif, une liste de fonctionnalités et jusqu'à deux boutons d'appel à l'action. Utilisez plusieurs blocs Tableau des Prix côte à côte pour créer une section de prix complète qui aide les visiteurs à comparer les plans et à prendre une décision d'achat.
Ajouter le bloc Tableau des Prix à vos pages
Suivez ces étapes pour ajouter un bloc Tableau des Prix à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Tableau des Prix 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 Prix pour ouvrir ses paramètres. L'onglet Contenu est organisé en une zone de paramètres principale pour l'en-tête du plan et les boutons, suivie d'une section Liste des fonctionnalités pour les éléments de fonctionnalités du plan.
En-tête du plan :
- Nom du plan : Entrez le nom de votre plan tarifaire (par exemple, Basic, Pro, Enterprise). Il apparaît en évidence en haut du tableau des prix.
- Prix : Entrez le prix numérique du plan (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 de devises courantes, y compris Dollar ($), Euro (€), Livre (£), Roupie (₹), Yen (¥), et bien d'autres. Sélectionnez Personnalisé pour entrer le symbole dont vous avez besoin dans le champ Symbole personnalisé.
- Position du symbole monétaire : Définissez si le symbole monétaire apparaît Avant ou Après le nombre du 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 vide pour afficher le prix sans période.
- Afficher le prix régulier : Activez pour afficher un prix original ou régulier au-dessus du prix actuel — utile pour montrer un tarif réduit. Lorsque activé, entrez le montant du Prix régulier et une Étiquette de prix régulier (par exemple, « Normalement ») qui le précède.
- Description : Entrez un court slogan ou une description pour le plan (par exemple, « Parfait pour les débutants »). Prend en charge la mise en forme de texte enrichi de base, y compris gras, italique, souligné et liens.
Boutons :
- Afficher le bouton supérieur : Activez pour afficher un bouton d'appel à l'action au-dessus de la liste des fonctionnalités. Lorsque activé, entrez le Texte du bouton supérieur, le Lien du bouton supérieur, et cochez éventuellement Ouvrir dans une nouvelle fenêtre pour le lien. Définissez le Rayon de bordure du bouton supérieur (0–100px) pour contrôler l'arrondi des coins du bouton.
- Afficher le bouton du bas : Activez cette option pour afficher un deuxième bouton d'appel à l'action sous la liste des fonctionnalités. Lorsque cette option est activée, saisissez le Texte du bouton du bas, le Lien du bouton du bas et cochez éventuellement Ouvrir dans une nouvelle fenêtre. Définissez le Rayon de bordure du bouton du bas pour qu'il corresponde à votre design.
Liste des fonctionnalités :
- Éléments de fonctionnalités : Chaque fonctionnalité apparaît sous forme de ligne déplaçable. Faites glisser les éléments pour les réorganiser. Survolez 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 de la fonctionnalité pour l'élément. Prend en charge la mise en forme de texte enrichi de base, y compris 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 en bas de la liste des fonctionnalités pour ajouter une nouvelle ligne de fonctionnalité.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner la typographie, les couleurs, les boutons et l'apparence générale de votre tableau de prix. L'onglet Avancé est organisé en cinq sections de style suivies des contrôles d'espacement et de visibilité standard.
En-tête :
- Typographie du nom du forfait : Définissez la famille de polices, la taille, le poids et le style du texte du nom du forfait.
- Couleur du nom du forfait : Définissez la couleur du texte du nom du forfait.
- Typographie du prix régulier : Définissez la typographie du prix régulier (original) lorsque l'option Afficher le prix régulier est activée.
- Couleur du prix régulier : Définissez la couleur du texte du prix régulier.
- Typographie de la description : Définissez la typographie du texte de description du forfait.
- Couleur de la description : Définissez la couleur du texte de 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).
- Rembourrage : Définissez l'espacement intérieur (0–100 px) 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 Extrêmement 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 du bas : Définissez la couleur d'arrière-plan du bouton d'appel à l'action du bas.
- Taille du bouton du bas : Choisissez la taille du bouton du bas — Petit, Moyen, Grand, Très grand ou Extrêmement grand.
- Icône avant le texte du bouton du bas : Ajoutez une icône qui apparaît avant le texte du libellé du bouton du bas.
- Icône après le texte du bouton du bas : Ajoutez une icône qui apparaît après le texte du libellé du bouton du bas.
Prix :
- Typographie du prix : Définissez la famille de polices, la taille, le poids et le style du nombre de prix principal.
- Couleur du prix : Définissez la couleur du nombre de prix principal.
- Typographie du exposant du prix : Définissez la typographie du symbole de devise lorsqu'il est affiché en exposant à côté du prix.
- Exposant du prix - Haut : Ajustez la position verticale du symbole de devise en exposant par rapport au nombre du prix.
Liste des fonctionnalités :
- Typographie de la liste des fonctionnalités : Définissez la famille de polices, la taille, le poids et le style du texte de chaque élément de fonctionnalité.
- Couleur de la liste des fonctionnalités : Définissez la couleur du texte des éléments de fonctionnalité.
- Couleur de l'icône : Définissez la couleur des icônes affichées à côté de chaque élément de fonctionnalité.
- Espace entre les éléments : Définissez l'espacement (1–100px) entre chaque élément de la liste des fonctionnalités.
- Alignement : Définissez l'alignement horizontal de la liste des fonctionnalités — Gauche, 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.
- Rembourrage : Définissez l'espacement intérieur (0–100px) dans la zone de la liste des fonctionnalités.
Bloc :
- Rayon de bordure : Définissez l'arrondi des coins de l'ensemble du bloc de tableau de prix (0–100px).
- Style de bordure : Définissez le style de bordure du bloc — Uni, Pointillé ou Tirets.
- Couleur de bordure : Définissez la couleur de la bordure du bloc.
- Épaisseur de bordure : Définissez l'épaisseur de la bordure par côté (Haut, Droite, Bas, Gauche). Basculez 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 de tableau de prix (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre le tableau et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc de tableau de 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 de tableau de prix. Cet ID est créé automatiquement par SeedProd pour le style personnalisé ou le ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez tous les attributs HTML à l'élément enveloppant du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-plan|pro).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc de tableau de prix sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc de tableau de prix sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc de tableau de prix sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui s'affichent lorsque le tableau de prix défile dans la vue. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres. L'ajout d'une animation subtile peut aider à attirer l'attention sur vos plans tarifaires au bon moment.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc de tableau de prix et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Tableau de prix à votre page ! Placez plusieurs blocs Tableau de prix côte à côte dans une mise en page en colonne pour créer une section de prix complète qui permet aux visiteurs de comparer les plans en un coup d'œil. Expérimentez avec les arrière-plans des en-têtes, les couleurs des boutons et la typographie pour créer une section de prix qui correspond à votre marque et génère des conversions.