Comment utiliser les options de style de texte et de liste de Divi pour des conceptions de contenu à bascule et accordéon uniques
Publié: 2019-07-24Les options de style de texte et de liste de Divi sont une fonctionnalité courante disponible dans la plupart des modules Divi. Cela ouvre de nouvelles opportunités pour concevoir du contenu créatif et des conceptions de liste dans des modules (comme le module à bascule et l'accordéon) qui n'étaient auparavant possibles que dans le module de texte. L'astuce consiste à configurer votre contenu avec le code HTML approprié afin de pouvoir cibler ces éléments à l'aide des paramètres de conception intégrés.
Dans ce didacticiel, je vais vous montrer comment utiliser les options de style de texte et de liste de Divi pour des conceptions uniques de contenu à bascule et en accordéon. Cela vous sera utile chaque fois que vous souhaitez incorporer différentes conceptions de texte sans avoir à utiliser des classes CSS ou des CSS en ligne.
Commençons.
Aperçu
Voici un aperçu des conceptions que nous allons créer à l'aide des options de style de texte et de liste de Divi.
Téléchargez GRATUITEMENT les conceptions de style de liste pour la mise en page des bascules et des accordéons
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 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.
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 !
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Images à utiliser pour le contenu fictif
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Partie 1 : Utilisation des styles de liste dans les modules à bascule
Dans cette première partie du didacticiel, nous allons créer trois bascules dont chacune a un contenu conçu à l'aide d'options de style de liste. Cela sera utile pour séparer les éléments de votre liste dans des bascules séparées, presque comme un texte de présentation personnalisé.
Créez d'abord une section régulière avec une rangée de trois colonnes. Mettez ensuite à jour les paramètres de ligne comme suit :
Largeur de gouttière : 2
Largeur : 100 %
Largeur maximale: 90vw
Ajouter un module à bascule
Ensuite, ajoutez un module à bascule à la colonne 1. Ce sera le premier des trois modules à bascule qui seront ajoutés à chacune des trois colonnes.
Ajouter le contenu HTML à bascule
Le contenu HTML est la clé de cette conception. Pour que nous puissions profiter des différents styles de liste dans les paramètres de bascule de Divi, nous devons ajouter des listes HTML à notre zone de contenu.
Allez-y et collez le code HTML suivant dans le
Boîte de contenu du corps.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
Maintenant, ce morceau de code HTML crée une liste ordonnée à l'aide de la balise ol. La liste ordonnée n'a qu'un seul élément de liste (li) qui est une liste non ordonnée imbriquée (ul) avec un élément de liste (li) qui a un contenu fictif. Sous la liste ordonnée se trouve un paragraphe de texte de base.
Avec cette configuration, nous pouvons cibler chacune de ces balises (ol, ul, p) pour un style différent à l'aide des styles de texte intégrés à Divi qui incluent des styles de liste.
Notez que la balise de début ol contient start = "1" à l'intérieur. Cela indique à la liste quel numéro commencer avec la liste des numéros de la liste ordonnée avec chaque élément de la liste. Techniquement, ce n'est pas nécessaire pour le premier chiffre car il commencera automatiquement par 1 par défaut. Mais nous en aurons besoin pour les prochaines bascules que nous ajouterons.
En outre, la balise de liste non ordonnée a un style en ligne pour augmenter un peu le contenu ul en utilisant une marge négative. C'est ainsi que nous chevaucherons le numéro de la liste ordonnée avec le texte de la liste non ordonnée dans la conception.
Styliser le contenu
Nous pouvons maintenant commencer à ajouter des couleurs et des styles de police à l'aide des paramètres intégrés et des styles de liste. Mettez à jour les paramètres de conception à bascule comme suit :
Couleur de l'icône : #ff3d97
Taille de la police de l'icône : 26px
Couleur d'arrière-plan de la bascule ouverte : #ffffff
Couleur d'arrière-plan de la bascule fermée : #ffffff
Couleur du texte du titre ouvert : #333333
Couleur du texte du titre : #333333
Police du titre : Oswald
Taille du texte du titre : 18px
Hauteur de la ligne de titre : 3 em
Police de la liste non ordonnée : Oswald
Poids de la police de liste non ordonnée : léger
Couleur du texte de la liste non ordonnée : #333333
Taille du texte de la liste non ordonnée : 36px
Type de style de liste non ordonné : aucun
Police de la liste ordonnée : Kameron
Poids de la police de la liste ordonnée : gras
Couleur du texte de la liste ordonnée : rgba(255,61,151,0.34)
Taille du texte de la liste commandée : 100px
Hauteur de la ligne de liste commandée : 1,1 em
Dupliquer le premier module de bascule pour créer les autres bascules
Pour créer les bascules pour les colonnes 2 et 3, nous allons dupliquer le module bascule que nous venons de terminer de concevoir. Ensuite, nous pouvons les faire glisser dans chaque colonne afin que chaque colonne ait le même module à bascule.
Mettre à jour les numéros de départ de la liste commandée
Pour le basculement en double dans la colonne 2, nous devons faire en sorte que la liste ordonnée commence par le numéro « 2 » au lieu de « 1 ». Pour changer cela, ouvrez les paramètres du module à bascule et changez le numéro de début dans la balise ol en « 2 ».
Vous devrez également mettre à jour la bascule dans la colonne 3 avec le numéro de début de la liste ordonnée de « 3 ».
Conception finale
Voyons maintenant la conception finale.
Partie 2 : Utilisation des styles de liste dans les modules d'accordéon
Dans cette deuxième partie du didacticiel, je vais vous montrer un moyen rapide et facile de transférer les conceptions de contenu de style liste du module bascule vers un module accordéon. Le processus est simple car vous pouvez utiliser les mêmes styles de texte et de liste dans un module accordéon (ou à peu près n'importe quel module) que nous avons utilisé dans nos bascules précédentes. Pour ce faire, créez d'abord une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module accordéon à la rangée.
Ensuite, dupliquez l'un des deux accordéons par défaut sous l'onglet contenu pour un total de trois accordéons. Ensuite, mettez à jour le contenu de chaque accordéon individuel avec le même contenu html de bascule exact dans chacun des trois bascules que nous avons créées précédemment.
Étendre les styles de bascule à l'accordéon
Un moyen rapide de transférer le style des bascules que nous avons créées vers le module accordéon consiste à utiliser la fonction d'extension des styles. Pour ce faire, ouvrez l'un des modules à bascule et faites un clic droit sur la catégorie de style d'icône et sélectionnez "étendre les styles d'icône" dans le menu contextuel. Ensuite, sélectionnez pour étendre les styles de cette icône à "Tous les accordéons" tout au long de "Cette page".
Ensuite, faites de même pour chacune des catégories de conception qui ont un style personnalisé qui doit être étendu au module accordéon. Ceux-ci incluent le style pour « Toggle » « Title Text » et « Body Text ».
Ensuite, vérifiez le résultat final pour la conception de l'accordéon.
Partie 3 : Utilisation de styles de liste pour créer du contenu à plusieurs colonnes dans un module à bascule
Dans cette troisième partie du didacticiel, je vais vous montrer comment créer plusieurs colonnes de contenu pour vos conceptions de style de liste.
Tout d'abord, créez une nouvelle section avec une ligne à une colonne. Ensuite, copiez et collez l'un des modules à bascule que nous avons créés précédemment dans la ligne.
Ensuite, mettez à jour le contenu du corps du module à bascule avec du nouveau code HTML comme suit :
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Notez l'attribut de style en ligne "column-count:2" qui a été ajouté à la balise de début ol. Cela permettra au contenu de la liste ordonnée d'être structuré en deux colonnes au lieu d'une. Vous pouvez changer cela en n'importe quel nombre pour plus de colonnes si nécessaire.
Et remarquez comment nous avons la possibilité d'utiliser les paramètres de conception intégrés de Divi pour les styles de titre, de lien et de liste.
Styliser le texte du lien
Étant donné que les styles de titre et de liste sont déjà en place à partir de la conception précédente, tout ce que nous avons à faire est d'ajouter une conception pour le texte du lien.
Ouvrez les paramètres de bascule et mettez à jour les éléments suivants :
Poids de la police du lien : semi-gras
Style de police du lien : Souligné
Couleur du texte du lien : #ff3d97
Taille du texte du lien : 15px
Et puisque nous ne chevauchons aucun texte avec cette conception, allez-y et donnez aux numéros de style de liste ordonnée une couleur plus vive comme suit :
Couleur du texte de la liste ordonnée : #ff3d97
Ajouter un arrière-plan à la bascule
Pour terminer la conception, nous pouvons ajouter un arrière-plan personnalisé à notre bascule. Pour ce faire, mettez à jour les paramètres de bascule suivants :
Image de fond : [télécharger l'image de votre choix]
Couleur d'arrière-plan du dégradé gauche : rgba (255,255,255,0.92)
Dégradé d'arrière-plan à droite : rgba (255,255,255,0.8)
Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 0%
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI
Ajout d'éléments réactifs à la bascule à deux colonnes
Étant donné que le contenu à bascule est maintenant sur deux colonnes, mettons à jour le design avec des styles réactifs pour le faire évoluer correctement sur mobile.
Tout d'abord, mettez à jour les paramètres de ligne comme suit :
Largeur : 100 %
Largeur max : 89vw (ordinateur de bureau), 90vw (tablette et téléphone)
Ouvrez les paramètres de basculement et mettez à jour les éléments suivants :
Taille de la police de l'icône : 5vw
Taille du texte du titre : 4vw
Taille du texte de la liste non ordonnée : 26px (ordinateur de bureau), 18px (tablette), 14px (téléphone)
Retrait d'élément de liste non ordonné : 1px
Taille du texte de la liste commandée : 8vw
Conception finale du contenu à bascule multi-colonnes
Voici le design sur les écrans des tablettes et des téléphones.
Et voici le même design avec un fond plus sombre et des couleurs de texte blanches.
Dernières pensées
La plupart du temps, les bascules et les accordéons auront un contenu corporel de base qui ne nécessite vraiment pas de conception créative. Mais si le moment vient où vous souhaitez pimenter votre contenu de bascule et d'accordéon, vous pouvez profiter des options de texte et de style de liste intégrées à Divi. Une fois que vous avez votre code HTML en place, vous pouvez cibler ces balises HTML pour différentes conceptions sans avoir à utiliser de CSS ou de classes personnalisées externes. C'est également un excellent moyen d'afficher des styles de liste créatifs dans n'importe quel module à l'aide du générateur Divi, car ces mêmes options de style de liste sont disponibles dans tous les modules.
Amusez-vous à explorer de nouveaux designs.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!