Comment utiliser de manière créative le module Toggle de Divi pour présenter les plans tarifaires

Lorsqu'il s'agit de présenter des plans tarifaires sur votre site Web, vous pouvez prendre plusieurs tours et créer des pages ou des sections de tarification absolument époustouflantes et attrayantes. Lors de la création d'un site Web avec Divi, vous opterez probablement pour le module de tableaux de prix. Ce module vous permet d'ajouter rapidement des tableaux de prix et de les styliser comme vous le souhaitez. Mais si vous souhaitez ajouter plus d'interaction à cette section particulière de votre page, vous pouvez également utiliser le module Toggle pour afficher les plans tarifaires au clic. C'est un excellent moyen de mettre en évidence un plan tarifaire spécifique en gardant son état ouvert et en fermant les deux autres.

Dans ce didacticiel, nous vous montrerons étape par étape comment créer un magnifique tableau de tarification à bascule à l'aide du module Toggle de Divi. Une fois que vous aurez compris l'approche, vous pourrez créer toutes sortes de plans de tarification à bascule en un clic pour tout type de site Web que vous créez.

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.

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Espacement

Créez une nouvelle page ou ouvrez une page existante à l'aide du Visual Builder de Divi. Ajoutez une nouvelle section à la page, ouvrez les paramètres de la section et ajoutez un rembourrage haut et bas personnalisé pour créer de l'espace en haut et en bas de la section.

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

Ajouter la ligne n° 1

Structure des colonnes

Une fois que vous avez terminé de modifier les paramètres d'espacement des sections, vous pouvez continuer et ajouter une nouvelle ligne en utilisant la structure de colonnes suivante :

Ajouter un module de texte

Ajouter du contenu

Il n'est pas nécessaire d'apporter des modifications à la ligne, alors allez-y et ajoutez immédiatement un module de texte. Entrez un contenu H2 de votre choix dans la zone de contenu du module.

Paramètres de texte d'en-tête

Continuez en allant dans l'onglet Conception et modifiez les paramètres du texte de l'en-tête.

• Police de titre 2 : Didact Gothic
• En-tête 2 Poids de la police : régulier
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 40 px
• Espacement des lettres de l'en-tête 2 : -1px

Ajouter un module diviseur

Visibilité

Ajoutez un module de séparation juste en dessous du module de texte que vous avez ajouté et modifié au cours des étapes précédentes. Assurez-vous que l'option « Afficher le diviseur » du module diviseur est activée.

• Afficher le diviseur : Oui

Couleur

Continuez en allant dans l'onglet design et changez la couleur du séparateur.

• Couleur : #000000

Dimensionnement

Modifiez également la largeur du module dans les paramètres de dimensionnement.

• Largeur : 39 %
• Alignement du module : Centre

Espacement

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

• Marge inférieure : 50px

Ajouter la ligne n° 2

Structure des colonnes

Nous avons fini de modifier la première ligne et ses modules. Il est temps d'ajouter une nouvelle ligne à l'aide de la structure de colonnes suivante :

Colonne 1 Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé à la colonne 1.

• Couleur 1 : #00fff2
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé de la colonne 1 : radial
• Colonne 1 Direction radiale : En bas à droite
• Position de départ de la colonne 1 : 30 %
• Position finale de la colonne 1 : 30 %

Colonne 2 Fond dégradé

Faites de même pour la deuxième colonne.

• Couleur 1 : #fce96f
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé de la colonne 2 : radial
• Direction radiale de la colonne 2 : en haut à droite
• Position de départ de la colonne 2 : 40 %
• Position finale de la colonne 2 : 40 %

Colonne 3 Fond dégradé

De même, ajoutez un arrière-plan dégradé à la troisième colonne en utilisant les paramètres suivants :

• Couleur 1 : #a659ff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé de la colonne 3 : radial
• Colonne 3 Direction radiale : Bas
• Colonne 3 Position de départ : 30 %
• Position finale de la colonne 2 : 30 %

Dimensionnement

Une fois que vous avez terminé d'ajouter l'arrière-plan dégradé, passez à l'onglet Conception et modifiez les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2

Ajouter un module de bascule à la colonne 1

Ajouter du contenu

Il est temps de commencer à créer différents plans tarifaires ! Ajoutez un nouveau module de basculement à la première colonne et entrez un titre. Pour styliser les différents éléments de la zone de contenu, nous avons utilisé des balises HTML supplémentaires. Allez-y, copiez les lignes suivantes et ajoutez-les à l'onglet Texte de votre zone de contenu :

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

État

Vous pouvez choisir si vous souhaitez que l'état du module de basculement soit ouvert ou fermé. Pour pouvoir voir toutes les modifications que vous apportez dans le reste du didacticiel, je vous recommande de conserver l'état « ouvert » jusqu'à ce que vous ayez terminé de modifier tous les différents paramètres de conception.

Couleur de l'arrière plan

Continuez en allant dans les paramètres d'arrière-plan du module Toggle et ajoutez une couleur d'arrière-plan blanche.

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

Paramètres des icônes

Modifiez ensuite la couleur de l'icône dans l'onglet Conception.

• Couleur de l'icône : #000000

Basculer les paramètres

Et modifiez également la couleur d'arrière-plan Open Toggle dans les paramètres de bascule.

• Couleur d'arrière-plan à bascule ouverte : rgba(255,255,255,0)

Paramètres du texte du titre

Ensuite, apportez quelques modifications aux paramètres du texte du titre.

• Police du titre : Didact Gothic
• Poids de la police du titre : gras
• Couleur du texte du titre : #000000
• Taille du texte du titre : 3,5 vw (ordinateur de bureau), 60 px (tablette), 40 px (téléphone)

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Police de caractère : Didact Gothic
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : #000000
• Taille du corps du texte : 18px
• Hauteur de la ligne du corps : 1,5 em

Cloner le module de basculement deux fois et le placer dans les deux colonnes restantes

Une fois que vous avez terminé de modifier le module de basculement dans la colonne 1, vous pouvez le cloner deux fois et placer les doublons dans les deux colonnes restantes.

Modifier la copie

Assurez-vous de modifier toutes les copies des doublons et vous avez terminé !

Aperçu

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

Dernières pensées

Dans ce tutoriel, nous vous avons montré une approche créative sur l'utilisation du module Toggle de Divi pour présenter les plans tarifaires sur votre site Web. C'est un excellent moyen d'interagir avec les visiteurs et d'améliorer votre style de conception. Cela facilite la mise en évidence d'un plan tarifaire spécifique dans votre section en gardant celui-ci ouvert et les deux autres options fermées. Vous pouvez utiliser cette approche pour tout type de site Web que vous créez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!