Liberare la potenza del modulo di testo di Divi per i design di elenchi creativi

La creazione di design di elenchi unici è un aspetto importante del web design. I lettori apprezzano la struttura e l'estetica di un elenco ben progettato perché consente loro di elaborare le informazioni molto più rapidamente.

Con il modulo di testo di Divi, hai tutto il necessario per trasformare elenchi ordinari in bellissime opere d'arte. Le impostazioni del modulo di testo di Divi ti consentono di scegliere come target e modellare diversi elementi html all'interno dei tuoi contenuti, inclusi gli elenchi. E con alcune tecniche di progettazione, puoi sfruttare la potenza di queste opzioni per personalizzare i tuoi elenchi in modi sorprendenti.

In questo tutorial, ti mostrerò come creare design di elenchi unici in Divi.

Iniziamo.

Sbirciata

Ecco una sbirciatina ai quattro design dell'elenco che costruiremo in questo tutorial.

Ispirato dalle impostazioni del modulo di testo

Se sei come me, potresti tendere a trascurare alcune delle opzioni "nascoste" che si nascondono nel profondo di Divi Builder. Un modulo che ha alcuni tesori sepolti è il modulo di testo. Le impostazioni del modulo di testo hanno più schede che contengono opzioni di stile per diversi elementi html. Questo può essere uno strumento di progettazione estremamente conveniente e creativo. Queste schede includono opzioni per il corpo del testo, collegamenti, elenchi non ordinati, elenchi ordinati e citazioni.

E ci sono alcune gemme nascoste sotto queste schede che potresti non aver pensato di utilizzare nel tuo design. Ad esempio, sapevi che puoi modificare le opzioni di stile dell'elenco per gli elenchi non ordinati? Sono disponibili numerose opzioni uniche (18 per l'esattezza), inclusi numeri romani e decimali con uno zero iniziale.

Questi possono sembrare insignificanti, ma quando sfrutti le opzioni di progettazione, puoi produrre alcuni progetti davvero creativi.

Puoi anche scegliere come target lo stile di diversi livelli di intestazione (o tag) in ciascuna delle schede sotto le opzioni di stile dell'intestazione.

Questa capacità di indirizzare più elementi html nei tuoi contenuti apre alcune meravigliose possibilità. Spero che possano ispirare anche te.

Per ulteriori informazioni su questo, controlla l'aggiornamento delle funzionalità che spiega alcune di queste meravigliose opzioni di testo.

Creare la tua lista HTML

Un elenco html può essere "ordinato" (con numeri, numeri romani, ecc.) o "non ordinato" (con icone quadrate, icone circolari, ecc.). Per gli elenchi non ordinati, gli elementi dell'elenco verranno racchiusi in un tag "ul" ("ul" sta per "elenco non ordinato"). Per gli elenchi ordinati, gli elementi dell'elenco sono racchiusi in un tag "ol" ("ol" sta per "elenco ordinato"). Ogni elemento dell'elenco è racchiuso in un tag "li" ("li" per "elemento dell'elenco").

Ecco la struttura di base di un elenco ordinato:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Che per impostazione predefinita sarà simile al seguente:

1. Voce di elenco
2. Voce di elenco
3. Voce di elenco

Puoi effettivamente creare un elenco HTML utilizzando l'editor wysiwyg all'interno di un modulo di testo Divi. Assicurati di modificare nella scheda visiva e digita semplicemente gli elementi dell'elenco assicurandoti che ci sia un'interruzione di riga (premi invio) dopo ciascuno di essi. Quindi evidenzia il contenuto e fai clic su una delle icone dell'elenco nella parte superiore dell'editor.

Ora vai alla scheda testo per vedere come appare l'HTML:

Funziona bene per elenchi semplici, ma se vuoi creare elenchi annidati (un elenco all'interno di un elenco), è meglio crearli usando HTML (usando la scheda di testo) per evitare il mal di testa di provare a farlo nel wysiwyg editor (scheda visiva).

Ecco la struttura di base di un elenco nidificato che ha un elenco ordinato con ogni elemento dell'elenco che ha un elenco non ordinato nidificato.

<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>

Per impostazione predefinita, questo elenco html nidificato sarà simile a questo:

1. Voce di elenco ordinata
   • Voce di elenco non ordinata
2. Voce di elenco ordinata
   • Voce di elenco non ordinata
3. Voce di elenco ordinata
   • Voce di elenco non ordinata

Puoi anche aggiungere altri tag html nell'elenco. Ad esempio, possiamo racchiudere l'elemento dell'elenco ordinato in un tag h5. Il risultato sarà simile a questo:

<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>

Non preoccuparti, questo è complicato come otterrò per questo tutorial. Ma quello che devi capire è che questa struttura ha tre diversi tag (ol, ul e h5) che possono essere stilizzati indipendentemente l'uno dall'altro con le potenti impostazioni di design di Divi in ​​un modulo di testo.

Avremo bisogno di questa struttura un po' più tardi, ma per ora, mettiamo in funzione la nostra pagina per iniziare il nostro design nel visual builder.

Creazione della sezione e della riga per gli elenchi

Crea una nuova pagina e distribuisci Visual Builder. Quindi seleziona l'opzione Crea pagina da zero. Quindi crea una sezione regolare con una riga di due colonne.

Creazione dell'elenco HTML in un modulo di testo

Nella prima colonna della riga, aggiungi un nuovo modulo di testo. Nella casella del contenuto nelle impostazioni del testo, inserisci il seguente elenco HTML:

<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>

Questa struttura dovrebbe sembrare familiare da prima. Il testo dell'intestazione h5 saranno gli elementi dell'elenco ordinato e il testo fittizio "lorem ipsum" saranno gli elementi dell'elenco non ordinato nidificato.

Per impostazione predefinita sarà simile a questo:

Non troppo impressionante finora, lo so. Ma con questo contenuto in atto, ora possiamo iniziare la parte divertente della progettazione della nostra lista con Divi!

Nota importante: poiché ogni design è una versione modificata del primo design, sarebbe meglio iniziare con il primo design in questo tutorial e tenerli in ordine.

Lista Design #1

Per cominciare, diamo al nostro modulo di testo uno sfondo sfumato come segue:

Colore di sfondo sfumato a sinistra: rgba(0,0,0,0.04)
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Direzione gradiente: 90 gradi
Posizione di partenza: 25%
Posizione finale: 0%

Disegnare gli elementi dell'elenco ordinato

Ora vai sulla scheda del design e seleziona la scheda dell'elenco ordinato sotto l'interruttore Testo.

Quindi aggiorna quanto segue:

Carattere elenco ordinato: Abril Fatface
Peso del carattere dell'elenco ordinato: grassetto
Colore del testo dell'elenco ordinato: #559cad
Dimensioni del testo dell'elenco ordinato: 45 px
Altezza della riga dell'elenco ordinato: 1,6 em
Tipo di stile elenco ordinato: zero decimale iniziale
Stile elenco ordinato Posizione: esterno
Rientro articolo elenco ordinato: 2vw

Noterai che h5 e l'elenco non ordinato nidificato erediteranno lo stile dell'elenco ordinato genitore. Non preoccuparti, potrai sovrascrivere lo stile degli altri elementi.

Disegnare gli elementi dell'elenco non ordinati

Ora fai clic sulla scheda dell'elenco ordinato per modificare le seguenti impostazioni:

Carattere elenco non ordinato: Montserrat
Peso del carattere dell'elenco non ordinato: leggero
Colore testo elenco non ordinato:
Dimensioni testo elenco non ordinato: 18 px
Tipo di stile elenco non ordinato: nessuno
Rientro elemento elenco non ordinato: 0.01px

Disegnare l'intestazione H5

L'ultimo elemento che dobbiamo modellare è l'intestazione H5. Per farlo, vai alle opzioni sotto Testo intestazione e fai clic sulla scheda H5. Quindi aggiorna quanto segue:

Titolo 5 Carattere: Montserrat
Intestazione 5 Peso del carattere: Leggero
Intestazione 5 Stile carattere: maiuscolo (TT)
Intestazione 5 Colore testo: #4f6d7a
Titolo 5 Dimensioni testo: 5vw (desktop), 70px (tablet), 40px (smartphone)

Per completare il design del nostro modulo di testo, aggiungi la seguente imbottitura personalizzata:

Imbottitura personalizzata (desktop): 3vw in alto, 3vw in basso
Imbottitura personalizzata (tablet): 2vw sinistra
Imbottitura personalizzata (smartphone): 50px a sinistra

Salva le impostazioni.

Ora copia il modulo di testo e incollalo nella seconda colonna della riga. Potresti notare che i numeri dell'elenco devono essere modificati nel modulo di testo duplicato in modo che continui dall'elenco precedente. Vogliamo che il nostro secondo elenco di moduli di testo inizi con il numero 4 (invece di 1). Per fare questo dobbiamo aggiungere una piccola modifica alla nostra lista html. Vai alla casella del contenuto nelle impostazioni del modulo di testo e sostituisci il tag di apertura "ol" con il seguente:

<ol start="4">

Ora diamo un'occhiata al risultato finale.

Lista Design #2

Per questo secondo esempio di progettazione di elenchi, duplicherò la prima sezione che abbiamo creato per darci un vantaggio. Introdurrò anche uno sfondo interessante per il design dell'elenco utilizzando i gradienti di sfondo.

Creazione di un design sfumato di sfondo personalizzato

Nella sezione duplicata, aggiorna l'impostazione della sezione con il seguente sfondo sfumato:

Colore di sfondo sfumato a sinistra: #ffffff
Colore di sfondo sfumato a destra: rgba (155,29,32,0,08)
Direzione del gradiente: 45 gradi
Posizione di partenza: 50%
Posizione finale: 0%

Salva le impostazioni.

Ora aggiorna le impostazioni della riga con il seguente gradiente di sfondo:

Colore di sfondo sfumato a sinistra: rgba (155,29,32,0.08)
Colore di sfondo sfumato a destra: rgba (255,255,255,0)
Direzione del gradiente: 45 gradi
Posizione di partenza: 25%
Posizione finale: 0%

Colore di sfondo sfumato della colonna 2 a sinistra: rgba (255,255,255,0)
Colore sfondo sfumato colonna 2 a destra: #ffffff
Direzione gradiente colonna 2: 45 gradi
Colonna 2 Posizione iniziale: 65%
Posizione finale della colonna 2: 0%

La chiave di questi disegni a gradiente di sfondo è che hanno tutti la stessa direzione del gradiente di 45 gradi. Quindi puoi utilizzare la posizione iniziale per distanziare il disegno in modo uniforme.

Impostazioni di stile per la progettazione dell'elenco n. 2

A questo punto, possiamo davvero divertirci a modificare i design delle nostre liste in modi unici. Per questo secondo esempio, ti mostrerò quanto è facile trasformare il tuo design con poche modifiche minori. Vai al modulo di testo nella prima colonna e aggiorna le impostazioni come segue:

Per prima cosa elimina il gradiente di sfondo.
Peso carattere elenco non ordinato: medio
Colore testo elenco non ordinato: rgba(0,0,0,0.5)
Peso del carattere dell'elenco ordinato: normale
Colore testo elenco ordinato: #9b1d20
Intestazione 5 Peso del carattere: sottile
Intestazione 5 Colore del testo: rgba(0,0,0,0,8)
Intestazione 5 Dimensioni testo: 5vw (desktop)

Ora copia gli stili del modulo nel modulo di testo nella colonna di destra.

Ecco il progetto finale del nostro secondo esempio.

Lista Design #3

Per il terzo esempio, ho pensato che sarebbe stato utile fornire un esempio di progettazione di un elenco a una colonna centrato. Per creare questo disegno, duplica la seconda sezione di esempio. Nella nuova sezione duplicata, modifica la struttura delle righe in una colonna e quindi elimina il secondo modulo di testo.

Ora aggiorna le impostazioni della sezione con nuovi colori di sfondo sfumati:

Colore di sfondo sfumato a sinistra: #559CAD
Colore di sfondo sfumato a destra: #4f6d7a

Aggiorna le impostazioni della riga con un nuovo colore di sfondo sfumato sinistro:

Colore di sfondo sfumato a sinistra: #4f6d7a

Quindi aggiungi un nuovo gradiente di sfondo al modulo di testo .

Colore di sfondo sfumato a sinistra: rgba (255,255,255,0)
Colore di sfondo sfumato a destra: #559cad
Direzione del gradiente: 45 gradi
Posizione di partenza: 75%
Posizione finale: 0%

Ciò crea una versione più scura del design di sfondo simmetrico nel design dell'elenco n. 2 per un elenco di una colonna. La chiave di questo design è sovrapporre i gradienti di sfondo aggiungendone uno alla sezione, alla riga e al modulo.

Impostazioni di stile per la progettazione dell'elenco n. 3

Per questo terzo esempio, voglio mostrarti come appare un elenco allineato al centro. E per l'elemento dell'elenco ordinato, utilizzerò uno stile decimale/numero più tradizionale.

Vai alle impostazioni del modulo di testo e aggiorna quanto segue:

Carattere dell'elenco ordinato: Poppins
Peso del carattere dell'elenco ordinato: pesante
Allineamento del testo dell'elenco ordinato: al centro
Dimensioni del testo dell'elenco ordinato: 4vw (desktop), 50px (tablet)
Colore testo elenco ordinato: #f4f1bb
Tipo di stile elenco ordinato: decimale
Posizione stile elenco ordinato: interno
Rientro articolo elenco ordinato: 0vw

(Nota: la modifica della posizione dello stile all'interno farà sì che il numero si sovrapponga al testo dell'intestazione, il che è conveniente per questo design.)

Peso del carattere dell'elenco non ordinato: leggero
Colore testo elenco non ordinato: #ffffff

Intestazione 5 Carattere: Lato
Intestazione 5 Peso del carattere: sottile
Intestazione 5 Spaziatura lettere: 6vw (desktop), 70px (tablet), 40px (smartphone)
Intestazione 5 Colore del testo: #ffffff
Intestazione 5 Dimensioni testo: 6vw

Imbottitura personalizzata (desktop): 15% a sinistra, 15% a destra
Imbottitura personalizzata (tablet): 5% a sinistra, 5% a destra

Dovresti anche eliminare l'imbottitura sinistra personalizzata di 50 pixel sullo smartphone per questo design.

Ecco il disegno definitivo.

Lista Design #4

Per questo quarto esempio, andrò con un design più "lista" minimo (vedi cosa ho fatto lì?). Per l'elenco ordinato, userò grandi numeri romani maiuscoli nel carattere Lato. Incornicerò anche l'elenco aggiungendo un'ombra di riquadro a ciascun modulo.

Impostazioni di stile per il design dell'elenco n. 4

Per avviare questo design dell'elenco, duplica la prima sezione con il design dell'elenco n. 1. Quindi aggiorna le impostazioni del primo modulo di testo nella nuova sezione come segue:

Elimina gradiente di sfondo.

Carattere elenco ordinato: Lato
Peso del carattere dell'elenco ordinato: leggero
Colore testo elenco ordinato: #000000
Dimensioni del testo dell'elenco ordinato: 6vw
Tipo di stile elenco ordinato: alto-romano
Rientro articolo elenco ordinato: 0vw

Intestazione 5 Carattere: Lato
Intestazione 5 Peso del carattere: grassetto
Stile carattere intestazione: sottolineato
Colore sottolineatura titolo 5: rgba(0,0,0,0.14)
Intestazione 5 Stile sottolineato: doppio
Colore testo titolo 5: #000000
Intestazione 5 Dimensioni del testo: 40 px

Imbottitura personalizzata: 3vw sinistra, 3vw destra

Elimina l'imbottitura sinistra personalizzata per tablet e smartphone riportata dal design precedente.

Posizione orizzontale dell'ombra del riquadro: 6px
Posizione verticale dell'ombra del riquadro: 6px
Forza di diffusione dell'ombra della scatola: 0px
Forza sfocatura ombra scatola: 0px
Colore ombra: #000000
Posizione dell'ombra nella scatola: Ombra interna

Copia gli stili del modulo nella seconda colonna. Quindi aggiorna la posizione dell'ombra della scatola all'ombra esterna.

Questo è il risultato finale.

Questo è tutto!

Pensieri finali

Dopo aver creato e modificato i tuoi elenchi html negli esempi precedenti, dovresti avere una migliore comprensione di come sfruttare la potenza delle impostazioni del modulo di testo come un esperto Divi. Non dovrai più accontentarti di noiosi design di elenchi nei tuoi contenuti. Spero che queste tecniche ti ispirino a creare fantastici design di elenchi per il tuo prossimo progetto.

Mi piacerebbe vedere alcuni esempi da te, quindi non esitare a condividere i commenti.

Saluti!