Scarica una sezione temporale GRATUITA realizzata con le opzioni di trasformazione di Divi

Quando si tratta di strutturare i contenuti, creare una sequenza temporale è un ottimo modo per mantenere le informazioni interessanti e coinvolgenti per i tuoi visitatori. Li aiuta anche a navigare ed elaborare le informazioni che leggono molto più velocemente. E quando usi un bel design, eleva anche l'aspetto generale della tua pagina. In questo post, ti mostreremo come creare una straordinaria sezione della timeline con le opzioni di trasformazione di Divi. Il design che ricreeremo rimarrà reattivo su schermi di dimensioni più piccole.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout della sezione Timeline

Per mettere le mani sul layout della sezione della timeline gratuita, 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 i file

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.

SCARICA

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!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Spaziatura

Crea una nuova pagina o aprine una esistente e aggiungi una sezione normale. Apri le impostazioni della sezione, vai alle impostazioni di spaziatura e aggiungi un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 12vw
• Imbottitura inferiore: 0vw

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga. Vai alle impostazioni di dimensionamento nella scheda Design e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Visibilità

Useremo questa riga per aggiungere un'illustrazione nei passaggi successivi. Tuttavia, abbiamo solo bisogno di quell'illustrazione per il desktop. Ecco perché nasconderemo l'intera riga su tablet e telefono.

Aggiungi modulo immagine

Carica illustrazione

Come accennato nel passaggio precedente di questo post, l'unico motivo per cui abbiamo bisogno di questa riga è aggiungere l'illustrazione della sequenza temporale. Puoi trovarlo nella cartella che hai scaricato all'inizio di questo post. Una volta individuato, caricalo in un nuovo modulo immagine.

Dimensionamento

Per assicurarci che tutto rimanga reattivo su tutte le dimensioni dello schermo, abiliteremo l'opzione "Forza larghezza intera" nelle impostazioni di dimensionamento del modulo immagine.

• Forza intera larghezza: Sì

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una seconda riga alla sezione, utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Quindi, vai alle impostazioni di spaziatura. Qui, vogliamo limitare lo spazio occupato dalla riga (sul desktop) rimuovendo tutto il padding superiore e inferiore personalizzato. Manteniamo un po' di imbottitura superiore e inferiore su schermi di dimensioni più piccole.

• Imbottitura superiore: 0px (desktop), 15vw (tablet e telefono)
• Imbottitura inferiore: 0px (desktop), 15vw (tablet e telefono)

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla colonna 1. Inserisci del contenuto a tua scelta.

Seleziona icona

Continua selezionando un'icona a tua scelta.

Sfondo sfumato

Aggiungi anche uno sfondo sfumato.

• Colore 1: #a5c4ff
• Colore 2: #ffffff
• Posizione di partenza: 40%
• Posizione finale: 40%

Impostazioni icona

Quindi, vai alla scheda Design e modifica le impostazioni dell'icona.

• Colore icona: #ffffff
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 5vw (desktop), 17vw (tablet), 18vw (telefono)

Impostazioni del testo del titolo

Passa alle impostazioni del testo del titolo e modifica le opzioni di conseguenza:

• Carattere del titolo: Didact Gothic
• Peso del carattere del titolo: grassetto
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 1.1vw (desktop), 2.7vw (tablet), 4vw (telefono)
• Altezza della riga del titolo: 2,8 em

Impostazioni del corpo del testo

Fai la stessa cosa per le impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Allineamento del corpo del testo: Centro
• Dimensioni del corpo del testo: 0.7vw (desktop), 1.5vw (tablet), 2.1vw (telefono)
• Altezza della linea del corpo: 2em

Spaziatura

Stiamo anche aggiungendo alcuni margini personalizzati e valori di riempimento che personalizzeremo in base alle diverse dimensioni dello schermo.

• Margine sinistro: 3vw
• Margine destro: 3vw
• Margine inferiore: 5vw (tablet), 7vw (telefono)
• Imbottitura superiore: 2vw (desktop), 6vw (tablet e telefono)
• Imbottitura inferiore: 2vw (desktop), 6vw (tablet e telefono)
• Imbottitura sinistra: 3vw (desktop), 9vw (tablet e telefono)
• Imbottitura destra: 3vw (desktop), 9vw (tablet e telefono)

Frontiera

Passa alle impostazioni del bordo e aggiungi "20px" a ciascuno degli angoli.

Scatola ombra

Ultimo ma non meno importante, crea un po' di profondità sulla pagina aggiungendo una sottile ombra di riquadro al modulo Blurb.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.1)

Clona modulo Blurb tre volte e posiziona i duplicati nelle colonne rimanenti

Dopo aver creato e personalizzato il modulo Blurb, puoi clonarlo tre volte. Posiziona i duplicati nelle colonne rimanenti della riga.

Cambia sfondo sfumato del duplicato n. 1

Apri il primo duplicato (Modulo Blurb nella colonna 2) e modifica il primo colore dello sfondo sfumato.

• Colore 1: #ffa5ae

Cambia sfondo sfumato del duplicato n. 2

Fai la stessa cosa per il Modulo Blurb nella colonna 3.

• Colore 1: #f7e3a0

Cambia sfondo sfumato del duplicato n. 3

E modifica anche lo sfondo sfumato dell'ultimo modulo Blurb.

• Colore 1: #caa5ff

Aggiungi le impostazioni di trasformazione ai moduli Blurb

Aggiungi Trasforma Traduci in Blurb Modulo #1

Ora che abbiamo tutti gli elementi di design di cui abbiamo bisogno, possiamo iniziare a trasformare la loro posizione! Per farlo, utilizzeremo l'opzione di traduzione di trasformazione. Apri il modulo Blurb nella colonna 1 e modifica i valori di conseguenza:

• In basso: 2vw (desktop), 0vw (tablet e telefono)
• Destra: -106vw (desktop), 0vw (tablet e telefono)

Aggiungi Trasforma Traduci in Blurb Modulo #2

Passa al secondo modulo Blurb e modifica i valori di traduzione di trasformazione di conseguenza:

• In basso: 16.6vw (in basso), 0vw (tablet e telefono)
• Destra: -78vw (destra), 0vw (tablet e telefono)

Aggiungi Trasforma Traduci in Blurb Modulo #3

Apri il modulo Blurb nella colonna 3 e usa i seguenti valori di traduzione di trasformazione:

• In basso: 17vw (desktop), 0vw (tablet e telefono)
• Destra: -46vw (desktop), 0vw (tablet e telefono)

Aggiungi Trasforma Traduci in Blurb Modulo #4

Fai la stessa cosa per l'ultimo modulo Blurb, usando i seguenti valori:

• In basso: -66vw (desktop), 0vw (tablet e telefono)
• Destra: -24vw (desktop), 0vw (tablet e telefono)

Aggiungi un margine inferiore negativo alla riga n. 2

L'uso dell'opzione di conversione di trasformazione non rimuoverà lo spazio inizialmente occupato dai moduli Blurb nella riga. Per eliminare questo spazio, possiamo aggiungere un margine inferiore negativo alla riga e il gioco è fatto!

• Margine inferiore: -15vw (desktop), 0vw (tablet e telefono)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare una bellissima sezione della timeline utilizzando le nuove opzioni di trasformazione di Divi. All'inizio del tutorial, sei stato in grado di scaricare gratuitamente il file JSON e l'illustrazione! Questo dovrebbe aiutarti a iniziare subito. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.