Présentez vos offres de manière engageante
Dans ce tutoriel Divi WordPress, je vous présente le module tableau des tarifs du Divi Visual Builder, module qui vous permet de présenter de manière engageante différentes offres en les détaillant et en proposant au bas de chaque tableau un bouton d’appel à l’action. Dans ce tutoriel, je travaille avec le thème Divi d’Elegant Thème et son excellent Visual Builder qui permet de créer facilement et visuellement les pages d’un site web WordPress.
Module tableau des tarifs, ajout du contenu
Dans le tutoriel, j’ajoute une section normale avec une rangée à 1 colonne et j’appelle le module « Tableau des tarifs ».
Chaque colonne du tableau est configurable séparément. Pour configurer par exemple la première colonne, cliquer sur l’engrenage du premier élément (voir image). Entrer le contenu du premier élément (première colonne).
Titre | Sous-Titre | Fréquence (si un texte est entré la fréquence apparaît juste à droite à la base du prix précédée d’un / exemple 40€/mois).
⚠️ Pour que le texte du bouton apparaisse, il faut d’abord entrer dans « Lien » l’URL du bouton.
Dans « Corps » entrer les différentes prestation / options de votre offre. A chaque retour à ligne, un puce est automatiquement placée.
Problème du symbole € monétaire à gauche du tarif
Aux Etats-Unis lorsque prix est inscrit, le symbole monétaire est placé avant (exemple : $30) alors que chez nous en Europe nous le plaçons après (exemple : 30€).
A l’heure où j’écris ces lignes, il n’y a pas d’option dans ce module qui permette de changer directement le symbole monétaire de côté. Nous devons donc utiliser un peu de code CSS pour ajouter de la marge afin de déplacer le symbole € vers la droite.
1 – Dans Advancé > ID et classes CSS > Classe CSS puis tapez custom-module
2 – Dans menu WordPress, marge de gauche Divi -> Options du Thème -> Général -> Personnaliser CSS
.custom-module .et_pb_dollar_sign {
margin-left: 95px !important;
}
Si nécessaire vous pouvez modifier la valeur 95px et augmenter pour déplacer le € plus vers la droite. Pour des tarifs à 3 chiffres utiliser comme valeur 145px.
Mise en style du module
Ensuite réaliser la mise en style via l’onglet Style. Le plus simple est de cliquer sur chaque petit pinceau du tableau pour être conduit directement à la partie style de l’élément choisi.
⚠️ Si vous voulez modifier la couleur de fond du module, vous pourrez le faire dans l’onglet « Contenu » dans « Fond ».
Une fois que votre mise en Style de la première colonne est terminée, vous pouvez cloner cette colonne afin de gagner du temps et ne pas refaire la mise en Style mais simplement modifier le contenu.
Pour cloner la colonne cliquez sur l’icône (2 petits rectangles de l’élément)
Pour mettre en avant une colonne de manière à ce qu’elle se démarque bien des autres offres, vous pouvez activer l’option « Faire cette table vedette ». Cette option réhausse la colonne en ajoutant un léger effet d’ombre.
Cette option se trouve dans l’onglet « Style » des paramètre de l’élément colonne.
Pour accentuer cette mise en avant, il est possible de modifier la couleur de fond de l’entête de la colonne (toujours dans l’onglet « Style »).
