Come creare una timeline con il modulo Blurb di Divi

In questo post, ti mostreremo come creare facilmente una linea temporale semplice ma elegante con i moduli Blurb di Divi. Combineremo le diverse opzioni fornite dai moduli e dalle righe per ottenere il risultato che puoi visualizzare di seguito. L'esempio che condivideremo si basa solo sulle opzioni Divi integrate, il che significa che non sarà necessario aggiungere alcun codice CSS aggiuntivo! Ci stiamo anche assicurando che abbia un bell'aspetto sia su desktop che su dispositivi mobili.

Risultato

L'aspetto di una timeline si ottiene con due elementi di design; la linea che attraversa tutti e tre i moduli Blurb e i numeri. La versione desktop si presenta così:

E la versione mobile si presenta così:

Iniziamo!

Come creare una timeline con il modulo Blurb di Divi

Iscriviti al nostro canale Youtube

Aggiungi sezione standard

Colore di sfondo della sezione

Inizia aggiungendo una nuova sezione standard e usando 'rgba(0,0,0,0.12)' come colore di sfondo.

Imbottitura della sezione

Vai alla scheda Design e usa un'imbottitura superiore di '300px'.

Aggiungi riga a tre colonne (linea temporale)

Sfondi colonna

Una volta creata la sezione, aggiungi una riga a tre colonne. Nella scheda Contenuto di quella riga, utilizza "#e09900" come colore di sfondo della colonna 1, "#0c71c3" come colore di sfondo della colonna 2 e "#8300e9" come colore di sfondo della colonna 3.

Dimensionamento

Passa alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Dimensionamento:

• Rendi questa riga FulldWidth: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Margine e riempimento personalizzati

Quindi, aggiungi il seguente riempimento personalizzato e margine personalizzato alla riga:

• Imbottitura superiore: 1px
• Imbottitura inferiore: 0px
• Margine inferiore: -200 px

E aggiungi "3px" all'imbottitura superiore e inferiore di ogni colonna.

Disattiva su tablet e telefono

Infine, disabilita la riga sia su tablet che su telefono.

Aggiungi un'altra riga a tre colonne (moduli Blurb)

Sfondo sfumato di colonna

Una volta creata la prima riga a tre colonne, puoi andare avanti e creare la seconda proprio sotto di essa (condividono la stessa sezione). Ognuna delle colonne necessita di uno sfondo sfumato con le stesse impostazioni ma con un primo colore diverso:

• Primo colore: #e09900 (colonna 1), #0c71c3 (colonna 2), #8300e9 (colonna 3)
• Secondo colore: rgba (255, 255, 255, 0)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 73%
• Posizione finale: 92%

Crea riga a larghezza intera

Quindi, vai alla scheda Design e abilita l'opzione "Rendi questa riga a larghezza intera".

Imbottitura personalizzata riga

Apri la sottocategoria di spaziatura e utilizza il seguente riempimento personalizzato e margine personalizzato per la riga:

• Imbottitura superiore: 0px
• Imbottitura destra: 60px
• Imbottitura inferiore: 100 px
• Imbottitura sinistra: 60px
• Margine superiore: -100 px

Aggiungi anche '5px' al padding superiore di ogni colonna.

Modulo Blurb

Una volta completate le impostazioni della riga, puoi aggiungere un modulo Blurb alla prima colonna della riga appena creata. All'interno della sottocategoria Immagine e icona della scheda Contenuto, abilita l'opzione "Usa icona" e seleziona un'icona a scelta.

Scorri verso il basso la stessa scheda e usa "#f4f4f4" come colore di sfondo.

Vai alla scheda Design e apporta le seguenti modifiche alla sottocategoria Immagine e icona:

• Colore icona: #e09900
• Posizionamento immagine/icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 50 px

All'interno della sottocategoria Testo, assicurati che l'Orientamento del testo a sinistra sia abilitato.

Le opzioni per la sottocategoria Testo intestazione sono le seguenti:

• Carattere intestazione: Creta Round
• Allineamento del testo dell'intestazione: a sinistra
• Dimensione carattere intestazione: 32px
• Altezza riga di intestazione: 1em

Quindi, apri la sottocategoria Corpo del testo e utilizza le seguenti impostazioni:

• Allineamento del corpo del testo: a sinistra
• Dimensione carattere corpo: 12px
• Altezza della linea del corpo: 1,7 em

Useremo anche un bordo con le seguenti impostazioni:

• Usa bordo: Sì
• Colore bordo: #000000
• Larghezza bordo: 2px
• Stile bordo: punteggiato

Quindi, apri la sottocategoria Ridimensionamento e usa "279 px" per la larghezza del contenuto e "100%" per la larghezza.

Infine, aggiungi "30px" al padding superiore, destro, inferiore e sinistro.

Modulo di testo

Dopo aver aggiunto e modificato il modulo Blurb, vai avanti e aggiungi un modulo di testo proprio sotto di esso. Anche il modulo di testo avrà bisogno di uno sfondo sfumato:

• Primo colore: #e09900
• Secondo colore: rgba (255, 255, 255, 0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 20%
• Posizione finale: 24%

Passa alla scheda Progettazione e utilizza le seguenti impostazioni per la sottocategoria Testo:

• Dimensione carattere del testo: 21 px
• Colore del testo: #FFFFFF
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Apri la sottocategoria Dimensionamento, usa una larghezza di "48%" e seleziona l'allineamento del modulo corretto.

Infine, usa un margine superiore di "-100 px" e aggiungi "50 px" al padding superiore e inferiore.

Clona Blurb e modulo di testo

Una volta completata la prima colonna, puoi clonare entrambi i moduli e posizionarli nelle altre due colonne. Le uniche cose che dovrai cambiare è l'icona del blurb, il colore del blurb e il primo colore sfumato del modulo di testo in "#0c71c3" per la seconda colonna e "#8300e9" per l'ultima colonna.

Disattiva su tablet e telefono

Una volta completata questa seconda riga, assicurati di disabilitarla anche per telefono e tablet.

Clona riga a tre colonne (tablet e telefono)

La versione della timeline su tablet e telefono è leggermente diversa. Clona la riga con i blurb che hai creato nella parte precedente di questo post e segui i passaggi successivi per adattarla al telefono e al tablet.

Aggiungi sfondo sfumato riga

La riga su tablet e telefono avrà bisogno del seguente sfondo sfumato:

• Primo colore: rgba(0,0,0,0.7)
• Secondo colore: rgba (255, 255, 255, 0)
• Tipo di gradiente: lineare
• Direzione gradiente: 90 gradi
• Posizione di partenza: 1%
• Posizione finale: 0%

Imbottitura riga

Elimina tutto il padding personalizzato e il margine che è stato utilizzato nella versione desktop e aggiungi "100px" al padding superiore.

Disabilita sul desktop

Infine, invece di disabilitare la riga su telefono e tablet, disabilitala invece sul desktop.

Risultato

Dopo aver seguito tutti i passaggi nel post, dovresti essere in grado di ottenere il seguente risultato sul desktop:

E il seguente risultato su tablet e telefono:

Pensieri finali

In questo post, ti abbiamo mostrato come puoi creare una semplice sequenza temporale del tuo modulo Blurb utilizzando nient'altro che le opzioni Divi integrate. Due fattori che aiutano a identificare i Moduli Blurb come una linea temporale sono la linea che collega tutti e tre i Moduli Blurb e i numeri. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!