Développer la fonction puissante du module de texte Divi et concevoir des listes créatives

La création d’une conception de liste unique est un aspect important de la conception du Web. Les lecteurs apprécient la structure et l’esthétique d’une liste bien conçue qui leur permet de traiter l’information plus rapidement. Avec le module texte de Divi, vous avez tout ce dont vous avez besoin pour transformer une liste normale en une belle œuvre d’art. Les paramètres du formulaire texte de Divi vous permettent d’établir des cibles et des modèles pour différents éléments HTML du contenu, y compris les listes. Avec quelques conseils de conception, vous pouvez utiliser la puissance de ces options pour personnaliser la liste de façon étonnante.
Dans ce tutoriel, je vais vous montrer comment créer un design de liste unique dans Divi. On y va. Voici quatre dessins de la liste que nous allons construire dans ce tutoriel. Inspiré par les paramètres du formulaire texte, si vous êtes comme moi, vous pouvez ignorer certaines des options \ Il y a des pierres précieuses cachées sous ces cartes que vous n’avez peut – être pas pensé à utiliser dans votre design. Par exemple, saviez – vous que vous pouvez modifier les options de style de liste pour les listes non ordonnées? Il existe de nombreuses options uniques (18 pour être précis), y compris des chiffres romains et des décimales avec des zéros de départ. Ceux – ci peuvent sembler triviaux, mais lorsque vous utilisez des options de conception, vous pouvez produire des projets vraiment créatifs. Vous pouvez également cibler les styles de différentes couches de titre (ou étiquettes) dans chaque onglet sous Options
Leur site éblouissant, l’élite dévouée. Entier NEC Odio. La déesse de la liberté. Diamètre. Sed nisi. Nulla quis SEM in nibh ELEMENTUM implementiet.

Cette installation devrait sembler familière. H5 le texte d’en – tête sera l’élément de la liste triée, et le texte fictif \
Par défaut, il sera comme suit:

2. Je sais que ce n’est pas très impressionnant jusqu’à présent. Mais avec tout ce contenu, nous pouvons maintenant commencer à concevoir des Parties intéressantes de la liste avec Divi! Important: puisque chaque dessin est une version modifiée du premier dessin, il est préférable de commencer par le premier dessin dans ce tutoriel et de le garder en ordre. Liste de conception # 1

Tout d’abord, nous fournissons le fond de rampe suivant pour le module texte: couleur de fond de rampe gauche: rgba (0,0,0,0,04) couleur de fond de rampe droite: rgba (255255255,0) Direction de rampe: 90 degrés position de départ: 25% position de fin: 0%

3. Dessiner des éléments à partir d’une table de séquence existante va maintenant à l’onglet conception et sélectionnez l’onglet Liste ordonnée sous le commutateur de texte.

Puis mettre à jour ce qui suit: caractères de la Liste ordonnée: Abril fatface avec le poids de la police de la table de séquence: gras avec la couleur du texte de la table de séquence: # 559cad taille du texte de la Liste ordonnée: 45 Px avec la hauteur de la ligne de la table de séquence: 1.6 em avec le type de style de la table de séquence: zéro décimal avec le style initial de la table de séquence: entrées d’éléments externes avec la table de séquence: 2vw

Vous remarquerez que H5 et les listes imbriquées non ordonnées hériteront du style de table de séquence parent. Ne vous inquiétez pas, vous pouvez outrepasser le style d’autres éléments.
Dessiner les éléments de la liste non ordonnée Cliquez maintenant sur l’onglet avec la liste des séquences pour modifier les paramètres suivants: caractères de la liste non ordonnée: poids de la police de la liste de Montserrat
Désordre: liste de désordre peu profonde couleur du texte: liste de désordre taille du texte: 18 Px liste de désordre type de style: aucune entrée d’entrée de table de désordre: 0.01px Le dernier élément que nous devons modéliser pour dessiner l’en – tête H5 est l’en – tête H5. Pour ce faire, allez aux options sous le texte du titre et cliquez sur l’onglet H5. Puis mettez à jour ce qui suit: title 5 Characters: Montserrat title 5 font Weight: Light title 5 font style: capital (TT) title 5 text color: # 4f6d7a title 5 text size: 5vw (Desktop), 70px (tablette), 40px (smartphone)

Pour compléter la conception du formulaire texte, ajoutez les remplissages personnalisés suivants: remplissage personnalisé (bureau): 3vw en haut, 3vw en bas remplissage personnalisé (tablette): 2vw remplissage personnalisé à gauche (smartphone): 50px à gauche
Enregistrer les paramètres. Copiez maintenant le formulaire texte et collez – le dans la deuxième colonne de la ligne. Vous remarquerez peut – être que vous devez changer le numéro de la liste dans un formulaire de texte en double pour continuer à partir de la liste précédente. Nous voulons que la deuxième liste de formulaires textuels commence par le numéro 4 (au lieu de 1). Pour ce faire, nous devons ajouter un petit changement à la liste HTML. Allez dans la zone de contenu dans les paramètres du formulaire de texte et remplacez la marque de début « ol» par ce qui suit:
1. Examinons maintenant le résultat final.
   • Liste de conception # 2

   Pour le deuxième exemple de conception de liste, je vais copier la première partie que nous avons créée pour fournir un avantage. J’introduirai également un arrière – plan intéressant pour la conception de listes qui utilise des gradients d’arrière – plan. Créer un fond de rampe personnalisé dans la section copier et mettre à jour les paramètres de la Section avec le fond de rampe suivant: couleur de fond de rampe gauche: # FFFFFF couleur de fond de rampe droite: Direction rgba (155,29,32,0,08)
   – Oui.

   Maintenant, Rafraîchissez les paramètres de la Section avec la nouvelle couleur de fond de rampe: couleur de fond de rampe gauche: # 559cad couleur de fond de rampe droite: # 4f6d7a Rafraîchissez les paramètres de ligne avec la nouvelle couleur de fond de rampe gauche: couleur de fond de rampe gauche: # 4f6d7a, puis ajoutez une nouvelle rampe de fond au formulaire de texte. Couleur de fond de la rampe gauche: rgba (255255255,0) couleur de fond de la rampe droite: # 559cad direction de la rampe: 45 degrés position de départ: 75% position de fin: 0% ceci créera une version plus foncée de la conception de fond symétrique dans la liste 2 pour la liste des colonnes. La clé de cette conception est de superposer les gradients de fond en ajoutant des gradients de fond dans les sections, les lignes et les modules.

Dans le troisième exemple, je veux vous montrer à quoi ressemble une liste centrée. Pour trier les éléments de la liste, j’utiliserai un style décimal \/ numérique plus traditionnel. Aller aux paramètres du formulaire de texte et mettre à jour ce qui suit: police de liste ordonnée: Poppins avec poids de police de table de séquence: réajuster l’alignement du texte de table de séquence: Centre avec taille de texte de table de séquence: 4vw (bureau), 50px (Tablet) ordered List text color: # f4f1bb has Sequence Sheet style type: Decimal has Sequence Sheet style Location: Internal has Sequence Sheet entry Return: 0vw (Note: changer la position de style interne entraînera un chevauchement entre le numéro et le texte du titre, ce qui facilite la conception.) Liste non ordonnée poids de la police: liste légère non ordonnée couleur du texte: # FFFFFF titre 5 caractères: côté titre 5 poids de la police: titre fin 5 espacement des lettres: 6vw (bureau), 70px (tablette), 40px (smartphone) Titre 5 couleur du texte: # FFFFFF titre 5 taille du texte: 6vw remplissage personnalisé (bureau)
: 15% à gauche, 15% à droite remplissage personnalisé (tablette): 5% à gauche, 5% à droite ce design devrait également supprimer le remplissage personnalisé de 50 pixels à gauche sur le smartphone. C’est le dernier dessin.

2. Liste de conception # 4
   Pour le quatrième exemple, je vais utiliser le plus petit modèle de \
   En tant qu’expert Divi, il a amélioré sa compréhension de la façon d’utiliser les fonctions de configuration des modules de texte. Vous n’avez plus à vous contenter de listes ennuyeuses dans le contenu. J’espère que ces technologies vous encourageront à créer une excellente conception de liste pour votre prochain projet. J’adorerais voir certains de vos exemples, alors n’hésitez pas à partager vos commentaires. Bonjour!