Want to make creations as awesome as this one?

Transcript

UTILISER LE BUILDER 2

CHAPITRE 4 : TABLEAUX DE TARIFICATION

MODULE 6

Module de table de tarification

Il est plus facile que jamais de créer des tableaux de prix pour vos produits en ligne. Créez autant de tables que vous le souhaitez et contrôlez les prix et les fonctionnalités de chacun. Vous pouvez même proposer un plan particulier pour augmenter les conversions.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/pricing-tables/

Il est plus facile que jamais de créer des tables de prix pour vos produits en ligne.


Créez autant de tables que vous le souhaitez et contrôlez la détermination du prix et les caractéristiques de chacune. Vous pouvez même proposer un plan particulier pour augmenter les conversions.

Même si votre module comprend plus d'un tableau de prix, il sera traité comme un seul module et peut être placé dans n'importe quelle taille de colonne.


Comment ajouter un module de tables de prix à votre page

Avant de pouvoir ajouter un module de tables de prix à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder. Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual.


Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.


Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.


Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées. Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.



Localisez le module tableaux de tarification dans la liste des modules et cliquez dessus pour l'ajouter à votre page.

La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "tableaux de prix" et cliquer sur "entrer" pour trouver et ajouter automatiquement le module de tableaux de prix!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation : Ajouter un tableau de prix à votre page d'accueil produit

Lorsque vous faites la promotion de vos produits sur une page d'accueil, les tableaux de prix peuvent présenter efficacement vos différentes options de prix.

Dans cet exemple, je vais ajouter un module Tableau de tarification pour afficher trois plans de tarification (ou tableaux) avec l'un de ces plans se démarquant comme un plan vedette afin d'augmenter les conversions.

Tout d'abord, ajoutez une nouvelle section régulière à la page où les tables de prix doivent être affichées.


Ajoutez une rangée pleine largeur (1 colonne) à la section et insérez un module de tableaux de tarification à l'intérieur de la rangée.



Dans les Paramètres des tables de tarification, sous l'onglet Contenu, cliquez sur + Ajouter un nouvel élément pour ajouter votre première table.




Options de contenu

Options de conception

Mettez à jour les paramètres de la table des prix comme suit :

Titre: Personnel

Monnaie: $

Par: an

Prix unitaire: 69

Texte du bouton: Inscription


Contenu:

Accès à tous les thèmes

Mises à jour du Thème Perpétuel

Support technique Premium

Accès à tous les plugins

Fichiers Photoshop laminés

Aucuns frais annuels

Bouton URL:[Entrer l'URL du bouton]. Antécédents: #ffffffff

Prix Texte Couleur: #3e51b5

Utilisez des styles personnalisés pour le bouton: OUI

Bouton Texte Couleur: #ffffff

Couleur d'arrière-plan du bouton: #3e51b5

Largeur de la bordure des boutons: 0px

Sauvegarder les paramètres

Sauvegarder les paramètres

Dupliquez maintenant la table de détermination du prix que vous venez de créer deux fois afin d'avoir un total de trois tables de détermination du prix.

Pour la table des prix du milieu, mettez à jour les options suivantes:

Onglet de contenu

Titre: Développeur Prix unitaire: 89

Contenu:

Accès à tous les thèmes

Mises à jour du Thème Perpétuel

Support technique Premium

Accès à tous les plugins

Fichiers Photoshop en couches

Aucuns frais annuels

Bouton URL:[Entrer l'URL du bouton].

Onglet Design

Prix Texte Couleur: #0091ca

Couleur d'arrière-plan du bouton: #0091ca

Pour le troisième tableau de détermination du prix, mettez à jour les paramètres comme suit:

Onglet de contenu

Titre: Durée de vie

Prix: 249

Texte du bouton: Inscription


Contenu:

Accès à tous les thèmes

Mises à jour du Thème Perpétuel

Support technique Premium

Accès à tous les plugins

Fichiers Photoshop en couches

Aucuns frais annuels

Bouton URL:[Entrer l'URL du bouton].


Sauvegarder les paramètres

Retournez maintenant aux Paramètres des tables de prix et mettez à jour ce qui suit :

Options de contenu

Options de conception

Couleur d'arrière-plan de l'en-tête du tableau: #0091ca

Couleur de la puce: #3e51b5

Couleur des puces de table en vedette: #0091ca


Sauvegarder les paramètres

Maintenant retournez à la section et éditez les paramètres de la section pour lui donner une couleur d'arrière-plan de #3e51b5.

Voilà, c'est ça.
Vous disposez maintenant d'un tableau de prix avec trois options avec l'option du milieu comme élément vedette qui se distingue des autres.

Tables de prix Options de contenu

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.

Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Ajouter un nouvel élément

Balise Show

Couleur d'arrière-plan du tableau en vedette

C'est ici que vous ajoutez de nouvelles tables de prix à votre module.

En cliquant sur "+ ajouter un nouvel article", vous ouvrez une toute nouvelle liste d'options de design spécifiques à ce tableau de prix.


Voir ci-dessous pour les paramètres individuels du tableau des prix.


Après avoir ajouté votre premier onglet, vous verrez apparaître une barre grise avec le titre de votre tableau de prix sous forme d'étiquette.

La barre grise comporte également trois boutons qui vous permettent d'éditer, de dupliquer ou de supprimer le tableau.

Par défaut, les postes des tables de détermination du prix sont affichés sous forme de listes à puces.

Si vous souhaitez supprimer les puces de la liste des caractéristiques, vous pouvez désactiver cette option.


Chaque tableau de prix peut être présenté.


Les tableaux en vedette sont surlignés dans la ligne, ce qui les distingue des autres options.

En utilisant ce paramètre, vous pouvez modifier la couleur d'arrière-plan pour les tables uniquement.


Couleur de fond de l'en-tête du tableau

Couleur d'arrière-plan de l'en-tête du tableau en vedette

Couleur de fond

Au-dessus de chaque tableau des prix se trouve une zone d'en-tête qui comprend le titre et le sous-titre de votre tableau.

Vous pouvez contrôler la couleur d'arrière-plan de cette zone indépendamment de la couleur d'arrière-plan du tableau principal en sélectionnant la couleur souhaitée dans le sélecteur de couleurs.

Chaque tableau de prix peut être présenté.

Les tableaux en vedette sont surlignés dans la ligne, ce qui les distingue des autres options.


Cette option vous permet de modifier la couleur d'arrière-plan de l'en-tête pour les tables uniquement.


Par défaut, les tables de prix ont une couleur de fond blanche.

Si vous souhaitez utiliser une couleur différente pour l'arrière-plan de votre tableau de prix, vous pouvez définir ici votre couleur personnalisée à l'aide du sélecteur de couleurs.


Étiquette Admin

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.


Options de conception des tableaux de prix

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.


Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.


Points de la liste centrale

Supprimer l'ombre portée du tableau en vedette

Points de la liste centrale

Couleur de la balle

Par défaut, les listes de caractéristiques sont alignées à gauche dans le tableau des prix.

Si vous souhaitez les aligner au centre, vous pouvez activer cette option.

Par défaut, les tables de prix ont une ombre subtile derrière chaque table.

Si vous souhaitez supprimer cette ombre, vous pouvez activer cette option.

Ici, vous pouvez choisir de centrer les éléments énumérés dans votre tableau.

Par défaut, les puces de la liste des tables de prix hériteront de la couleur d'accent de votre thème.

Si vous souhaitez utiliser une couleur différente, vous pouvez la définir ici à l'aide du sélecteur de couleurs.

Couleur des puces de table en vedette

Couleur du texte de l'en-tête du tableau en vedette

Police d'en-tête

Taille des polices d'en-tête

Si vous souhaitez utiliser une couleur différente pour les puces dans les tables de prix, vous pouvez définir cette couleur ici à l'aide du sélecteur de couleur.

Cette option contrôle la couleur de la couleur du texte d'en-tête de votre tableau.

Si vous modifiez la couleur d'arrière-plan de l'en-tête du tableau, vous pouvez également modifier cette option pour garantir la lisibilité.

Vous pouvez changer la police de votre texte d'en-tête en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte d'en-tête.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Couleur du texte d'en-tête

Espacement des lettres d'en-tête

Hauteur de la ligne d'en-tête

Couleur du texte du corps du tableau en vedette

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte d'en-tête, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte d'en-tête, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

La hauteur de ligne affecte l'espace entre chaque ligne de votre texte d'en-tête


Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Ceci change la couleur du corps du texte de votre tableau.


Si vous modifiez la couleur d'arrière-plan de votre tableau, vous devrez peut-être modifier cette option pour garantir la lisibilité.

Police de corps

Taille de police du corps

Couleur du corps du texte

Espacement des lettres du corps

Vous pouvez changer la police de votre corps de texte en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte corporel.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre corps de texte, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre corps de texte, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Hauteur de la ligne corporelle

Couleur du texte du sous-en-tête du tableau en vedette

Police de sous-en-tête

Taille de police du sous-en-tête

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Ceci modifie la couleur du texte du sous-en-tête de votre table.

Si vous modifiez la couleur d'arrière-plan de votre tableau, vous devrez peut-être modifier cette option pour garantir la lisibilité.

Vous pouvez changer la police du texte de votre sous-en-tête en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.


Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de sous-en-tête.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Couleur du texte du sous-en-tête

Espacement des lettres du sous-en-tête

Hauteur de la ligne d'en-tête

Devise et police de fréquence

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de sous-en-tête, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre dans le texte de votre sous-titre, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre devise et le texte de fréquence en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Taille de police de la devise et de la fréquence

Devise et fréquence Couleur du texte

Espacement des lettres de monnaie et de fréquence

Monnaie et fréquence Hauteur de ligne

Ici, vous pouvez ajuster la taille de votre devise et le texte de fréquence.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de devise et de fréquence, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte de devise et de fréquence, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Tableau en vedette Couleur du prix

Police de prix

Taille de la police de caractères

Prix Texte Couleur

Ceci change la couleur du prix de votre tableau. Si vous modifiez la couleur d'arrière-plan de votre tableau, vous devrez peut-être modifier cette option pour garantir la lisibilité.

Vous pouvez changer la police de votre texte de prix en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de prix.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de prix, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Espacement des lettres de prix

Hauteur de la ligne de prix

Utiliser la bordure

Couleur de la bordure

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre dans votre texte de prix, utilisez le curseur de gamme pour ajuster l'espace ou entrez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Activer cette option placera une bordure autour de votre module.

Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Cette option affecte la couleur de votre bordure.

Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

Largeur de bordure

Style de bordure

Utilisez des styles personnalisés pour les boutons

Taille du texte des boutons

Par défaut, les bordures ont une largeur de 1 pixel.

Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début.

Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

L'activation de cette option vous permettra de découvrir les différents paramètres de personnalisation des boutons que vous pouvez utiliser pour modifier l'apparence du bouton de votre module.

Ce réglage peut être utilisé pour augmenter ou diminuer la taille du texte dans le bouton. Le bouton s'ajuste au fur et à mesure que la taille du texte augmente ou diminue.

Couleur du texte des boutons

Couleur d'arrière-plan du bouton

Bouton Bordure Largeur de bordure

Couleur de la bordure du bouton

Par défaut, les boutons assument la couleur d'accent de votre thème telle que définie dans le Thème Customizer.

Cette option vous permet d'attribuer une couleur de texte personnalisée au bouton dans ce module.


Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur du bouton.

Par défaut, les boutons ont une couleur de fond transparente.


Ceci peut être modifié en sélectionnant la couleur de fond désirée dans le sélecteur de couleurs.

Tous les boutons Divi ont un bord de 2px par défaut.

Ce paramètre permet d'augmenter ou de diminuer la taille de cette bordure.

Les bordures peuvent être supprimées en entrant une valeur de 0.

Par défaut, les bordures de boutons assument la couleur d'accent du thème définie dans le Customizer Thème.

Cette option vous permet d'assigner une couleur de bordure personnalisée au bouton dans ce module.

Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur de bordure du bouton.

Bouton Border Radius Rayon de la bordure

Espacement des lettres des boutons

Police de bouton

Ajouter Bouton Bouton Icône

Le rayon de la bordure affecte l'arrondi des coins de vos boutons.


Par défaut, les boutons dans Divi ont un petit rayon de bordure qui arrondit les coins de 3 pixels.

Vous pouvez le diminuer à 0 pour créer un bouton carré ou l'augmenter significativement pour créer des boutons à bords circulaires.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre bouton, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police du texte de votre bouton en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Désactivé, ce paramètre supprimera les icônes de votre bouton.

Par défaut, tous les boutons Divi affichent une flèche en survolant.

Bouton Icône

Bouton Icône Couleur

Bouton Positionnement des icônes

Afficher uniquement l'icône sur le bouton de survol pour le bouton

Si les icônes sont activées, vous pouvez utiliser ce paramètre pour sélectionner l'icône à utiliser dans votre bouton.

Divi a plusieurs icônes à choisir.

Ajuster ce paramètre changera la couleur de l'icône qui apparaît dans votre bouton.

Par défaut, la couleur de l'icône est la même que celle du texte de vos boutons, mais ce para- mètre vous permet d'ajuster la couleur indépendamment.

Vous pouvez choisir d'afficher votre icône de bouton à gauche ou à droite de votre bouton.

Par défaut, les icônes de bouton ne sont affichées qu'en survolant.

Si vous souhaitez que l'icône apparaisse toujours, désactivez ce paramètre.

Bouton Hover Couleur du texte

Bouton Hover Couleur d'arrière-plan

Bouton Hover Border Couleur de la bordure

Bouton Hover Border Radius rayon

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.


La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.


La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.


La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée.


La valeur passe de la valeur de base définie dans les réglages précédents.

Espacement des lettres de survol des boutons

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée.


La valeur passe de la valeur de base définie dans les réglages précédents.

Tables de prix Options avancées

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.


CSS ID

Classe CSS

CSS personnalisé

Visibilité

Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu' à entrer des règles CSS séparées par des point-virgules.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Options de contenu des tables de prix individuelles

Intitulé

Sous-titre

Monnaie

Par

Le titre que vous insérez ici sera utilisé pour cette option de tarification (i. e. Premium).

Le sous-titre que vous insérez ici apparaîtra sous votre titre (i. e. Most Popular).

Entrez ici le symbole de la devise désirée.

Si votre tarification est basée sur l'abonnement, saisissez ici le cycle d'abonnement (ex.: Année).

Tarif

Bouton Texte

Contenu

URL du bouton

Entrez ici la valeur du produit.

Spécifiez le texte du bouton ici.

Ce champ vous permet d'entrer la liste des fonctionnalités qui viennent ou non avec votre produit.


Séparez chaque élément de la liste sur une nouvelle ligne et commencez chaque ligne par un symbole + ou -. A + spécifie une fonctionnalité incluse, alors que A- spécifie une fonctionnalité exclue.

Au bas de chaque tableau, vous pouvez insérer un bouton Appeler à l'action en insérant une URL Web valide dans ce champ.


Laissez ceci et le Bouton Texte Champ champ vide si vous ne souhaitez pas avoir de bouton dans votre tableau des prix.

Couleur de fond

Définissez une couleur d'arrière-plan personnalisée pour votre module, ou laissez vide pour utiliser la couleur par défaut.

Options de conception de tables de prix individuelles

Rendre cette table en vedette

Couleur de l'élément exclu

Police d'en-tête

Taille des polices d'en-tête

Choisissez d'afficher ou non ce tableau de prix dans ce menu déroulant. Doté d'un tableau des prix, il se démarquera parmi le reste.

Pour les éléments de votre liste qui ont été définis comme exclus à l'aide du symbole -, vous pouvez ajuster leur couleur à l'aide de ce paramètre.

Par exemple, vous pouvez changer la couleur en rouge ou réduire leur opacité pour indiquer visuellement que les éléments sont exclus du paquet courant.

Vous pouvez changer la police de votre texte d'en-tête en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte d'en-tête.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Couleur du texte d'en-tête

Espacement des lettres d'en-tête

Hauteur de la ligne d'en-tête

Police de corps

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte d'en-tête, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte d'en-tête, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

La hauteur de ligne affecte l'espace entre chaque ligne de votre texte d'en-tête.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre corps de texte en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.


Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Taille de police du corps

Couleur du corps du texte

Espacement des lettres du corps

Hauteur de la ligne corporelle

Ici, vous pouvez ajuster la taille de votre texte corporel.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre corps de texte, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre corps de texte, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Police de sous-en-tête

Taille de police du sous-en-tête

Couleur du texte du sous-en-tête

Espacement des lettres du sous-en-tête

Vous pouvez changer la police du texte de votre sous-en-tête en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.


Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de sous-en-tête.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.


Si vous souhaitez changer la couleur de votre texte de sous-en-tête, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre dans le texte de votre sous-titre, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Hauteur de la ligne d'en-tête

Devise et police de fréquence

Taille de police de la devise et de la fréquence

Devise et fréquence Couleur du texte

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre devise et le texte de fréquence en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre devise et le texte de fréquence.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de devise et de fréquence, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.

Espacement des lettres de monnaie et de fréquence

Monnaie et fréquence Hauteur de ligne

Police de prix

Taille de la police de caractères

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte de devise et de fréquence, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre texte de prix en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de prix.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Prix Texte Couleur

Espacement des lettres de prix

Hauteur de la ligne de prix

Utilisez des styles personnalisés pour les boutons

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de prix, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre dans votre texte de prix, utilisez le curseur de gamme pour ajuster l'espace ou entrez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

L'activation de cette option vous permettra de découvrir les différents paramètres de personnalisation des boutons que vous pouvez utiliser pour modifier l'apparence du bouton de votre module.

Taille du texte des boutons

Couleur du texte des boutons

Couleur d'arrière-plan du bouton

Bouton Bordure Largeur de bordure

Ce réglage peut être utilisé pour augmenter ou diminuer la taille du texte dans le bouton. Le bouton s'ajuste au fur et à mesure que la taille du texte augmente ou diminue.

Par défaut, les boutons assument la couleur d'accent de votre thème telle que définie dans le Thème Customizer.


Cette option vous permet d'attribuer une couleur de texte personnalisée au bouton dans ce module.

Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur du bouton.

Par défaut, les boutons ont une couleur de fond transparente.


Ceci peut être modifié en sélectionnant la couleur de fond désirée dans le sélecteur de couleurs.

Tous les boutons Divi ont un bord de 2px par défaut.

Ce paramètre permet d'augmenter ou de diminuer la taille de cette bordure.

Les bordures peuvent être supprimées en entrant une valeur de 0.

Couleur de la bordure du bouton

Bouton Border Radius Rayon de la bordure

Espacement des lettres des boutons

Police de bouton

Par défaut, les bordures de boutons assument la couleur d'accent du thème définie dans le Customizer Thème.


Cette option vous permet d'assigner une couleur de bordure personnalisée au bouton dans ce module. Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur de bordure du bouton.

Le rayon de la bordure affecte l'arrondi des coins de vos boutons.

Par défaut, les boutons dans Divi ont un petit rayon de bordure qui arrondit les coins de 3 pixels.

Vous pouvez le diminuer à 0 pour créer un bouton carré ou l'augmenter significativement pour créer des boutons à bords circulaires.

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre bouton, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police du texte de votre bouton en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.


Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ajouter Bouton Bouton Icône

Bouton Icône

Bouton Icône Couleur

Bouton Positionnement des icônes

Désactivé, ce paramètre supprimera les icônes de votre bouton.


Par défaut, tous les boutons Divi affichent une flèche en survolant.

Si les icônes sont activées, vous pouvez utiliser ce paramètre pour sélectionner l'icône à utiliser dans votre bouton.

Divi a plusieurs icônes à choisir.

Ajuster ce paramètre changera la couleur de l'icône qui apparaît dans votre bouton.


Par défaut, la couleur de l'icône est la même que celle du texte de vos boutons, mais ce paramètre vous permet d'ajuster la couleur indépendamment.

Vous pouvez choisir d'afficher votre icône de bouton à gauche ou à droite de votre bouton.

Afficher uniquement l'icône sur le bouton de survol pour le bouton

Bouton Hover Couleur du texte

Bouton Hover Couleur d'arrière-plan

Bouton Hover Border Couleur de la bordure

Par défaut, les icônes de bouton ne sont affichées qu'en survolant.

Si vous souhaitez que l'icône apparaisse toujours, désactivez ce paramètre.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.

La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.


La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.


La couleur passera de la couleur de base définie dans les paramètres précédents.

Bouton Hover Border Radius rayon

Espacement des lettres de survol des boutons

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée.


La valeur passe de la valeur de base définie dans les réglages précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée.


La valeur passe de la valeur de base définie dans les réglages précédents.

Tables de prix individuelles Options avancées

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

MERCI