Comment créer un calcul automatique des prix en utilisant Divi (en utilisant jquery)

Celui que tu fais. Ouvrez certains paramètres et changez la couleur de fond. Couleur de fond: \ # f8c5ac Séparateur inférieur ajoutez le séparateur inférieur dans la section suivante.
Styles de séparateurs: recherche dans les séparateurs Flip: listes verticales Ajouter un peu de remplissage en bas. Remplissage du Bas: 130 pixels Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Ajoutez le premier formulaire texte à la colonne et insérez un contenu H2 de votre choix. Paramètres de texte H2 passer à l’onglet conception et modifier les paramètres de texte en conséquence H2: titre 2 caractères: Montserrat titre 2 poids des caractères: demi – gras titre 2 alignement du texte: couleur du texte moyen titre 2: # 0f1c4d titre 2: taille du texte: 57 Px (bureau), 35 Px (tablette), 30 Px (téléphone) Titre 2 espacement des lettres: – 2px Ajouter un formulaire de texte 2 à la colonne ajouter du contenu ajoutez un autre formulaire de texte directement sous le formulaire de texte précédent et entrez une partie de votre sélection. Paramètres de texte passer à l’onglet conception et modifier les paramètres de texte en conséquence: police de texte: Montserrat alignement de texte: Centre de couleur de texte: # 0f1c4d taille du texte: 22 Px (bureau), 18 Px (tablette), 16 Px (téléphone) Le module séparateur suivant et le dernier module nécessaire pour ajouter un module séparateur à la colonne visibilité est le module séparateur. Assurez – vous que l’option afficher le séparateur est activée.
Afficher les séparateurs: Oui La ligne passe à l’onglet conception et change la couleur de la ligne en blanc. Couleur de ligne: # FFFFFF Le redimensionnement change également la largeur du séparateur. Largeur: 12% Ajoutez la couleur de fond de la section # 2 à la section suivante de votre conception! Ajouter une nouvelle section et changer la couleur de fond. Couleur
Couleur du texte titre 3: # f8c5ac titre 3 taille du texte: 40 Px (bureau), 25 Px (tablette), 18 Px (téléphone) Titre 3 espacement des lettres: – 1px titre 3 hauteur de ligne: 1,1em Ajouter un formulaire de texte 2 à la colonne 2 ajouter du contenu ajouter un autre formulaire de texte à la colonne 2 qui contient le contenu que vous avez sélectionné. Les paramètres de texte passent à l’onglet conception et changent les paramètres de texte. Police de texte: Montserrat text font Weight: ultralight text color: # f8c5ac text size: 23 Px (Desktop), 18 Px (tablette), 14 Px (mobile) text letter Spacing: – 1px text Line height: 1.1em Ajouter un formulaire texte à la colonne 3 ajouter un prix à la zone de contenu de la colonne 3! Ajoutez un formulaire texte et entrez le prix dans la zone de contenu. Paramètres de texte passer à l’onglet conception et modifier les paramètres de texte en conséquence: police de texte: Montserrat poids de la police de texte: réalignement du texte: couleur centrale du texte: # FFFFFF taille du texte: 40 Px (bureau), 25 Px (tablette), 18 Px (téléphone) L’id et la classe CSS passent à l’onglet avancé et ajoutent l’ID et la classe CSS. CSS id: Price – 1 CSS Class: Price hide First Après avoir cloné la ligne et tous ses modules autant de fois que nécessaire, vous pouvez cloner la ligne autant de fois que nécessaire. Modifier l’ID CSS dupliqué du module Blurb modifier l’ID CSS de chaque nouveau module Blurb en conséquence: module Blurb 1: prix – Objet – clic – 1 module Blurb 2: prix – Objet – clic – 2 module Blurb 3: prix – Objet – clic – 3… Pour modifier le prix d’un formulaire de texte en double, l’ID CSS fait de même pour le formulaire de texte de prix dans la troisième colonne de chaque ligne. Prix 1: prix 1: prix 2: prix 2: prix 3: prix 3… Ajouter une nouvelle structure de colonne de ligne
Les structures de colonnes suivantes: Redimensionnez sans ajouter de module, ouvrez les paramètres de ligne et changez la largeur sur un écran plus petit. Largeur: 80% (bureau), 90% (tablette et téléphone) Écran pour s’assurer que toutes les colonnes sont affichées côte à côte sur des écrans plus petits, nous ajouterons également une ligne de code CSS à l’élément principal de la ligne. Affichage: Flex; Ajouter un module de code à la colonne 1 insérer un code CSS continuer en ajoutant un module de code à la première colonne de la ligne et en entrant la ligne de code CSS suivante:
– Oui. Le prix est caché en premier {
Affichage: aucun;
}
– Oui. Activation de l’élément de prix. Icône et pb
Couleur: noir! Important
} Ajoutez un formulaire texte à la colonne 2 Ajoutez le commutateur de contenu à la colonne 2 et ajoutez un nouveau formulaire texte qui contient quelque chose de votre choix. Paramètres du texte modifier les paramètres du texte en conséquence: police de texte: Montserrat poids de la police de texte: ultra léger couleur du texte: # f8c5ac taille du texte: 23 Px (bureau), 18 Px (tablette), 14 Px (téléphone mobile) espacement des lettres du texte: – 1px hauteur de la ligne de texte: 1,1em Ajoutez un formulaire de texte vide à la colonne 3 et laissez la zone de contenu vide à la colonne suivante et à la dernière colonne. Ajoutez un formulaire de texte et assurez – vous que la zone de contenu reste vide. Paramètres de texte passez à l’onglet conception et modifiez les paramètres de texte comme suit: police de texte: poids de la police de texte de Montserrat: alignement du texte lourd: couleur centrale du texte: # FFFFFF taille du texte: 40 Px (bureau), 25 Px (tablette), 18 Px (téléphone) L’id CSS complète la configuration du formulaire en ajoutant l’ID CSS. CSS id: Total Price Cal Ajouter jquery à l’option Divi Topic aller à l’onglet intégration maintenant que nous avons terminé la conception, il est temps d’utiliser le Code jquery pour faire fonctionner la fonctionnalité. Si vous souhaitez ajouter
Réinitialisez le calcul du prix sur une seule page, vous pouvez entrer le code dans le formulaire de code. Cependant, si vous l’utilisez sur plusieurs pages, allez aux options de thème de partition et sélectionnez l’onglet intégration. Ajoutez le Code jquery à la balise Head et saisissez la ligne de code jquery suivante entre les balises de script: jquery (fonction ($)
$(‘[ID * = \
Sélecteur de variables = $(ceci). Propriété (\
Variable $Price = $(\
Var total = 0;
$prix. Basculer ();
$prix. Toggleclass (\
$(this). Toggleclass (\
$(\
Sum + = parsefloat ($(this). Texte (). Remplacer (\/ \ \ D \/ G,);
});
Si (Somme > 0) {
$(\
$(\
}
Ministère de l & apos; éducation
$(\
}
});
}); Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment utiliser Divi pour créer un design de calcul de prix étonnant. C’est une excellente façon de montrer aux visiteurs le prix de départ de votre service et de vous aider à attirer le bon public. Vous pouvez utiliser cette méthode dans n’importe quel article de prix que vous créez pour le prochain projet Divi! Si vous avez des questions ou des suggestions, assurez – vous de laisser vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.