Tutto ciò che devi sapere sul modulo di Elenco delle icone di Divi 5

Uno degli ultimi aggiornamenti di Divi 5 ha introdotto le giostre e le animazioni Lottie, oltre a qualcosa che ogni sito può usare: il nuovo modulo Elenco Icons. Invece di semplici punti elenco, è possibile creare elenchi in stile con icone significative che aggiungono chiarezza e fascino visivo.

Pensa alle funzionalità su una pagina del prodotto, passi in un processo, servizi in una tabella dei prezzi o persino benefici in una pagina di destinazione. Il modulo Elenco Icons rende tutto ciò che è più facile da progettare e più coinvolgente per i visitatori.

In questo post, tratteremo tutto ciò che devi sapere sul modulo Elenco Icons, dalle funzionalità ai casi d'uso pratici, in modo da poter aggiornare le tue liste e migliorare i tuoi siti Divi.

Qual è il modulo Elenco Icons?

Il modulo Elenco Icon in Divi 5 è progettato per creare elenchi interessanti e strutturati che migliorano la progettazione del tuo sito. Permettendoti di accoppiare ogni elemento dell'elenco con un'icona univoca, questo modulo trasforma il testo semplice in contenuti professionali e coinvolgenti.

Prima di Divi 5, creazione di elenchi stilizzati nei moduli di formattazione o blurb richiesti Divi, che era meno efficiente. Il modulo Elenco ICON colma questa lacuna, offrendo una soluzione dedicata che è intuitiva e altamente personalizzabile.

Caratteristiche chiave

Il modulo Elenco Icons ha caratteristiche che lo rendono un'ottima aggiunta a Divi 5. Ecco le sue caratteristiche chiave:

Creazione di facile elenco

Crea rapidamente elenchi aggiungendo elementi e assegnando icone dalla vasta libreria di icone di Divi o caricando icone personalizzate. L'interfaccia intuitiva del modulo consente di creare elenchi lucidati in pochi minuti, risparmiando tempo rispetto alla formattazione manuale.

Ampie opzioni di personalizzazione

Scegli tra centinaia di icone integrate, regola le dimensioni, il colore e il posizionamento per creare un look coeso che si allinea al design del tuo sito.

Sfrutta le potenti impostazioni di design di Divi per personalizzare caratteri, colori di testo, spaziatura, allineamento e sfondi. Puoi anche aggiungere effetti o animazioni per rendere le tue liste più interattive.

Come utilizzare il modulo Elenco Icons

Iniziare con il modulo Elenco Icon Elenco di Divi 5 è facile. Crea una nuova pagina o apri una esistente. Fare clic per aggiungere un nuovo modulo e selezionare Elenco Icon .

Dopo aver aggiunto il modulo, vedrai tre elementi di elenco di icone nella scheda Contenuto. Cominciamo facendo clic sul primo per modificarlo.

Nella scheda Contenuto, immettere un titolo nel campo di testo .

Quindi, espandi la scheda a discesa Icon. Qui, puoi scegliere tra centinaia di icone nella Biblioteca Divi. Puoi cercare icone o scorrere per trovare quello che desideri usare.

Il modulo Elenco Icons consente di aggiungere collegamenti alle singole voci dell'elenco, rendendo facile il collegamento ad altre pagine, allegati e altro ancora.

La scheda Design è dove è possibile modellare gli elementi dell'elenco delle icone. Nel menu a discesa ICON, assegna un colore e una dimensione dell'icona.

Nella scheda Sfondo, è possibile assegnare all'icona un colore di sfondo, aggiungere un bordo o un'ombra della scatola e regolare la spaziatura.

Alcune altre opzioni includono il testo, in cui controlli l'allineamento del testo o aggiungi un'ombra di testo. Tuttavia, per modellare il testo, scegli il menu a discesa del testo del corpo. Puoi assegnare un carattere, peso, stile, allineamento del testo, colore, dimensioni e altro lì.

Come tutti gli altri moduli Divi, puoi controllare le dimensioni, la spaziatura, il bordo e le ombre della scatola e aggiungere filtri, transizioni o animazioni.

Una volta che hai disegnato la prima elemento dell'elenco delle icone, puoi facilmente copiarla, modificare l'icona e aggiornare il testo.

Aggiunta di spazio tra gli elementi dell'elenco di icone

Nella sezione precedente, abbiamo dimostrato come aggiungere elenchi di icone. In questa sezione, esamineremo come regolare le proprietà di layout utilizzando il sistema di layout Flexbox di Divi 5. Come puoi vedere, potremmo usare un po 'di spazio tra ciascuno dei nostri elementi di elenco di icone.

Nelle impostazioni del modulo Elenco delle icone principali, fare clic sulla scheda Design. Individua il menu a discesa layout ed espanderlo per rivelare le impostazioni.

Per impostazione predefinita, Flex è selezionato in stile layout. Ciò consente di utilizzare le impostazioni Flexbox di Divi 5 per controllare la spaziatura, le direzioni del layout e l'allineamento. Per aggiungere la spaziatura tra ogni elemento dell'elenco delle icone, è sufficiente regolare il divario verticale. Questo aggiunge spazio alla respirazione tra ogni articolo, dando al nostro elenco più appello visivo.

Impostazioni di design universali per tutti gli elementi dell'elenco delle icone

Oltre allo styling Elenco Icon Elenco elementi individualmente, è possibile utilizzare le impostazioni di progettazione del modulo principale per aggiungere stili a ogni elemento elenco di icone contemporaneamente. Ad esempio, se vuoi che tutte le tue icone abbiano lo stesso colore, testo o stili di sfondo, puoi farlo a livello di modulo.

Sia che tu voglia elencare gli elementi individualmente o nel suo insieme, il modulo elenco di icone in Divi 5 fornisce un ottimo modo per mostrare le informazioni in un modo più intuitivo.

Esempi pratici che utilizzano il modulo Elenco Icons

Il modulo Elenco Icon è versatile e può migliorare le diverse aree del tuo sito Web. Ecco alcuni esempi pratici per ispirare i tuoi progetti.

Blog di viaggio

Il modulo Elenco Icons offre un ottimo modo per creare contenuti coinvolgenti sul tuo blog di viaggio. Puoi usarlo per evidenziare le categorie sul tuo blog, itinerari di viaggio, consigli di imballaggio o punti salienti della destinazione. Inoltre, è possibile combinare effetti di mouse e utilizzare icone diverse per ciascun elemento dell'elenco per presentare informazioni in modo chiaro ed elegante.

Funzionalità su un sito commerciale

Usa il modulo Elenco Icon per mostrare i servizi della tua azienda. Assegna icone pertinenti e personalizza i colori per abbinare il tuo marchio. Puoi anche aggiungere collegamenti alle pagine di servizio per una facile navigazione.

Guida di processo passo-passo

Crea un elenco che delinea i passaggi di un processo, come "come iscriversi". Utilizzare checkmark per guidare visivamente gli utenti attraverso ogni passaggio, rendendo le informazioni complesse più digeribili.

Pagine del negozio di e-commerce

Per i siti di e-commerce, utilizzare il modulo Elenco Icon per evidenziare le funzionalità del tuo negozio. Abbina i moduli WOO di Divi 5 per creare una pagina di categoria di prodotti coesiva.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Utilizzare il modulo Elenco Icons in Divi 5

Il modulo Elenco Icon in Divi 5 offre un ottimo modo per creare elenchi eleganti e funzionali con scarso sforzo. La sua facilità d'uso, le opzioni di personalizzazione robuste e l'integrazione senza soluzione di continuità con le nuove funzionalità di Divi 5 lo rendono un must per gli utenti Divi. Sia che tu stia mettendo in evidenza i servizi, guidando gli utenti attraverso un processo o mettendo in mostra le funzionalità del prodotto, questo modulo ti aiuta a fornire risultati professionali che coinvolgono il tuo pubblico.

Pronto a provarlo? Scarica oggi l'ultimo Alpha Public Divi 5 ed esplora tu stesso il modulo Elenco Icons. Resta sintonizzato per altri aggiornamenti Divi 5 mentre implementamo nuove funzionalità.