Evidenziazione del plug-in Divi - Modulo Divi Timeline

Uno dei modi più interessanti per mostrare le informazioni cronologiche è con una timeline. Che si tratti di istruzioni passo passo, un elenco di esperienze per un curriculum, un elenco di progetti per un portfolio o persino post di blog, le tempistiche possono rendere le informazioni visivamente accattivanti. Puoi creare le tue linee temporali all'interno di Divi Builder utilizzando un plug-in chiamato Divi Timeline Module.

Divi Timeline Module, che è un plug-in di terze parti di Tortoise IT tramite Elegant Marketplace, aggiunge diversi nuovi moduli (il modulo principale e tre moduli complementari) a Divi Builder per creare due diversi tipi di timeline reattive:

1. Uno in cui crei contenuti per ogni punto sulla timeline. Ogni elemento nella timeline può avere il proprio contenuto, collegamenti, colori, caratteri, icona, ecc.
2. Uno che utilizza i tuoi contenuti esistenti da pagine, post, media o progetti.

In questa panoramica passerò attraverso la creazione di entrambi i tipi di timeline e poi mostrerò un esempio di creazione di una pagina del blog. Per questa panoramica sto usando immagini gratuite di Unsplash.com. Iniziamo.

Installazione del plug-in Divi Timeline Module

L'installazione è semplice. Basta caricare il plug-in e attivarlo come faresti con qualsiasi plug-in. Non sono necessarie altre impostazioni.

Creare una linea temporale

Ci sono quattro moduli: (Post) – Vertical , Content , Featured Image e Vertical . Sebbene funzioni con layout a più colonne, i layout a colonna singola funzionano meglio. Timeline – Verticale o Timeline (Post) – Verrà utilizzato verticale all'interno delle pagine. Il resto verrà utilizzato per creare un layout.

Timeline verticale

Aggiungi il modulo Timeline - Verticale a una riga a colonna singola.

Nelle Impostazioni generali possiamo aggiungere un nuovo elemento della timeline, fornire un titolo per la timeline e scegliere il colore della timeline. Fare clic su Aggiungi nuovo elemento della sequenza temporale per creare ciascuno degli elementi della sequenza temporale.

Facendo clic su Aggiungi nuovo elemento della sequenza temporale si apre un editor di contenuti completo di testo, media, etichetta, pulsante Mostra altro, icona, colore dell'icona, colore di sfondo e animazione di immagine/icona. Include anche tutte le impostazioni di progettazione avanzate standard e CSS personalizzati .

Aggiungi tutti gli elementi della sequenza temporale che desideri. Puoi vedere qui che ho aggiunto cinque elementi e cambiato il colore della linea centrale in verde. All'interno degli elementi della timeline ho selezionato icone e colori per ogni elemento.

Risultato verticale della sequenza temporale

Ecco la cronologia rapida che ho creato. Ha cinque elementi, ognuno con il proprio contenuto e le proprie icone. Il colore che ho scelto per la linea è stato aggiunto anche nella parte inferiore delle finestre del contenuto. Ho aggiunto un'immagine di sfondo alla sezione che contiene il modulo.

Ovviamente, utilizzando le impostazioni di progettazione avanzate, il modulo può essere adattato allo stile della pagina, quindi non è necessario disporre di uno sfondo bianco o di questi caratteri.

Questa è un'ottima scelta per passaggi numerati di istruzioni, curriculum, elenco di prodotti, portfolio, ecc.

Cronologia dei post

Puoi anche creare una sequenza temporale dai tuoi contenuti. Ciò include post, pagine, media o progetti. Il funzionamento può essere un po' complicato, ma è facile da creare.

Dovrai fare due cose:

1. Crea un layout
2. Crea la pagina e scegli quel layout

Sono inclusi tutti i moduli necessari per creare il layout e la pagina. Creiamo un esempio utilizzando post di blog di esempio.

Crea un layout

Innanzitutto, crea un layout. Nella dashboard, vai su Divi , Libreria Divi e seleziona Aggiungi nuovo . Dai al layout un nome che abbia senso per te (ho scelto Post Timeline Layout). Seleziona Layout come Tipo di modello . Lascia globale deselezionato . Fare clic su Invia .

Il layout che crei mostrerà i post (o il tipo di post che scegli). Pensa a questo come alla creazione del tuo modulo blog, solo tu puoi progettare il layout dei post. Non è quello, ma quell'esempio mi ha aiutato a capirlo facilmente. Beh, in un certo senso è così, ma non proprio. Andare avanti.

Questo layout viene creato utilizzando i moduli Contenuto della sequenza temporale , Immagine in primo piano e Titolo del post inclusi nel plug-in.

Per creare il layout, scegli un layout a due colonne e posiziona il modulo Timeline – Immagine in primo piano a destra e i moduli Timeline – Titolo post e Timeline – Contenuto a sinistra. Ovviamente potresti voler giocare un po' con i layout, ad esempio usando solo l'immagine o il titolo, o posizionandoli in diverse configurazioni, ma costruiamo prima il layout normale.

Nota: questi moduli non vengono utilizzati all'interno di una pagina come la maggior parte dei moduli Divi Builder. Sono pensati per essere utilizzati all'interno di un layout che verrà chiamato dal modulo Timeline (Post) – Vertical .

Questo è il layout come appare in Divi Builder. Come previsto, ciascuno di questi moduli ha le proprie opzioni, tra cui Impostazioni generali , Impostazioni di progettazione avanzate e CSS personalizzato .

Sto usando un layout 1/3, 2/3 ma funziona anche 1/2, 1/2. Dipenderà in parte dalle dimensioni dell'immagine in primo piano che desideri utilizzare e dalla quantità di contenuto che desideri visualizzare, nonché da altre impostazioni come le dimensioni dei caratteri.

Dopo aver posizionato i moduli e scelto tutte le impostazioni, seleziona Aggiorna a destra sotto Pubblica .

Diamo un'occhiata più da vicino a ciascun modulo.

Modulo immagine in primo piano

Il modulo immagine in primo piano fa esattamente quello che ti aspetteresti: mostra l'immagine in primo piano di un post. Include una casella a discesa in cui è possibile scegliere la dimensione dell'immagine. Include anche testo alternativo, titolo, apri in lightbox, link URL, apri nella stessa finestra o nuova scheda, animazione, rimuovi lo spazio sotto l'immagine, allineamento, disabilita per dispositivi ed etichetta amministratore.

Sto scegliendo una dimensione dell'immagine media e disattivando l'animazione.

Modulo post titolo

Il modulo del titolo del post ti consente di collegarti al contenuto e modificare l'etichetta dell'amministratore e impostare le impostazioni CSS. Consiglio di lasciare l'impostazione Collegamento al contenuto impostata su Sì . Ho lasciato il resto impostato sui valori predefiniti.

Modulo contenuto

Il modulo Contenuto ti consente di scegliere di mostrare esperti o contenuti e visualizzare un pulsante Leggi di più . L'ho impostato per mostrare un estratto e il pulsante Leggi di più.

Crea la pagina

Crea una nuova pagina utilizzando Divi Builder e rilascia il modulo Timeline (Post) - Verticale in un layout a colonna singola.

Timeline (Post) Impostazioni modulo verticale

Questo modulo chiamerà il layout che hai creato. Qui hai molte opzioni tra cui titolo, layout, colore della riga centrale, icona per gli elementi sulla timeline, mostra numeri o icone, colore icona/numero e colore di sfondo, animazione, impaginazione, tipo di post, numero di post da visualizzare, post offset (con quale post iniziare), tassonomia ed etichetta admin.

Per chiamare il layout che hai creato, selezionalo dall'elenco a discesa chiamato Loop Layout . Scorri verso il basso e scegli Post come tipo di post per visualizzare i post del blog.

Una volta che hai fatto tutte le tue scelte, pubblica la pagina.

Posta il risultato della sequenza temporale

Il risultato è una pagina del blog con i miei ultimi post su una timeline. Ho posizionato la timeline su un'immagine di sfondo (l'immagine viene aggiunta alla sezione). Con questo modulo le icone sono globali. Ho impostato la timeline sul blu con uno sfondo marrone chiaro e icone blu. Il modulo post può essere ulteriormente modificato in modo che corrisponda alla pagina utilizzando le impostazioni di progettazione avanzate .

Un esempio di blog

La timeline può essere utilizzata all'interno di altri layout. Volevo creare un layout del blog che mostrasse alcuni post in alto e poi il resto all'interno di una timeline.

Ho creato un layout in un'unica colonna con l'immagine in alto, il contenuto al centro e il titolo in basso.

Ho quindi creato una pagina con un modulo Blog e il modulo Timeline (Post) – Vertical . Ho impostato il modulo Blog per visualizzare tre post in una griglia. Ho impostato il modulo Timeline per avere un offset di 3 in modo che ignorerà i post che il modulo Blog visualizzerà e inizierà dal post numero 4. Ho inserito un modulo di testo tra di loro con un messaggio che avvisa il visitatore che il contenuto sotto il blog i post fanno ancora parte del blog.

Risultato della pagina del blog

Ecco la pagina del blog. Il risultato è un layout pulito che guida il lettore attraverso il contenuto. Ovviamente questa non deve essere solo una pagina del blog. Questo potrebbe anche essere usato per mostrare progetti per una pagina di portfolio, opere d'arte, servizi, ecc.

Pensieri finali

Le linee temporali sono ottimi elementi di design per visualizzare dati cronologici o numerici. Divi Timeline Module aggiunge questa funzionalità a Divi Builder, fornendo un modo semplice per creare timeline personalizzate o utilizzare i tuoi contenuti come pagine, post, media o progetti per creare timeline cronologiche da visualizzare all'interno dei tuoi layout.

Il plug-in è facile da usare e tutte le impostazioni di progettazione che ti aspetteresti da qualsiasi modulo Divi sono qui. Non ci vuole molto per imparare e creare i layout e le pagine è veloce e semplice come usare Divi Builder. Se vuoi aggiungere una timeline al tuo sito web, Divi Timeline Module è un'ottima scelta.

Ci piacerebbe sentire da voi. Hai usato il modulo Divi Timeline? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Ollie The Designer / shutterstock.com