Come creare un layout di timeline verticale appiccicoso in Divi
Pubblicato: 2020-10-14La creazione di una timeline permanente verticale può essere estremamente utile per classificare i contenuti per anno e/o mese mentre l'utente scorre la pagina verso il basso. Gli elementi della data adesiva rimangono fissi accanto al contenuto per un comodo potenziamento UX che gli utenti apprezzeranno.
In questo tutorial, ti mostreremo come creare un layout timeline verticale completo in Divi. Le chiavi di questo design sono (1) per dare alle tue colonne una larghezza personalizzata in modo che gli elementi della data non occupino troppo spazio orizzontale sui dispositivi mobili e (2) per rendere permanenti l'anno e il mese, con limiti permanenti sulla sezione (per l'anno) e riga (per il mese).
Sebbene questo layout abbia applicazioni sfaccettate, creeremo un layout della sequenza temporale per mostrare gallerie fotografiche classificate per mese e anno.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Costruire l'intestazione del bastone
Il primo elemento che andremo a disegnare è l'intestazione adesiva che rimarrà fissa nella parte superiore della pagina durante lo scorrimento.
Aggiungi riga
Per iniziare, aggiungi un layout di colonna due quinti tre quinti alla sezione.
Testo intestazione sinistra
Nella colonna di sinistra, aggiungeremo l'intestazione per la timeline che sarà sul lato sinistro della pagina. Per fare ciò, aggiungi un modulo di testo alla colonna di sinistra.
Quindi aggiungi il testo "Timeline" al corpo del modulo di testo.
Nella scheda Progettazione, aggiorna i seguenti stili di testo:
- Carattere del testo: ossigeno
- Peso del carattere del testo: grassetto
- Stile del carattere del testo: TT
- Colore del testo del testo: #666666
- Dimensioni del testo: 50 px (desktop), 30 px (tablet), 18 px (telefono)
- Altezza riga di testo: 1em
- Allineamento del testo: a destra
Quindi aggiorna anche il riempimento:
- imbottitura: 5px in alto
Testo dell'intestazione a destra
Per creare l'intestazione per il contenuto della galleria sul lato destro della pagina, copia il modulo di testo nella colonna di sinistra e incollalo nella colonna di destra.
Quindi apri le impostazioni del modulo di testo duplicato e aggiorna quanto segue:
- Colore del testo del testo: #c22969
- Allineamento del testo: a sinistra (desktop), a sinistra (tablet)
Impostazioni riga
Per darci la stanza di cui abbiamo bisogno sul cellulare, dobbiamo aggiornare le impostazioni della riga come segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 1280 px
- Imbottitura: 10px in alto, 10px in basso
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'Elemento principale sul tablet:
display:flex; flex-wrap:nowrap;
Impostazioni colonna sinistra
Poiché stiamo utilizzando una larghezza della riga di margine di 1, non c'è spazio tra le colonne. Per aggiungere una spaziatura sufficiente, apri le impostazioni per la colonna 1 e aggiorna il riempimento come segue:
- Imbottitura (desktop): 10px in alto, 10px in basso, 20px a sinistra, 20px a destra
- Imbottitura (tablet): 10px in basso, 10px a sinistra, 10px a destra
Successivamente, vogliamo sovrascrivere la larghezza predefinita della colonna sinistra su tablet e telefono in modo che sia il 30% della larghezza della riga. Questo corrisponderà alla larghezza della colonna che aggiungeremo alle colonne nella sequenza temporale sottostante.
Per fare ciò, apri le impostazioni per la colonna di sinistra (colonna1) e aggiungi il seguente CSS all'elemento principale sul tablet:
width: 30% !important;
Per la colonna di destra, vogliamo aggiungere lo stesso riempimento che abbiamo fatto nella colonna 1. E aggiungeremo un bordo sinistro alla colonna per fungere da divisore come segue:
- Imbottitura (desktop): 10px in alto, 10px in basso, 20px a sinistra, 20px a destra
- Imbottitura (tablet): 10px in basso, 10px a sinistra, 10px a destra
- Larghezza bordo sinistro: 2px
- Colore bordo sinistro: #333333
Vogliamo anche che la larghezza della colonna di destra sia il 70% della larghezza della riga. Per aggiornare la larghezza della colonna, apri le impostazioni della colonna 2 e aggiungi il seguente CSS all'elemento principale sul tablet:
width: 70% !important;
Impostazioni della sezione
Per completare il design dell'intestazione, apri le impostazioni della sezione e aggiorna il colore di sfondo:
- Colore di sfondo: #222222
Quindi aggiorna il riempimento della sezione:
- Imbottitura: 0px in alto, 0px in basso
Per rendere permanente la sezione, vai alla scheda Avanzate e aggiorna quanto segue:
- Posizione appiccicosa: bastone in alto
Parte 2: Creazione della linea temporale adesiva
Questa parte successiva del design è dove creiamo la porzione di timeline appiccicosa del layout. La chiave qui è progettare la prima sezione, riga e moduli con tutti gli elementi in posizione. Quindi possiamo duplicare ogni sezione o riga secondo necessità.
Aggiungi sezione
Per iniziare, aggiungi una nuova sezione regolare sotto la sezione dell'intestazione che abbiamo appena terminato.
Prima di iniziare ad aggiungere le nostre righe e i nostri contenuti, apri le impostazioni della sezione e aggiorna quanto segue:
- Imbottitura: 0px in alto, 0px in basso
Aggiungi la riga, gli stili di riga e la struttura della colonna
Quindi, crea una riga di colonna un quinto un quinto tre quinti nella sezione.
Per avviare il design della riga, copia gli stili della riga nella sezione dell'intestazione sopra e incollalo nella nuova riga.
Quindi apri le impostazioni della nuova riga e aggiorna quanto segue:
- Imbottitura: 50px in alto, 50px in basso
Quindi aggiungi il CSS personalizzato all'elemento principale sul tablet come segue:
display:flex; flex-wrap:nowrap;
Creare l'anno appiccicoso
Il primo elemento di data permanente per la sequenza temporale sarà l'anno. Questo elemento di testo "anno" si attaccherà alla parte superiore della sezione sullo scorrimento.
Per creare l'elemento di testo dell'anno, aggiungi un nuovo modulo di testo alla colonna 1.
Quindi aggiungi il testo "2020" al corpo.
Nella scheda Progettazione, aggiorna gli stili di testo come segue:
- Carattere del testo: ossigeno
- Peso del carattere del testo: grassetto
- Testo Dimensioni testo: 40 px (desktop), 24 px (tablet), 18 px (telefono)
- Allineamento del testo: a destra
Per fare in modo che l'anno rimanga in cima alla sezione, aggiorna quanto segue:
- Posizione appiccicosa: bastone in alto
- Offset in alto appiccicoso: 50 px
- Limite appiccicoso inferiore: sezione
Creare il mese appiccicoso
Per creare il testo del mese permanente, copia il modulo di testo contenente l'anno permanente e incollalo nella colonna 2.
Quindi apri le impostazioni per il nuovo modulo di testo nella colonna 2 e aggiorna il corpo del testo con "dec" (l'abbreviazione del mese).
Il testo del mese deve rimanere nella parte superiore della riga anziché nella sezione, quindi aggiorna il limite permanente come segue:
- Limite permanente inferiore: riga
Aggiunta del contenuto della galleria
Nella colonna all'estrema destra (colonna 3), aggiungeremo il contenuto correlato al mese/anno specifico. In questo caso, aggiungeremo un modulo galleria per visualizzare una galleria di immagini.
Per creare la galleria, aggiungi un modulo galleria nella colonna 3.
Quindi aggiungi almeno 6 immagini alla galleria (o quante ne vuoi) e aggiorna quanto segue:
- Conteggio immagini: 6
- Mostra titolo e didascalia: NO
- Come impaginazione: NO
Nella scheda Progettazione, aggiorna quanto segue:
- Imbottitura: 3% sinistra, 3% destra
Per creare una spaziatura personalizzata tra gli elementi della galleria, aggiungi il seguente CSS personalizzato al CSS dell'elemento della galleria:
padding: 0 1% 2% 1%;
Aggiorna larghezze e spaziatura delle colonne
Come abbiamo fatto per le colonne nella sezione delle intestazioni, daremo alle nostre colonne spaziatura e larghezze personalizzate (un cellulare) in modo che si allineino con le intestazioni e abbiano un bell'aspetto su tablet e telefono.
Colonna 1
Apri le impostazioni per la colonna 1 e aggiorna quanto segue:
- Imbottitura: 1% sinistra, 2% destra
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'Elemento principale sul tablet:
width: 15% !important;
Quindi apri le impostazioni per la colonna 2 e aggiungi lo stesso riempimento e CSS come segue:
- Imbottitura: 1% sinistra, 2% destra
Elemento principale CSS (tablet):
width: 15% !important;
Quindi apri le impostazioni per la colonna 3 e aggiorna il padding e Main Element CSS come segue:
- Imbottitura: 1% sinistra, 2% destra
Elemento principale CSS (tablet):
width: 70% !important;
Duplica la riga per altri mesi
Una volta completata la prima riga, possiamo duplicare la riga per altri mesi.
Duplica la riga.
Nella riga dei duplicati, elimina il testo dell'anno. Abbiamo solo bisogno di un anno per sezione poiché l'anno si attaccherà alla parte superiore e inferiore della sezione.
Quindi apri il testo del mese e aggiorna l'abbreviazione del mese con un nuovo mese.
Duplica la sezione per gli anni aggiuntivi
Allo stesso modo in cui abbiamo duplicato la riga per ulteriori mesi, possiamo duplicare l'intera sezione per ulteriori anni.
Vai avanti e duplica la sezione che abbiamo appena creato per i contenuti del 2020.
Nella sezione duplicata, aggiorna il testo dell'anno nella riga 1, colonna 1 con l'anno "2019".
Puoi continuare questo processo per creare anni e mesi aggiuntivi secondo necessità per il layout della sequenza temporale.
Risultato finale
Controlla il risultato finale.
Pensieri finali
Il peso del lavoro di progettazione per questo layout della timeline è renderlo reattivo fornendo le dimensioni del testo e gli stili specifici per dispositivi mobili della larghezza delle colonne. Ma il posizionamento appiccicoso degli elementi della data è estremamente facile con le opzioni integrate di Divi. Spero che questo possa tornare utile per i progetti futuri. Vedo che questo è utile per mostrare una cronologia della cronologia per una pagina di informazioni o anche per una pagina di risorse, pagina di download o aggiornamenti del prodotto.
Non vedo l'ora di sentirti nei commenti.
Saluti!