skip to Main Content

Comment créer une table de calcul sur Divi avec jQuery

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Certaines personnes hésitent à afficher les prix de leurs services sur leur site Web. Mais autant que cela puisse effrayer certains visiteurs, cela montre aussi confiance et expertise. La transparence de vos prix vous permet d’attirer les bons clients avec un budget sur lequel vous pouvez travailler. Dans le tutoriel d’aujourd’hui, nous allons vous montrer comment créer un design de calcul de prix époustouflant que vous pourrez utiliser pour votre prochain projet Divi. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le résultat obtenu sur différentes tailles d’écran.

Commençons à recréer !

Ajouter la section n ° 1

Couleur de l’arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de section et modifiez la couleur d’arrière-plan.

  • Couleur de fond: # f8c5ac

Diviseur inférieur

Ajoutez un séparateur inférieur à la section suivante.

  • Style de séparation: Rechercher dans la liste
  • Diviseur Flip: Vertical

Espacement

Ajoutez également un peu de rembourrage en bas.

  • Rembourrage Du Fond: 130px

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante:

Ajouter le module de texte n ° 1 à la colonne

Ajouter du contenu H2

Ajoutez le premier module de texte à votre colonne et insérez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l’onglet Conception et modifiez les paramètres de texte H2 en conséquence:

  • Rubrique 2 Police: Montserrat
  • Titre 2 Police: Semi Gras
  • Titre 2 Alignement du texte: centre
  • Titre 2 Couleur du texte: # 0f1c4d
  • Titre 2 Taille du texte: 57 pixels (bureau), 35 pixels (tablette), 30 pixels (téléphone)
  • Titre 2 Espacement des lettres: -2px

Ajouter le module de texte n ° 2 à la colonne

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du précédent et insérez le contenu de votre choix.

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte en conséquence:

  • Police de texte: Montserrat
  • Alignement du texte: centre
  • Couleur du texte: #0f1c4d
  • Taille du texte: 22px (bureau), 18px (tablette), 16px (téléphone)

Ajouter un module de division à la colonne

Visibilité

Le prochain et dernier module nécessaire dans cette colonne est un module de division. Assurez-vous que l’option « Afficher le séparateur » est activée.

  • Montrer le diviseur: Oui

Ligne

Passez à l’onglet Création et changez la couleur du trait en blanc.

  • Couleur de trait: #ffffff

Dimensionnement

Modifiez également la largeur du diviseur.

  • Largeur: 12%

Ajouter la section n ° 2

Couleur de l’arrière plan

Passons à la suite du dessin! Ajouter une nouvelle section et changer la couleur de fond.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Couleur de fond: #0f1c4d

Espacement

Ajoutez ensuite un peu de rembourrage personnalisé en haut et en bas.

  • Top rembourrage: 70px
  • Rembourrage Du Fond: 130px

Ajouter la rangée 1

Structure de colonne

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonne suivante:

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la largeur sur des tailles d’écran plus petites.

  • Largeur: 80% (bureau), 90% (tablette et téléphone)

Espacement

Ajouter un peu de remplissage en bas personnalisé suivant.

  • Rembourrage en bas: 70px (bureau), 20px (tablette), 0px (téléphone)

Frontière

Ajoutez également une bordure inférieure à la ligne.

  • Largeur de la bordure inférieure: 1px
  • Couleur de bordure inférieure: #ffffff

Afficher

Enfin, pour vous assurer que toutes les colonnes sont affichées les unes à côté des autres, nous allons ajouter une ligne de code CSS à l’élément principal de la ligne.

display: flex;

Ajouter le module Blurb à la colonne 1

Sélectionnez l’icône

Il est temps de commencer à ajouter des modules ! Ajoutez un module Blurb à la colonne 1 et sélectionnez l’icône de votre choix.

Paramètres d’icône par défaut

Passez à l’onglet Conception et modifiez les paramètres de l’icône en conséquence:

  • Couleur de l’icône: # f7f7f7
  • Icône de cercle: oui
  • Icône de cercle: # f8c5ac
  • Positionnement des icônes: Top
  • Utiliser la taille de la police d’icône: Oui
  • Icon Font Size: 96px (Desktop), 20px (Tablet & Phone)

Survolez les paramètres de l’icône

Modifiez la couleur de l’icône en survol.

  • Couleur de l’icône: #000000

Identifiant CSS

Insérez également un identifiant CSS.

  • Identifiant CSS: price-item-click-1

Ajouter le module de texte n ° 1 à la colonne 2

Ajouter du contenu H3

Sur la deuxième colonne ! Ajoutez le premier module de texte et insérez du contenu H3.

Paramètres de texte H3

Passez à l’onglet Conception et modifiez les paramètres de texte H3 en conséquence:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Rubrique 3 Police: Montserrat
  • Titre 3 Polices: Semi Gras
  • Titre 3 Couleur du texte: # f8c5ac
  • Titre 3 Taille du texte: 40 pixels (bureau), 25 pixels (tablette), 18 pixels (téléphone)
  • Titre Espacement des lettres 3: -1px
  • Titre 3 Hauteur de trait: 1.1em

Ajouter le module de texte n ° 2 à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte à la colonne 2 avec le contenu de votre choix.

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte.

  • Police de texte: Montserrat
  • Poids de la police du texte: Ultra léger
  • Couleur du texte: #f8c5ac
  • Taille du texte: 23px (bureau), 18px (tablette), 14px (téléphone)
  • Espacement des lettres: -1px
  • Hauteur de la ligne de texte: 1.1em

Ajouter un module de texte à la colonne 3

Ajouter un prix au contenu

Passons à la troisième colonne ! Ajoutez un module de texte et placez le prix dans la zone de contenu.

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte en conséquence:

  • Police de texte: Montserrat
  • Poids de la police du texte: Lourd
  • Alignement du texte: centre
  • Couleur du texte: #ffffff
  • Taille du texte: 40px (bureau), 25px (tablette), 18px (téléphone)

calculs de prix

Identifiant et classe CSS

Passez à l’onglet avancé et ajoutez un ID CSS et une classe CSS.

  • Identifiant CSS: price-1
  • Classe CSS: price-hide-first

Dupliquer la ligne autant de fois que necessaire

Une fois que vous avez terminé la ligne et tous les modules qu’elle contient, vous pouvez la dupliquer autant de fois que vous le souhaitez.

Modifier les ID CSS de module Blurb en double

Modifiez l’ID CSS de chaque nouveau module Blurb en conséquence:

  • Module Blurb 1: price-item-click-1
  • Blurb Module 2: price-item-click-2
  • Blurb Module 3: price-item-click-3

Modifier le prix du module de texte en double et les identifiants CSS

Faites la même chose pour le module de texte price dans la troisième colonne de chaque ligne.

  • Prix ​​1: prix-1
  • Prix ​​2: prix-2
  • Prix ​​3: prix-3

Ajouter une nouvelle ligne

Structure de colonne

Ajoutez une autre ligne à votre section en utilisant la structure de colonne suivante:

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la largeur sur des tailles d’écran plus petites.

  • Largeur: 80% (bureau), 90% (tablette et téléphone)

Afficher

Pour vous assurer que toutes les colonnes apparaissent côte à côte sur des tailles d’écran plus petites, nous allons également ajouter une seule ligne de code CSS à l’élément principal de la ligne.

display: flex;

Ajouter un module de code à la colonne 1

Insérer du code CSS

Continuez en ajoutant un module de code à la première colonne de la ligne et en insérant les lignes suivantes de code CSS:

<style>
.price-hide-first {
display: none;
}


.price-item-active .et-pb-icon {
color: black !important;
}
</style>

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Passez à la deuxième colonne et ajoutez un nouveau module de texte avec le contenu de votre choix.

Paramètres du texte

Modifiez les paramètres de texte en conséquence:

  • Police de texte: Montserrat
  • Poids de la police du texte: Ultra léger
  • Couleur du texte: # f8c5ac
  • Taille du texte: 23px (bureau), 18px (tablette), 14px (téléphone)
  • Espacement des lettres: -1px
  • Hauteur de la ligne de texte: 1.1em

Ajouter un module de texte vide à la colonne 3

Laisser le contenu vide

Passons à la dernière colonne. Ajoutez un module de texte et assurez-vous que la zone de contenu reste vide.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte comme suit:

  • Police de texte: Montserrat
  • Poids de la police du texte: Lourd
  • Alignement du texte: centre
  • Couleur du texte: #ffffff
  • Taille du texte: 40px (bureau), 25px (tablette), 18px (téléphone)

Identifiant CSS

Complétez les paramètres du module en ajoutant un identifiant CSS.

  • Identifiant CSS: total-price-cal

Ajouter des options de thème JQuery à Divi

Aller à l’onglet d’intégration

Maintenant que la conception est terminée, il est temps de faire en sorte que ça fonctionne avec du code JQuery. Si vous souhaitez ajouter les calculs de prix sur une seule page, vous pouvez placer le code dans un module de code. Toutefois, si vous l’utilisez sur plusieurs pages, accédez à l’option Thème Divi et sélectionnez l’onglet Intégration.

Ajouter du code JQuery aux balises Head

Insérez les lignes suivantes du code JQuery entre les balises de script et vous avez terminé:

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

Aperçu

Maintenant que toutes les étapes sont franchies, jetons un dernier regard sur le résultat obtenu avec différentes tailles d’écran.

Dernières pensées

Dans cet article, nous vous avons montré comment créer un modèle de calcul de prix exceptionnel avec Divi. C’est un excellent moyen de montrer à vos visiteurs à quel prix démarrent vos services et d’attirer le bon public. Vous pouvez utiliser cette approche pour tout calcul de prix que vous créez pour votre prochain projet Divi ! Si vous avez des questions ou des suggestions, veillez à laisser un commentaire dans la section des commentaires ci-dessous.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer