Téléchargez GRATUITEMENT une conception de basculement des prix mensuels/annuels pour Divi

Lorsque vous décidez de présenter des plans tarifaires sur votre site Web, il existe plusieurs façons de l'aborder. L'une des approches les plus populaires consiste à créer une bascule de tarification mensuelle/annuelle qui permet aux utilisateurs de naviguer facilement à travers les différents plans tarifaires en fonction de la façon dont ils choisissent de facturer. Dans le tutoriel d'aujourd'hui, nous allons vous montrer comment faire fonctionner la bascule de tarification avec Divi. Nous allons recréer un exemple époustouflant à partir de zéro et vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la conception de basculement des prix mensuels/annuels

Pour mettre la main sur la conception gratuite de la bascule de tarification mensuelle/annuelle, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Ajouter la section #1

Couleur de l'arrière plan

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

• Couleur d'arrière-plan : #ffad72

Diviseur inférieur

Passez à l'onglet Conception et insérez ensuite un séparateur inférieur.

• Style de séparation : rechercher dans la liste
• Hauteur du diviseur : 10vw

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 5vw
• Rembourrage inférieur : 10vw

Identifiant CSS

Et ajoutez un identifiant CSS à la section.

• ID CSS : basculer la section

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 30 vw (ordinateur de bureau), 45 vw (tablette), 50 vw (téléphone)
• Largeur maximale : 100 %

Espacement

Débarrassez-vous ensuite du rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Et modifiez également les paramètres de bordure.

• Coins arrondis : 50vw (tous les coins)
• Largeur de la bordure : 1px
• Couleur de la bordure : #e8e8e8

Affichage

Pour nous assurer que les deux colonnes apparaissent côte à côte sur des écrans plus petits, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Le seul module dont nous avons besoin dans la colonne 1 est un module de texte. Entrez un contenu de votre choix.

Paramètres de texte

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

• Police du texte : Montserrat
• Taille du texte : 1vw (ordinateur de bureau), 1.5vw (tablette), 2vw (téléphone)
• Alignement du texte : Centre
• Couleur du texte : clair

Espacement

Modifiez également les valeurs de remplissage supérieur et inférieur sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

ID CSS et classe

Et attribuez un ID CSS et une classe au module de texte.

• ID CSS : pricing-plan-item-1
• Classe CSS : pricing-item-cursor

Cloner le module de texte et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module de texte dans la colonne 1, vous pouvez le cloner une fois et placer le doublon dans la colonne 2.

Modifier le contenu

Assurez-vous de modifier le contenu.

Modifier l'identifiant CSS

Et utilisez un autre identifiant CSS.

• Identifiant CSS : pricing-plan-item-2

Ajouter la section #2

Couleur de l'arrière plan

Passons à la deuxième section. Ajoutez la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan : #6b63dd

Espacement

Ensuite, accédez aux paramètres d'espacement des sections et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 7vw
• Rembourrage inférieur : 15vw
• Rembourrage gauche : 21vw (ordinateur de bureau), 10vw (tablette et téléphone)
• Rembourrage droit : 21vw (ordinateur de bureau), 10vw (tablette et téléphone)

Identifiant CSS

Ajoutez également un identifiant CSS à la section.

• Identifiant CSS : pricing-1

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Ensuite, accédez aux paramètres d'espacement et appliquez les paramètres de bordure suivants :

• Largeur de la bordure droite : 1px
• Largeur de la bordure gauche : 1px
• Largeur de la bordure supérieure : 0px
• Largeur de la bordure inférieure : 0px
• Couleur de la bordure : rgba(255,255,255,0)

Affichage

Assurez-vous que les colonnes apparaissent côte à côte sur des écrans plus petits en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Paramètres de la colonne 2

Espacement

Une fois que vous avez terminé les paramètres généraux de la ligne, ouvrez les paramètres de la colonne 2 et ajoutez des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 4vw

Frontière

Utilisez également une bordure sur la colonne 2.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #ffffff

Paramètres de la colonne 3

Espacement

Passez aux paramètres de la troisième colonne et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 4vw

Ajouter un diviseur à la colonne 1

Visibilité

Il est temps de commencer à ajouter des modules ! Le premier module et le seul module dont nous avons besoin dans la colonne 1 est un module diviseur. Assurez-vous de désactiver l'option « Afficher le diviseur ». Nous n'avons besoin de ce module que pour nous assurer que le reste de la conception reste intact.

• Afficher le diviseur : Non

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

Ajouter du contenu H3

Passez à la colonne 2 et ajoutez un module de texte avec du contenu H3 de votre choix.

Paramètres de texte H3

Modifiez les paramètres de texte H3 comme suit :

• Police de la rubrique 3 : Montserrat
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 2vw (ordinateur de bureau), 3vw (tablette), 3.5vw (téléphone)
• En-tête 3 Espacement des lettres : -1px

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

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 de texte

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

• Police du texte : Montserrat
• Poids de la police de texte : ultra léger
• Couleur du texte : #ffffff
• Taille du texte : 2vw (ordinateur de bureau), 3vw (tablette), 3.5vw (téléphone)
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : Centre

Espacement

Ajoutez également une marge supérieure personnalisée.

• Marge supérieure : 0.5vw

Cloner les deux modules et placer les doublons dans la colonne 3

Une fois que vous avez terminé les modules de la colonne 2, vous pouvez les cloner tous les deux et placer les doublons dans la colonne 3.

Modifier le contenu

Assurez-vous de modifier le contenu de chaque doublon.

Ajouter la ligne n° 2

Structure des colonnes

Passons à la deuxième rangée de la section 2 ! Choisissez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Et appliquez une bordure.

• Largeur de la bordure supérieure : 0px
• Largeur de la bordure droite : 1px
• Largeur de la bordure inférieure : 1px
• Largeur de la bordure gauche : 1px
• Couleur de la bordure : #8882dd

Affichage

Assurez-vous que les colonnes apparaissent côte à côte sur des écrans plus petits en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Paramètres de la colonne 1

Espacement

Continuez en ouvrant les paramètres de la colonne 1 et appliquez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)

Frontière

Ajoutez également une bordure droite à la colonne.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #8882dd

Paramètres de la colonne 2

Espacement

Passez à la deuxième colonne et modifiez les paramètres d'espacement.

• Rembourrage supérieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)

Frontière

Ajoutez ensuite une bordure droite.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #ffffff

Paramètres de la colonne 3

Espacement

Ensuite, ouvrez les paramètres de la colonne 3 et ajoutez des valeurs de remplissage haut et bas personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Une fois que vous avez terminé les paramètres de ligne et de colonne, il est temps de commencer à ajouter des modules. Ajoutez un module de texte à la colonne 1 et insérez du contenu de votre choix.

Paramètres de texte

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

• Police du texte : Montserrat
• Couleur du texte : #ffffff
• Taille du texte : 1vw (ordinateur de bureau), 1.5vw (tablette), 2vw (téléphone)
• Alignement du texte : Centre

Ajouter un module de texte à la colonne 2

Ajouter un symbole à la zone de contenu

Dans la deuxième colonne, nous aurons besoin d'un autre module de texte. Ajoutez le symbole '✓' dans la zone de contenu.

Paramètres de texte

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

• Couleur du texte : #ffad72
• Taille du texte : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : Centre

Cloner le module de texte et placer le doublon dans la colonne 3

Une fois que vous avez terminé le module de texte dans la colonne 2, vous pouvez le cloner et placer le doublon dans la colonne 3.

Symbole alternatif et couleur du texte

Selon la fonctionnalité que vous présentez, vous voudrez peut-être changer le symbole en « ✗ ». Utilisez également une couleur de texte différente.

• Couleur du texte : #ffffff

Cloner Row autant de fois que souhaité

Une fois que vous avez terminé la ligne entière, vous pouvez la cloner autant de fois que vous le souhaitez, en fonction du nombre de fonctionnalités que vous souhaitez afficher.

Ajouter la ligne n° 3

Structure des colonnes

La dernière ligne que nous ajouterons à la deuxième section contient la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Ajoutez également une bordure.

• Largeur de la bordure supérieure : 0px
• Largeur de la bordure inférieure : 0px
• Largeur de la bordure droite : 1px
• Largeur de la bordure gauche : 1px
• Couleur de la bordure : rgba(255,255,255,0)

Affichage

Et assurez-vous que les colonnes apparaissent côte à côte sur des écrans de plus petite taille en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Paramètres des colonnes 2 et 3

Espacement

Continuez en ajoutant une marge supérieure aux colonnes 2 et 3.

• Rembourrage supérieur : 4vw

Bordure de la colonne 2

Ajoutez également une bordure droite à la colonne 2.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #eaeaea

Cloner le module diviseur et le placer dans la colonne 1 de la nouvelle ligne

Clonez le module diviseur que vous pouvez trouver dans la première ligne de la section et placez le doublon dans la première colonne de votre nouvelle ligne.

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Continuez en ajoutant un module de bouton à la colonne 2 et insérez une copie de votre choix.

Alignement

Modifiez l'alignement des boutons dans l'onglet Conception.

• Alignement des boutons : Centre

Paramètres des boutons

Et modifiez les paramètres des boutons comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 1.5vw (tablette), 2vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #ffad72
• Largeur de la bordure du bouton : 0px

• Rayon de bordure de bouton: 50vw
• Police des boutons : Montserrat

Espacement

Ajoutez également des valeurs de remplissage personnalisées au module de boutons.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 1.5vw (tablette et téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 1.5vw (tablette et téléphone)
• Rembourrage gauche : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Rembourrage droit : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)

Cloner le module de bouton et placer le doublon dans la colonne 3

Une fois que vous avez terminé le module de boutons dans la colonne 2, vous pouvez le cloner et placer le doublon dans la colonne 3.

Cloner la section #2

Continuez en clonant toute la deuxième section. Assurez-vous de modifier les valeurs de prix dans les modules de texte pour qu'elles correspondent aux options de facturation annuelle. C'est la section qui apparaîtra une fois que quelqu'un aura cliqué sur « facturation annuelle ».

Changer l'ID CSS et ajouter une classe CSS

Modifiez ensuite l'ID CSS de la section et ajoutez également une classe CSS.

• Identifiant CSS : pricing-2
• Classe CSS : hide-section-2

Ajouter une nouvelle ligne à une colonne en haut de la section #1

La seule chose qui reste à faire est d'ajouter le code CSS et jQuery pour faire fonctionner la fonctionnalité. Pour ce faire, nous allons ajouter une nouvelle ligne en haut de la section 1.

Ajouter le module de code #1 avec le code CSS

Ajoutez un premier module de code et insérez les lignes de code CSS suivantes :

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Ajouter le module de code #2 avec le code JQuery

Ajoutez un autre module de code juste en dessous du précédent, insérez le code jQuery ci - dessous entre les balises de script et le tour est joué !

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer une conception de basculement des prix mensuels/annuels avec Divi. C'est un excellent moyen d'ajouter de l'interaction à vos plans tarifaires. En plus d'appliquer la technique du clic, nous avons également conçu un magnifique plan de tarification de grille qui vous permet de souligner quelles fonctionnalités sont incluses dans quels plans. Vous avez également pu télécharger le fichier JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.