fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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 …

        Créer un pop-up sur un site Divi

        Créer un pop-up sur un site Divi

        Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

        lire plus
        Formation WordPress éligible au CPF : Webmyday

        Formation WordPress éligible au CPF : Webmyday

        Vous souhaitez créer un site Internet WordPress pour votre entreprise ? Vous êtes complètement débutant ? Dans ce tutoriel vidéo, je vous présente Webmyday la formation WordPress Divi qui va vous permettre de réaliser facilement votre site web en étant accompagné d’un coach sympa pendant 2 mois. 😊

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