Comment styliser une belle table de prix dans Divi
Publié: 2018-12-28Les tableaux de prix sont souvent le CTA principal d'une page. C'est pourquoi il est important de les coiffer correctement. Avec Divi, vous pouvez prendre plusieurs tours et créer des tableaux de prix exactement comme vous les imaginez. Pour vous donner matière à réflexion, nous avons créé un superbe tableau de prix que vous pouvez utiliser pour tout type de site Web sur lequel vous travaillez. Nous vous guiderons dans la création du résultat de A à Z en utilisant uniquement les options intégrées de Divi.
Allons-y !
Aperçu
Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.
Bureau
Mobile
Téléchargez les images GRATUITEMENT
Pour mettre la main sur les images qui sont utilisées dans ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Comment styliser une belle table de prix dans Divi
Abonnez-vous à notre chaîne Youtube
Commençons à créer !
Ajouter une nouvelle section
Fond dégradé
Créez une nouvelle page et ajoutez une section régulière en utilisant l'arrière-plan dégradé suivant :
- Couleur 1 : #ffffff
- Couleur 2: #353272
- Position de départ : 50 %
- Position finale : 50 %
Espacement
Ensuite, accédez aux paramètres d'espacement de la section et modifiez les valeurs de marge et de remplissage personnalisées.
- Marge inférieure : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
- Marge de gauche : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
- Marge de droite : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter une nouvelle ligne
Structure des colonnes
Une fois que vous avez terminé de modifier les paramètres de la section, vous pouvez continuer et ajouter une nouvelle ligne en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l'onglet de conception.
- Faire cette ligne en pleine largeur : Oui
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de gouttière : 1
Espacement
Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs de remplissage personnalisées.
- Rembourrage supérieur : 94 px
- Rembourrage inférieur : 177px
- Rembourrage gauche : 150 px (ordinateur de bureau), 30 px (tablette et téléphone)
- Rembourrage droit : 150 px (ordinateur de bureau), 30 px (tablette et téléphone)
- Remplissage gauche des colonnes 1, 2 et 3 : 10px
- Remplissage des colonnes 1, 2 et 3 à droite : 10 px
Ajouter le module de texte n° 1 à la colonne 1
Ajouter du contenu
Il est temps de commencer à ajouter des modules ! Nous personnalisons le tableau des prix que nous voulons créer en utilisant divers modules. Le premier module dont nous aurons besoin est un module de texte. Ajoutez le nom du premier type d'adhésion dans la zone de contenu.
Couleur de l'arrière plan
Une fois que vous avez ajouté le contenu, accédez aux paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan blanche.
- Couleur d'arrière-plan : #ffffff
Image de fond
Passez à l'onglet image d'arrière-plan et téléchargez le fichier ' divi-beautiful-pricing-table-background-pattern-1.png ' que vous pouvez trouver dans le dossier de téléchargement qui a été partagé au début de cet article.
- Taille de l'image d'arrière-plan : couverture
- Position de l'image d'arrière-plan : en haut au centre
- Répétition de l'image d'arrière-plan : aucune répétition
Paramètres de texte
Modifiez ensuite les paramètres de texte.
- Poids de la police de texte : ultra gras
- Couleur du texte : #ffffff
- Taille du texte : 80px
- Espacement des lettres du texte : -3px
- Hauteur de la ligne de texte : 1 em
Espacement
Et ajoutez des valeurs de marge et de remplissage personnalisées.
- Marge supérieure : 5vw (ordinateur de bureau), 0vw (tablette et téléphone)
- Rembourrage supérieur : 20 px
- Rembourrage inférieur : 200px
Frontière
Continuez en ajoutant « 20px » dans les coins supérieurs gauche et droit.
Boîte ombre
Pour couronner le tout, donnez au module de texte une ombre de boîte subtile.
- Position verticale de l'ombre de la boîte : -20px
- Force du flou d'ombre de la boîte: 80px
- Force de propagation de l'ombre de la boîte: -10px
- Couleur de l'ombre : rgba(0,0,0,0.15)
Ajouter un module de bouton à la colonne 1
Ajouter une copie
Le deuxième module dont nous aurons besoin dans la colonne 1 est un module de bouton. Ajoutez une copie de votre choix.
Alignement des boutons
Ensuite, accédez aux paramètres d'alignement et modifiez l'alignement au centre.
- Alignement des boutons : Centre
Paramètres des boutons
Nous allons continuer en apportant quelques modifications à l'apparence du bouton dans les paramètres du bouton.
- Utiliser des styles personnalisés pour le bouton : Oui
- Couleur du texte du bouton : #ffffff
- Couleur 1 : #6932ff
- Couleur 2: #30acf4
- Direction du gradient : 100 degrés
- Largeur de la bordure du bouton : 0px
- Espacement des lettres des boutons : -2px
- Poids de la police : Ultra gras
Espacement
Ensuite, ajoutez un peu de rembourrage au bouton pour le rendre joli et appliquez une marge supérieure négative pour créer un chevauchement avec le module précédent dans la colonne.
- Marge supérieure : -54 px
- Rembourrage supérieur : 10px
- Rembourrage inférieur : 10px
- Rembourrage gauche : 30 px
- Rembourrage droit : 30 px
Boîte ombre
Enfin, ajoutez une subtile ombre de boîte.
- Force du flou d'ombre de la boîte: 80px
- Force de propagation de l'ombre de la boîte : -14px
- Couleur de l'ombre : rgba(0,0,0,0.3)
Ajouter le module de texte n° 2 à la colonne 1
Ajouter du contenu
Le prochain module dont nous aurons besoin est un autre module de texte avec le prix du type d'adhésion.
Couleur de l'arrière plan
Une fois que vous avez ajouté le prix, allez dans les paramètres d'arrière-plan et appliquez une couleur d'arrière-plan blanche.
- Couleur d'arrière-plan : #ffffff
Paramètres de texte
Modifiez ensuite les paramètres de texte.
- Poids de la police de texte : ultra gras
- Couleur du texte : rgba(0,0,0,0,05)
- Taille du texte : 120px
- Hauteur de la ligne de texte : 1 em
Espacement
Et appliquez des valeurs de remplissage personnalisées dans les paramètres d'espacement.
- Rembourrage supérieur : 100 pixels
- Rembourrage inférieur : 100px
- Remplissage gauche : 80px
Frontière
Ensuite, accédez aux paramètres de bordure et ajoutez « 30px » dans les coins inférieurs gauche et droit.
Boîte ombre
Enfin, donnez au module une ombre de boîte.
- Position horizontale de l'ombre de la boîte : 0px
- Position verticale de l'ombre de la boîte : 2px
- Force du flou d'ombre de la boîte: 80px
- Force de propagation de l'ombre de la boîte : 0px
- Couleur de l'ombre : rgba(0,0,0,0.21)
Ajouter le module de texte n° 3 à la colonne 1
Ajouter du contenu
Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un autre module de texte. Ajoutez le prix du type d'adhésion à la zone de contenu.
Paramètres de texte
Modifiez ensuite les paramètres de texte.
- Poids de la police de texte : ultra gras
- Couleur du texte : #000000
- Taille du texte : 50px
- Hauteur de la ligne de texte : 1 em
Espacement
Et créez un chevauchement entre ce module et le précédent en jouant avec les valeurs d'espacement personnalisées.
- Marge supérieure : -180px
- Marge inférieure : 180 px (tablette et téléphone)
- Remplissage gauche : 100 px
Cloner tous les modules de la colonne 1 deux fois et placer les doublons dans les colonnes restantes
Une fois que vous avez terminé de modifier les modules de la colonne 1, vous pouvez continuer et cloner chacun des modules deux fois et placer les doublons dans les deux colonnes restantes.
Modifier le contenu des modules dans la colonne
Modifiez le contenu des doublons en fonction des deux autres types d'adhésion que vous partagez sur votre site Web.
Modifier le tableau des prix dans la colonne 2
Changer l'image d'arrière-plan du module de texte #1
Nous mettons également en évidence le tableau des prix du milieu. Ouvrez le premier module de texte dans la colonne 2 et changez l'image d'arrière-plan dans le fichier ' divi-beautiful-pricing-table-background-pattern-2.png ' que vous pouvez trouver dans le dossier de téléchargement.
Supprimer la marge supérieure du module de texte #1
Pour souligner ce type d'adhésion, nous allons supprimer la marge supérieure du premier module de texte dans les paramètres d'espacement.
Changer l'arrière-plan du dégradé du bouton
Nous allons également faire correspondre la nouvelle image d'arrière-plan en utilisant un autre arrière-plan dégradé pour le module de boutons.
- Couleur 1 : #fb32ff
- Couleur 2: #ff304f
- Direction du gradient : 100 degrés
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.
Bureau
Mobile
Dernières pensées
Dans cet article, nous vous avons montré comment styliser un beau tableau de prix pour votre prochain projet Divi. Nous vous avons guidé pas à pas tout au long du didacticiel et avons obtenu un résultat époustouflant en utilisant uniquement les options intégrées de Divi ! Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.