Le module Toggle de Divi vous permet d’afficher du contenu supplémentaire par clic, sans avoir besoin de code jQuery supplémentaire. Semblables au module Accordion, les modules à bascule sont généralement utilisés pour partager un contenu groupé, tel que les questions fréquemment posées. Cependant, vous pouvez également les utiliser pour d’autres tâches, par exemple pour structurer votre page. Dans ce didacticiel, nous allons utiliser des modules de basculement pleine largeur pour créer une conception de page simple qui se comporte au clic. Le style de conception que nous traitons est audacieux et propre. Vous pourrez également télécharger le fichier JSON gratuitement!
Allons-y.
Avant de plonger dans le didacticiel, examinons rapidement le résultat obtenu sur différentes tailles d’écran.
Commençons à recréer
Ajouter une nouvelle section
Espacement
Commencez par créer une nouvelle page (ou en ouvrant une existante) et en y ajoutant une section régulière. La seule chose à faire dans les paramètres de section consiste à supprimer tout le remplissage supérieur et inférieur par défaut des paramètres d’espacement..
- Top Rembourrage: 0px
- Rembourrage inférieur: 0px
Ajouter une nouvelle ligne
Structure de colonne
Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante:
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne et assurez-vous que la ligne touche les côtés gauche et droit du conteneur de section en modifiant les paramètres de dimensionnement. C’est une étape importante de ce tutoriel. cela permet au module Toggle, que nous ajouterons plus tard dans ce didacticiel, de devenir pleine largeur.
- Utiliser une largeur de gouttière personnalisée: Oui
- Largeur de gouttière: 1
- Largeur: 100%
- Largeur maximale: 100%
Espacement
Nous supprimons également le remplissage supérieur et inférieur par défaut de la ligne. Cela supprimera tout l’espace entre le module bascule et le conteneur de lignes / colonnes dans lequel il est placé.
- Top Rembourrage: 0px
- Rembourrage inférieur: 0px
Ajouter un module à bascule
Insérer le titre et le contenu
Il est temps de commencer à ajouter des modules! Le seul module dont nous avons besoin dans cette ligne est un module Toggle. Nous allons utiliser la zone de titre pour ajouter un titre et placer tout le contenu que nous souhaitons partager dans la zone de contenu du corps. N’hésitez pas à placer ce que vous voulez dans la zone de contenu; du texte aux images et plus.
Etat
Nous utilisons un état à bascule fermé, mais n’hésitez pas à le laisser ouvert également.
- Etat: proche
Paramètres d’icône par défaut
Passez à l’onglet Conception et modifiez les paramètres d’icône du module en conséquence:
- Couleur de l’icône: # 570fff
- Utiliser la taille de l’icône personnalisée: YEs
- Icon Taille de la police: 6vw
Les paramètres de l’icône au survol
Modifiez la couleur de l’icône en survol.
- Couleur de l’icône: # f2f2f2
Paramètres de basculement par défaut
Modifiez ensuite la couleur d’arrière-plan de la bascule fermée.
- Basculer la couleur d’arrière-plan: #ffffff
Survolez les paramètres
Et changez la couleur en vol stationnaire aussi.
- Basculer la couleur d’arrière-plan: # 000000
Paramètres du texte du titre
Continuez en modifiant les paramètres du texte du titre comme suit:
- Titre du texte couleur: # 000000
- Titre Titre Niveau: H2
- Titre Police: Montserrat
- Titre du texte: alignement à gauche
- Titre du texte Taille: 8vw (bureau), 10vw (tablette et téléphone)
- Espacement des lettres du titre: -1vw (bureau), -0.5vw (tablette et téléphone)
- Hauteur de la ligne de titre: 0.7em
Paramètres de texte de titre fermé par défaut
Ensuite, accédez aux paramètres de texte du titre fermé et modifiez-les en conséquence:
- Closed Titre Police: Montserrat
- Titre fermé Taille du texte: 18vw (bureau), 16vw (tablette et téléphone)
- Hauteur du titre fermé: 0.8em
Survolez les paramètres du texte du titre
Changer la couleur du texte du titre fermé en survol.
- Titre fermé Couleur du texte: # f4f4f4
Paramètres du corps du texte
Passez aux paramètres du corps du texte et apportez quelques modifications également.
- Corps Police: Fira Sans
- Poids de la police: Léger
- Alignement du corps du texte: Justifiez
- Taille du texte du corps: 1.2vw (bureau), 2vw (tablette), 3vw (téléphone)
- Hauteur du corps: 2.1em
Espacement
Ajoutez également un rembourrage personnalisé en haut, en bas et à gauche au module.
- Top Rembourrage: 10vw
- Rembourrage inférieur: 10vw
- Rembourrage Gauche: 6vw
Frontière
Continuez en supprimant la bordure par défaut du module dans les paramètres de bordure.
- Largeur de la bordure: 0px
Basculer le contenu CSS
Définissez les paramètres du module Toggle en ajoutant les lignes de code CSS suivantes au bureau:
width: 60vw;border-left: 0.2vw solidblack;padding: 5vw 5vw 5vw 5vw;
Modifiez la largeur de la ligne de code CSS sur la tablette et le téléphone:
width: 85vw;
Cloner toute la section autant de fois qu’on le souhaite
Une fois que vous avez terminé la première section, la ligne et le module Toggle, vous pouvez cloner toute la section autant de fois que vous le souhaitez. en fonction de la quantité de contenu que vous souhaitez afficher sur votre page.
Changer le contenu
Assurez-vous de changer tout le contenu de la bascule dans chaque module de bascule en double.
Changer les couleurs des icônes
Ensuite, ouvrez chaque module Toggle individuellement et changez la couleur de l’icône. Ceux que nous avons utilisés pour ce tutoriel sont mentionnés ci-dessous:
- Couleur de l’icône 1: # ff9000
- Couleur de l’icône 2: # 00ffd4
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 faire preuve de créativité avec le module Toggle de Divi. Plus précisément; nous les avons créés en pleine largeur et les avons utilisés pour afficher le contenu de différentes sections de manière créative. Ce tutoriel montre que vous pouvez facilement utiliser les modules de Divi en dehors de la boîte lorsque vous prenez en compte les divers conteneurs. Vous avez également pu télécharger gratuitement le fichier JSON du didacticiel! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.