Come creare bellissime transizioni di sezione utilizzando le nuove funzionalità di progettazione di Divi

In questo tutorial Divi, ti mostreremo come creare bellissime transizioni di sezione utilizzando nient'altro che le opzioni Divi integrate.

Le sezioni sono la base di tutti i contenuti che condividi sul tuo sito web. Ogni sezione è un capitolo e passare da una sezione all'altra fa parte del processo di narrazione. Rendere questa transizione il più agevole possibile enfatizzerà il messaggio che stai cercando di articolare. Per aiutarti in questo, ti mostreremo come creare bellissime transizioni di sezione per il tuo prossimo progetto di sito web.

Sbirciata

Prima di esaminare singolarmente tutte le diverse transizioni di sezione, diamo un'occhiata a cosa puoi aspettarti:

Come creare bellissime transizioni di sezione utilizzando le nuove funzionalità di progettazione di Divi

Iscriviti al nostro canale Youtube

Ricrea sezioni

Inizieremo ricreando le due sezioni che utilizzeremo in tutti gli esempi. In queste due sezioni, abbiamo utilizzato l'imbottitura necessaria per ottenere il meglio dalle transizioni. Se stai utilizzando sezioni con un'altezza diversa, potrebbe essere possibile che tu debba regolare leggermente gli sfondi sfumati che vengono utilizzati in modo che corrispondano perfettamente alle sezioni.

Crea la prima sezione

Inizia creando la prima sezione standard e scegliendo una riga a larghezza intera.

Impostazioni della sezione

Avremo bisogno di un'imbottitura superiore e inferiore di "300 px" che puoi aggiungere nella sottocategoria Spaziatura della scheda Progettazione.

Primo modulo di testo

Quindi, aggiungeremo un modulo di testo alla nostra riga a larghezza intera. Scrivi il testo che vuoi che appaia e vai alla scheda Design. All'interno della scheda Progettazione, utilizzare le seguenti impostazioni per la sottocategoria Testo:

• Carattere del testo: Comfortaa
• Dimensione carattere del testo: 50
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Secondo modulo di testo

Fai lo stesso per il secondo modulo di testo, ma usa invece le seguenti impostazioni:

• Carattere del testo: Comfortaa
• Dimensione carattere del testo: 16
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Modulo pulsante

Infine, aggiungeremo anche un modulo pulsante. Inizia scegliendo l'allineamento centrale nella scheda Progettazione.

Quindi, apri la sottocategoria Pulsante, abilita l'opzione "Usa stili personalizzati per pulsante" e scegli "20" come dimensione del testo del pulsante.

Mentre sei ancora nella sottocategoria Pulsante, usa il seguente sfondo sfumato per il pulsante:

• Primo colore: #2b87da
• Secondo colore: #29c4a9
• Tipo di gradiente: lineare
• Direzione del gradiente: 162 gradi
• Posizione di partenza: 0%
• Posizione finale: 100%

Crea seconda sezione

Aggiungi un'altra sezione standard ma scegli invece una riga a tre colonne.

Impostazioni della sezione

La seconda sezione utilizzerà un'imbottitura '300px' anche per la parte superiore e inferiore.

Modulo Blurb

Successivamente, aggiungeremo un modulo Blurb alla prima colonna della riga. Una volta deciso il testo che si desidera visualizzare, scorrere verso il basso la scheda Contenuto, abilitare l'opzione "Usa icona" e selezionare un'icona.

Dopo averlo fatto, passa alla scheda Design e utilizza le seguenti impostazioni per la sottocategoria delle icone:

• Colore icona: #515151
• Posizionamento immagine/icona: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 55px

Quindi, assicurati che le seguenti impostazioni si applichino alla sottocategoria Testo intestazione:

• Carattere dell'intestazione: Comfortaa
• Allineamento del testo dell'intestazione: al centro
• Dimensione carattere intestazione: 18

E infine, queste sono le impostazioni per la sottocategoria del testo del corpo:

• Carattere del corpo: Comfortaa
• Allineamento del corpo del testo: Centro
• Dimensione carattere corpo: 14
• Altezza della linea del corpo: 1,7 em

Clona modulo Blurb

Una volta creato il modulo Blurb, clonalo due volte e inseriscilo nelle altre due colonne della riga.

1. Tutta la diagonale

Ora che abbiamo creato le sezioni, è il momento di iniziare ad aggiungere le transizioni di sezione. Il primo esempio che ti mostreremo come creare è costituito da semplici linee diagonali.

Impostazioni sfondo sfumato della prima sezione

Apri le impostazioni della prima sezione e aggiungi il seguente sfondo sfumato:

• Primo colore: #dddddd
• Secondo colore: #f7f7f7
• Tipo di gradiente: lineare
• Direzione del gradiente: 183°
• Posizione di partenza: 85%
• Posizione finale: 70,05%

Impostazioni sfondo sfumato della seconda sezione

La seconda sezione richiederà invece le seguenti impostazioni di sfondo sfumato:

• Primo colore: #f7f7f7
• Secondo colore: #dddddd
• Tipo di gradiente: lineare
• Direzione del gradiente: 183°
• Posizione di partenza: 85%
• Posizione finale: 69,05%

Rimuovi l'imbottitura superiore della seconda sezione

L'ultima cosa che devi fare per questo esempio è rimuovere l'imbottitura superiore della seconda sezione.

2. Incontrami a metà strada

Il prossimo esempio che vorremmo condividere è molto elegante in cui vengono utilizzati due sfondi sfumati opposti. Usando questo effetto, le sezioni sembrano seguirsi a vicenda.

Impostazioni sfondo sfumato della prima sezione

Per la prima sezione, avremo bisogno delle seguenti impostazioni di sfondo sfumato:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: rgba (224,43,32,0,07)
• Tipo di gradiente: radiale
• Direzione radiale: in alto a sinistra
• Posizione di partenza: 60%
• Posizione finale: 50%

Impostazioni sfondo sfumato della seconda sezione

La seconda sezione godrà del seguente sfondo sfumato:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: rgba (224,43,32,0.33)
• Tipo di gradiente: radiale
• Direzione radiale: in basso a destra
• Posizione di partenza: 58%
• Posizione finale: 50%

3. Fusione

Il prossimo esempio è un po' diverso dal resto. Avrà bisogno di una sezione aggiuntiva tra entrambe le sezioni per ottenere il risultato che puoi notare nell'immagine qui sotto.

Impostazioni sfondo sfumato della prima sezione

Per la tua prima sezione, avrai bisogno del seguente sfondo sfumato:

• Primo colore: rgba (12,113,195,0.19)
• Secondo colore: rgba (255,255,255,0.39)
• Tipo di gradiente: radiale
• Direzione radiale: in basso a sinistra
• Posizione di partenza: 50%
• Posizione finale: 50%

Impostazioni sfondo sfumato della seconda sezione

Per la seconda sezione, utilizzeremo le seguenti impostazioni di sfondo sfumato:

• Primo colore: rgba (224,43,32,0.17)
• Secondo colore: rgba (255,255,255,0.39)
• Tipo di gradiente: radiale
• Direzione radiale: in alto a destra
• Posizione di partenza: 50%
• Posizione finale: 50%

Aggiungi nuova sezione standard in mezzo

Dopo aver aggiunto gli sfondi sfumati a entrambe le sezioni, è il momento di aggiungere una sezione proprio tra di loro.

Aggiungi colore di sfondo sfumato alla nuova sezione

Anche quella nuova sezione avrà bisogno di uno sfondo sfumato, utilizzando le seguenti impostazioni:

• Primo colore: rgba (12,113,195,0.19)
• Secondo colore: rgba (224,43,32,0.17)
• Tipo di gradiente: lineare
• Direzione del gradiente: 92 gradi
• Posizione di partenza: 43%
• Posizione finale: 62%

4. Inverso

Quindi, abbiamo anche una transizione di sezione che non è così sorprendente come le altre, ma riesce comunque ad aggiungere un tocco sottile alle tue sezioni.

Impostazioni sfondo sfumato della prima sezione

Lo sfondo sfumato per la prima sezione è il seguente:

• Primo colore: #f2f2f2
• Secondo colore: rgba (104,153,193,0,58)
• Tipo di gradiente: radiale
• Direzione radiale: in basso a destra
• Posizione di partenza: 7,9%
• Posizione finale: 7,9%

Impostazioni sfondo sfumato della seconda sezione

E il secondo sfondo sfumato avrà bisogno delle seguenti impostazioni di sfondo sfumato:

• Primo colore: rgba (104,153,193,0,58)
• Secondo colore: #f2f2f2
• Tipo di gradiente: radiale
• Direzione radiale: in alto a destra
• Posizione di partenza: 8%
• Posizione finale: 8%

5. Puntatori

Il quinto esempio sembra un po' più pulito e minimalista rispetto agli altri. Puoi percepire la transizione in due modi vedendo i puntatori oi cerchi (o entrambi).

Impostazioni sfondo sfumato della prima sezione

Usa il seguente sfondo sfumato per la prima sezione:

• Primo colore: #f4f4f4
• Secondo colore: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 88%
• Posizione finale: 88,05%

Impostazioni sfondo sfumato della seconda sezione

Infine, applica le seguenti impostazioni di sfondo sfumato alla seconda sezione:

• Primo colore: rgba (43,135,218,0)
• Secondo colore: rgba (12,113,195,0.43)
• Tipo di gradiente: radiale
• Direzione radiale: In basso
• Posizione di partenza: 87%
• Posizione finale: 87%

6. Puzzle

L'ultimo esempio fa sicuramente sentire le sezioni come se appartenessero insieme.

Impostazioni sfondo sfumato della prima sezione

Apri le impostazioni della prima sezione e usa il seguente sfondo sfumato:

• Primo colore: rgba (160,181,193,0.46)
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 56,3%
• Posizione finale: 43%

Impostazioni sfondo sfumato della seconda sezione

Quindi, usa le seguenti impostazioni di sfondo sfumato per la seconda sezione:

• Primo colore: rgba(242,242,242,0)
• Secondo colore: rgba (160,181,193,0.46)
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 56%
• Posizione finale: 40%

Modificare l'imbottitura della prima sezione

Per fare in modo che le due sezioni si adattino meglio, cambieremo l'imbottitura superiore e inferiore della prima sezione in "150 px".

Rimuovi l'imbottitura superiore della seconda sezione

Infine, rimuoveremo anche l'imbottitura superiore della seconda sezione.

Pensieri finali

Le transizioni di sezione aiutano a collegare diverse sezioni e il loro scopo. In questo post, abbiamo condiviso 6 esempi che puoi ricreare utilizzando nient'altro che le opzioni integrate di Divi. Se hai domande o suggerimenti; sentiti libero 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!

Immagine in primo piano di NikVector / shutterstock.com