Libérer la puissance du module de texte de Divi pour les conceptions de listes créatives
Publié: 2018-08-16La création de conceptions de listes uniques est un aspect important de la conception Web. Les lecteurs apprécient la structure et l'esthétique d'une liste bien conçue car elle leur permet de traiter les informations beaucoup plus rapidement.
Avec le module texte de Divi, vous avez tout ce dont vous avez besoin pour transformer des listes ordinaires en de belles œuvres d'art. Les paramètres du module de texte de Divi vous permettent de cibler et de styliser différents éléments html dans votre contenu, y compris les listes. Et avec quelques techniques de conception, vous pouvez exploiter la puissance de ces options pour personnaliser vos listes de manière surprenante.
Dans ce tutoriel, je vais vous montrer comment créer des designs de liste uniques dans Divi.
Commençons.
Aperçu
Voici un aperçu des quatre modèles de liste que nous allons construire dans ce didacticiel.
Inspiré par les paramètres du module de texte
Si vous êtes comme moi, vous avez peut-être tendance à négliger certaines des options «cachées» qui se cachent au plus profond de Divi Builder. Un module qui a quelques trésors enfouis est le module de texte. Les paramètres du module de texte ont plusieurs onglets qui contiennent des options de style pour différents éléments html. Cela peut être un outil de conception extrêmement pratique et créatif. Ces onglets incluent des options pour le corps du texte, les liens, les listes non ordonnées, les listes ordonnées et les guillemets.
Et, il y a quelques joyaux cachés sous ces onglets que vous n'avez peut-être pas pensé à utiliser dans votre conception. Par exemple, saviez-vous que vous pouvez modifier les options de style de liste pour les listes non ordonnées ? Il existe un certain nombre d'options uniques disponibles (18 pour être exact), y compris les chiffres romains et les décimales avec un zéro non significatif.
Ceux-ci peuvent sembler insignifiants, mais lorsque vous exploitez les options de conception, vous pouvez produire des conceptions vraiment créatives.
Vous pouvez également cibler le style de différents niveaux de titre (ou balises) sous chacun des onglets sous les options de style de titre.
Cette capacité à cibler plusieurs éléments html dans votre contenu ouvre de merveilleuses possibilités. J'espère qu'ils vous inspireront aussi.
Pour en savoir plus à ce sujet, consultez la mise à jour des fonctionnalités qui explique certaines de ces merveilleuses options de texte.
Création de votre liste HTML
Une liste html peut être soit « ordonnée » (avec des nombres, des chiffres romains, etc.) soit « non ordonnée » (avec des icônes carrées, des icônes circulaires, etc.). Pour les listes non ordonnées, les éléments de la liste seront enveloppés dans une balise « ul » (« ul » signifie « liste non ordonnée »). Pour les listes ordonnées, les éléments de la liste sont entourés d'une balise « ol » (« ol » signifie « liste ordonnée »). Chaque élément de liste est entouré d'une balise « li » (« li » pour « élément de liste »).
Voici la structure de base d'une liste ordonnée :
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
Qui par défaut ressemblera à ce qui suit :
- Élément de liste
- Élément de liste
- Élément de liste
Vous pouvez en fait créer une liste HTML à l'aide de l'éditeur wysiwyg dans un module de texte Divi. Assurez-vous que vous éditez dans l'onglet visuel et tapez simplement vos éléments de liste en vous assurant qu'il y a un saut de ligne (appuyez sur Entrée) après chacun. Mettez ensuite le contenu en surbrillance et cliquez sur l'une des icônes de liste en haut de l'éditeur.
Allez maintenant dans l'onglet texte pour voir à quoi ressemble le code HTML :
Cela fonctionne bien pour les listes simples, mais si vous voulez créer des listes imbriquées (une liste dans une liste), vous feriez mieux de les créer en utilisant HTML (en utilisant l'onglet texte) pour éviter le mal de tête d'essayer de le faire dans le wysiwyg éditeur (onglet visuel).
Voici la structure de base d'une liste imbriquée qui a une liste ordonnée avec chaque élément de liste ayant une liste non ordonnée imbriquée.
<ol>
<ol>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
</ol>
Par défaut, cette liste html imbriquée ressemblera à ceci :
- Élément de la liste commandée
- Élément de liste non ordonné
- Élément de la liste commandée
- Élément de liste non ordonné
- Élément de la liste commandée
- Élément de liste non ordonné
Vous pouvez également ajouter d'autres balises html dans la liste. Par exemple, nous pouvons envelopper l'élément de liste ordonnée dans une balise h5. Le résultat ressemblera à ceci :
<ol>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
</ol>
Ne vous inquiétez pas, c'est aussi compliqué que je vais le faire pour ce tutoriel. Mais ce que vous devez comprendre, c'est que cette structure comporte trois balises différentes (ol, ul et h5) qui peuvent être stylisées indépendamment les unes des autres avec les puissants paramètres de conception de Divi dans un module de texte.
Nous aurons besoin de cette structure un peu plus tard, mais pour l'instant, lançons notre page et lançons notre conception dans le constructeur visuel.
Création de la section et de la ligne pour les listes
Créez une nouvelle page et déployez le Visual Builder. Sélectionnez ensuite l'option Créer une page à partir de zéro. Créez ensuite une section régulière avec une rangée de deux colonnes.
Création de la liste HTML dans un module de texte
Dans la première colonne de votre ligne, ajoutez un nouveau module de texte. Dans la zone de contenu des paramètres de texte, saisissez la liste HTML suivante :
<ol> <li> <h5>Design</h5> <ul> <li>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.</li> </ul> </li> <li> <h5>Develop</h5> <ul> <li>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.</li> </ul> </li> <li> <h5>Deliver</h5> <ul> <li>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.</li> </ul> </li> </ol>
Cette structure devrait vous sembler familière depuis le début. Le texte d'en-tête h5 sera les éléments de liste ordonnés et le texte factice "lorem ipsum" sera les éléments de liste non ordonnés imbriqués.
Par défaut, cela ressemblera à ceci :
Pas trop impressionnant pour l'instant, je sais. Mais avec ce contenu en place, nous pouvons maintenant commencer la partie amusante de la conception de notre liste avec Divi !
Remarque importante : étant donné que chaque conception est une version modifiée de la première conception, il serait préférable de commencer par la première conception de ce didacticiel et de les conserver dans l'ordre.
Conception de liste #1
Pour commencer, donnons à notre module de texte un arrière-plan dégradé comme suit :
Couleur d'arrière-plan du dégradé à gauche : rgba(0,0,0,0.04)
Couleur de fond dégradé à droite : rgba(255,255,255,0)
Direction du gradient : 90 degrés
Position de départ : 25 %
Position finale : 0%
Styliser les éléments de la liste ordonnée
Passez maintenant sur l'onglet Conception et sélectionnez l'onglet Liste ordonnée sous la bascule Texte.
Ensuite, mettez à jour les éléments suivants :
Police de la liste ordonnée : Abril Fatface
Poids de la police de la liste ordonnée : gras
Couleur du texte de la liste commandée : #559cad
Taille du texte de la liste commandée : 45px
Hauteur de la ligne de liste commandée : 1,6 em
Type de style de liste ordonnée : decimal-leader-zero
Position de style de liste ordonnée : à l'extérieur
Retrait de l'élément de la liste ordonnée : 2vw
Vous remarquerez que le h5 et la liste non ordonnée imbriquée hériteront du style de la liste ordonnée parent. Ne vous inquiétez pas, vous pourrez remplacer le style des autres éléments.
Styliser les éléments de liste non ordonnés
Cliquez maintenant sur l'onglet Liste ordonnée pour modifier les paramètres suivants :
Police de la liste non ordonnée : Montserrat
Poids de la police de liste non ordonnée : léger
Couleur du texte de la liste non ordonnée :
Taille du texte de la liste non ordonnée : 18px
Type de style de liste non ordonné : aucun
Retrait d'élément de liste non ordonné : 0,01 px
Styliser l'en-tête H5
Le dernier élément que nous devons styliser est l'en-tête H5. Pour ce faire, accédez aux options sous Titre du texte et cliquez sur l'onglet H5. Ensuite, mettez à jour les éléments suivants :
Police de la rubrique 5 : Montserrat
Titre 5 Poids de la police : Léger
Titre 5 Style de police : majuscule (TT)
Titre 5 Couleur du texte : #4f6d7a
Titre 5 Taille du texte : 5vw (ordinateur de bureau), 70px (tablette), 40px (smartphone)
Pour terminer la conception de notre module de texte, ajoutez le remplissage personnalisé suivant :
Rembourrage personnalisé (bureau): 3vw haut, 3vw bas
Rembourrage personnalisé (tablette): 2vw gauche
Rembourrage personnalisé (smartphone): 50px à gauche
Enregistrer les paramètres.
Copiez maintenant le module de texte et collez-le dans la deuxième colonne de la ligne. Vous remarquerez peut-être que les numéros de liste doivent être ajustés dans le module de texte dupliqué afin qu'il continue à partir de la liste précédente. Nous voulons que notre deuxième liste de modules de texte commence par le chiffre 4 (au lieu de 1). Pour ce faire, nous devons ajouter un petit changement à notre liste html. Accédez à la zone de contenu dans les paramètres du module de texte et remplacez la balise d'ouverture « ol » par ce qui suit :
<ol start="4">
Voyons maintenant le résultat final.
Conception de liste #2
Pour ce deuxième exemple de conception de liste, je vais dupliquer la première section que nous avons créée pour nous donner une longueur d'avance. Je vais également présenter un arrière-plan sympa pour la conception de la liste en utilisant des dégradés d'arrière-plan.
Création d'un motif de dégradé d'arrière-plan personnalisé
Dans la section dupliquée, mettez à jour le paramètre de section avec l'arrière-plan dégradé suivant :
Couleur d'arrière-plan dégradé à gauche : #ffffff
Couleur de fond dégradé à droite : rgba(155,29,32,0,08)
Direction du gradient: 45deg
Position de départ : 50 %
Position finale : 0%
Enregistrer les paramètres.
Mettez maintenant à jour vos paramètres de ligne avec le dégradé d'arrière-plan suivant :
Couleur de fond dégradé à gauche : rgba(155,29,32,0,08)
Couleur de fond dégradé à droite : rgba(255,255,255,0)
Direction du gradient: 45deg
Position de départ : 25 %
Position finale : 0%
Couleur de l'arrière-plan du dégradé de la colonne 2 : rgba(255,255,255,0)
Colonne 2 Couleur de fond dégradé à droite : #ffffff
Direction du gradient de la colonne 2: 45deg
Position de départ de la colonne 2 : 65 %
Position finale de la colonne 2 : 0%
La clé de ces conceptions de dégradé d'arrière-plan est qu'elles ont toutes la même direction de dégradé de 45 degrés. Ensuite, vous pouvez utiliser la position de départ pour espacer uniformément le motif.
Paramètres de style pour la conception de liste #2
À ce stade, nous pouvons vraiment nous amuser à peaufiner les conceptions de nos listes de manière unique. Pour ce deuxième exemple, je vais vous montrer à quel point il est facile de transformer votre conception avec quelques modifications mineures. Accédez au module de texte dans la première colonne et mettez à jour les paramètres comme suit :
Supprimez d'abord le dégradé d'arrière-plan.
Poids de la police de la liste non ordonnée : moyen
Couleur du texte de la liste non ordonnée : rgba(0,0,0,0.5)
Poids de la police de la liste commandée : régulier
Couleur du texte de la liste ordonnée : #9b1d20
Titre 5 Poids de la police : fin
Titre 5 Couleur du texte : rgba(0,0,0,0.8)
Titre 5 Taille du texte : 5vw (ordinateur de bureau)
Copiez maintenant les styles de module dans le module de texte dans la colonne de droite.
Voici la conception finale de notre deuxième exemple.
Conception de liste #3
Pour le troisième exemple, j'ai pensé qu'il serait bon de donner un exemple de conception de liste centrée à une colonne. Pour créer cette conception, dupliquez la deuxième section d'exemple. Dans la nouvelle section dupliquée, modifiez la structure des lignes en une colonne, puis supprimez le deuxième module de texte.
Mettez maintenant à jour les paramètres de la section avec de nouvelles couleurs d'arrière-plan dégradé :
Couleur de fond dégradé à gauche : #559CAD
Couleur de fond dégradé à droite : #4f6d7a
Mettez à jour les paramètres de ligne avec une nouvelle couleur d'arrière-plan dégradé à gauche :
Couleur de fond dégradé à gauche : #4f6d7a
Ajoutez ensuite un nouveau dégradé d'arrière-plan au module de texte .
Couleur de fond dégradé à gauche : rgba(255,255,255,0)
Couleur de fond dégradé à droite : #559cad
Direction du gradient: 45deg
Position de départ : 75 %
Position finale : 0%
Cela crée une version plus sombre de la conception d'arrière-plan symétrique dans la conception de liste #2 pour une liste à une colonne. La clé de cette conception est de superposer des dégradés d'arrière-plan en en ajoutant un à la section, à la ligne et au module.
Paramètres de style pour la conception de liste #3
Pour ce troisième exemple, je veux vous montrer à quoi ressemble une liste alignée au centre. Et pour l'élément de liste ordonné, j'utiliserai un style décimal/nombre plus traditionnel.
Accédez aux paramètres du module de texte et mettez à jour les éléments suivants :
Police de la liste ordonnée : Poppins
Poids de la police de la liste ordonnée : lourd
Alignement du texte de la liste ordonnée : Centre
Taille du texte de la liste commandée : 4vw (ordinateur de bureau), 50px (tablette)
Couleur du texte de la liste ordonnée : #f4f1bb
Type de style de liste ordonnée : décimal
Position de style de liste ordonnée : à l'intérieur
Retrait de l'élément de la liste ordonnée : 0vw
(Remarque : si vous modifiez la position du style à l'intérieur, le numéro s'empilera au-dessus du texte de l'en-tête, ce qui est pratique pour cette conception.)
Poids de la police de liste non ordonnée : léger
Couleur du texte de la liste non ordonnée : #ffffff
Titre 5 Police : Lato
Titre 5 Poids de la police : fin
En-tête 5 Espacement des lettres : 6vw (ordinateur de bureau), 70px (tablette), 40px (smartphone)
Titre 5 Couleur du texte : #ffffff
Titre 5 Taille du texte : 6vw
Rembourrage personnalisé (bureau) : 15 % à gauche, 15 % à droite
Rembourrage personnalisé (tablette) : 5 % à gauche, 5 % à droite
Vous devez également retirer le rembourrage gauche personnalisé de 50 pixels sur le smartphone pour cette conception.
Voici la conception finale.
Conception de liste #4
Pour ce quatrième exemple, je vais opter pour un design plus « liste » (vous voyez ce que j'ai fait là-bas ?). Pour la liste ordonnée, je vais utiliser de grands chiffres romains majuscules dans la police Lato. Je vais également encadrer la liste en ajoutant une ombre de boîte à chaque module.
Paramètres de style pour la conception de liste n°4
Pour démarrer cette conception de liste, dupliquez la première section avec la conception de liste #1. Mettez ensuite à jour les paramètres du premier module de texte dans la nouvelle section comme suit :
Supprimer le dégradé d'arrière-plan.
Police de la liste ordonnée : Lato
Poids de la police de la liste commandée : léger
Couleur du texte de la liste commandée : #000000
Taille du texte de la liste commandée : 6vw
Type de style de liste ordonnée : supérieur-romain
Retrait de l'élément de la liste ordonnée : 0vw
Titre 5 Police : Lato
Titre 5 Poids de la police : gras
Style de police d'en-tête : Souligné
Titre 5 Couleur de soulignement : rgba(0,0,0,0.14)
Titre 5 Style de soulignement : double
Titre 5 Couleur du texte : #000000
Titre 5 Taille du texte : 40px
Rembourrage personnalisé : 3vw à gauche, 3vw à droite
Supprimez le rembourrage gauche personnalisé pour tablette et smartphone reporté de la conception précédente.
Position horizontale de l'ombre de la boîte : 6px
Position verticale de l'ombre de la boîte : 6px
Force de propagation de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte : 0px
Couleur de l'ombre : # 000000
Position de l'ombre de la boîte : ombre intérieure
Copiez les styles de module dans la deuxième colonne. Ensuite, mettez à jour la position de l'ombre de la boîte sur l'ombre extérieure.
Voici le résultat final.
C'est ça!
Dernières pensées
Après avoir construit et peaufiné vos listes html dans les exemples ci-dessus, vous devriez mieux comprendre comment exploiter la puissance des paramètres du module de texte comme un expert Divi. Vous n'aurez plus à vous contenter de conceptions de listes ennuyeuses dans votre contenu. J'espère que ces techniques vous inspireront pour créer des conceptions de liste étonnantes pour votre prochain projet.
J'aimerais voir quelques exemples de votre part, alors n'hésitez pas à partager dans les commentaires.
À votre santé!