fbpx

Tutoriel Divi WordPress : Module tableau des tarifs

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.

Licence Divi
Code Promo Divi Supreme
.

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.

    Module tableau des tarifs
    Contenu du module tableau des tarifs

    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.

      Fonction Divi visibilité
      CSS
      Thinkific one month free

      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)

        Dupliquer colonne

        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 »).

        hébergeur web Hostinger
        Mise en style
        Mise en avant de l'offre
        Résultat final
         LearnDash créer une formation sur un site WordPress
        Presto Player lecteur vidéo WordPress

        Vous serez peut-être également intéressé par ces articles …

        Tutoriel Divi : Inverser les colonnes selon la vue

        Tutoriel Divi : Inverser les colonnes selon la vue

        En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
        On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

        lire plus
        10 extensions Chrome pour améliorer la productivité

        10 extensions Chrome pour améliorer la productivité

        Dans cette vidéo, je vous présente 10 extensions pour le navigateur Chrome afin d’améliorer votre confort, votre rapidité et donc votre productivité lorsque vous surfez sur Internet. Il existe ne nombreuses extensions Chrome, et il peut être difficile de trouver celles qui vont réellement améliorer votre productivité.

        lire plus
        Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

        Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

        Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

        lire plus
        Offrez-moi un café! Merci :)