Tout ce que vous devez savoir sur le module de liste d'icônes de Divi 5

L'une des dernières mises à jour Divi 5 a introduit des carrousels et des animations Lottie, ainsi que quelque chose que chaque site peut utiliser: le nouveau module de liste d'icônes. Au lieu de puces simples, vous pouvez créer des listes stylisées avec des icônes significatives qui ajoutent de la clarté et de l'attrait visuel.

Pensez aux fonctionnalités sur une page de produit, aux étapes d'un processus, aux services dans une table de prix ou même aux avantages sur une page de destination. Le module de liste d'icônes facilite tout cela plus facile à concevoir et plus engageant pour les visiteurs.

Dans cet article, nous couvrirons tout ce que vous devez savoir sur le module de liste d'icônes, des fonctionnalités aux cas d'utilisation pratiques, afin que vous puissiez mettre à niveau vos listes et améliorer vos sites Divi.

Quel est le module de liste d'icônes?

Le module de liste d'icônes dans Divi 5 est conçu pour créer des listes structurées attrayantes qui améliorent la conception de votre site. En vous permettant d'associer chaque élément de liste avec une icône unique, ce module transforme du texte brut en contenu professionnel et engageant.

Avant Divi 5, la création de listes stylisées dans des modules de texte de mise en forme ou de texte de formation requis, ce qui était moins efficace. Le module de liste d'icônes comble cette lacune, offrant une solution dédiée conviviale et hautement personnalisable.

Caractéristiques clés

Le module de liste d'icônes a des fonctionnalités qui en font un excellent ajout à Divi 5. Voici ses principales caractéristiques:

Création de liste facile

Créez des listes rapidement en ajoutant des éléments et en attribuant des icônes à partir de la vaste bibliothèque d'icônes de Divi ou en téléchargeant des icônes personnalisées. L'interface intuitive du module vous permet de construire des listes polies en quelques minutes, ce qui permet de gagner du temps par rapport au formatage manuel.

Options de personnalisation étendues

Choisissez parmi des centaines d'icônes intégrées, ajustez leur taille, leur couleur et leur placement pour créer un look cohérent qui s'aligne sur la conception de votre site.

Tirez parti des paramètres de conception puissants de Divi pour personnaliser les polices, les couleurs de texte, l'espacement, l'alignement et les arrière-plans. Vous pouvez également ajouter des effets ou des animations de survol pour rendre vos listes plus interactives.

Comment utiliser le module de liste d'icônes

Il est facile de commencer le module de liste d'icônes de Divi 5. Créez une nouvelle page ou ouvrez une. Cliquez pour ajouter un nouveau module et choisissez la liste des icônes .

Après avoir ajouté le module, vous verrez trois éléments de liste d'icônes dans l'onglet Contenu. Commençons par cliquer sur le premier pour le modifier.

Dans l'onglet Contenu, entrez un titre dans le champ de texte .

Ensuite, développez l'onglet déroulant icône. Ici, vous pouvez choisir parmi des centaines d'icônes de la bibliothèque Divi. Vous pouvez rechercher des icônes ou faire défiler pour trouver celui que vous souhaitez utiliser.

Le module de liste d'icônes vous permet d'ajouter des liens aux éléments de liste individuelle, ce qui facilite le lien vers d'autres pages, pièces jointes, etc.

L'onglet Design est l'endroit où vous pouvez styliser vos éléments de liste d'icônes. Dans le menu déroulant icône, attribuez une couleur et une taille d'icône.

Dans l'onglet d'arrière-plan, vous pouvez attribuer une couleur d'arrière-plan à votre icône, ajouter une bordure ou une ombre de boîte et ajuster l'espacement.

Certaines autres options incluent le texte, où vous contrôlez l'alignement du texte ou ajoutez une ombre de texte. Cependant, pour styliser le texte, choisissez le menu déroulant du texte du corps. Vous pouvez attribuer une police, un poids, un style, un alignement du texte, une couleur, une taille, etc.

Comme tous les autres modules Divi, vous pouvez contrôler le dimensionnement, l'espacement, la bordure et les ombres de boîte et ajouter des filtres, des transitions ou des animations.

Une fois que vous avez stylé le premier élément de liste d'icônes, vous pouvez facilement le copier, modifier l'icône et mettre à jour le texte.

Ajout d'espace entre les éléments de la liste des icônes

Dans la section précédente, nous avons démontré comment ajouter des éléments de liste d'icônes. Dans cette section, nous examinerons comment ajuster les propriétés de mise en page à l'aide du système de mise en page Flexbox de Divi 5. Comme vous pouvez le voir, nous pourrions utiliser un peu d'espace entre chacun de nos éléments de liste d'icônes.

Dans les paramètres du module de liste d'icônes principales, cliquez sur l'onglet Conception. Localisez le menu déroulant de mise en page et développez-le pour révéler les paramètres.

Par défaut, Flex est sélectionné dans le style de mise en page. Cela vous permet d'utiliser les paramètres Flexbox de Divi 5 pour contrôler l'espacement, les directions de mise en page et l'alignement. Pour ajouter l'espacement entre chaque élément de liste d'icônes, ajustez simplement l'écart vertical. Cela ajoute de la respiration entre chaque élément, donnant à notre liste plus d'attrait visuel.

Paramètres de conception universels pour tous les éléments de liste d'icônes

En plus des éléments de liste d'icônes de style individuellement, vous pouvez utiliser les paramètres de conception du module principal pour ajouter des styles à chaque élément de liste d'icônes à la fois. Par exemple, si vous voulez que toutes vos icônes aient la même couleur, le même texte ou les mêmes styles d'arrière-plan, vous pouvez le faire au niveau du module.

Que vous souhaitiez styliser les éléments de liste individuellement ou dans son ensemble, le module de liste d'icônes de Divi 5 offre un excellent moyen de présenter des informations de manière plus conviviale.

Exemples pratiques à l'aide du module de liste d'icônes

Le module de liste d'icônes est polyvalent et peut améliorer différents domaines de votre site Web. Voici quelques exemples pratiques pour inspirer vos créations.

Blogs de voyage

Le module de liste d'icônes offre un excellent moyen de créer du contenu engageant sur votre blog de voyage. Vous pouvez l'utiliser pour mettre en évidence les catégories sur votre blog, les itinéraires de voyage, les conseils d'emballage ou les faits saillants de destination. De plus, vous pouvez combiner des effets de survol et utiliser différentes icônes pour chaque élément de liste pour présenter des informations de manière claire et élégante.

Fonctionnalités sur un site d'entreprise

Utilisez le module de liste d'icônes pour présenter les services de votre entreprise. Attribuez des icônes pertinentes et personnalisez les couleurs pour correspondre à votre marque. Vous pouvez également ajouter des liens vers des pages de service pour une navigation facile.

Guide de processus étape par étape

Créez une liste décrivant les étapes d'un processus, comme «Comment s'inscrire». Utilisez Checkmarks pour guider visuellement les utilisateurs à travers chaque étape, ce qui rend les informations complexes plus digestibles.

Pages de magasin de commerce électronique

Pour les sites de commerce électronique, utilisez le module de liste d'icônes pour mettre en évidence les fonctionnalités de votre magasin. Associez les modules WOO de Divi 5 pour créer une page de catégorie de produit cohésive.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Utilisez le module de liste d'icônes dans Divi 5

Le module de liste d'icônes dans Divi 5 offre un excellent moyen de créer des listes élégantes et fonctionnelles avec peu d'effort. Sa facilité d'utilisation, ses options de personnalisation robustes et son intégration transparente avec les nouvelles fonctionnalités de Divi 5 en font un incontournable pour les utilisateurs Divi. Que vous mettiez des services, en guidant les utilisateurs à travers un processus ou en présentant des fonctionnalités de produit, ce module vous aide à fournir des résultats professionnels qui engagent votre public.

Prêt à l'essayer? Téléchargez le dernier divi 5 public Alpha aujourd'hui et explorez vous-même le module de liste d'icônes. Restez à l'écoute pour plus de mises à jour Divi 5 pendant que nous déploions de nouvelles fonctionnalités.