Come utilizzare le nuove strutture di colonne di Divi per creare straordinarie transizioni di sezione

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come utilizzare le nuove strutture di colonne di Divi per creare straordinarie transizioni di sezione. Combineremo diverse strutture di colonne con alcune delle opzioni integrate di Divi per portare il design della nostra pagina al livello successivo.

Arriviamo ad esso!

Anteprima

Iniziamo dando un'occhiata ai tre diversi esempi che creeremo da zero utilizzando solo le opzioni integrate di Divi. Questi esempi sembrano altrettanto buoni su schermi di dimensioni più piccole.

Usa la pagina di destinazione di Divi's Makeup Artist Layout Pack

Utilizzeremo la pagina di destinazione di Divi's Makeup Artist Layout Pack. Se vuoi dare un'occhiata al pacchetto di layout, vai al seguente post sul blog. Sebbene stiamo dimostrando questo tutorial utilizzando un pacchetto di layout specifico, puoi facilmente utilizzare le tecniche anche su altri layout.

Transizione sezione #1

Aggiungi nuova sezione

Individuare

Apri la pagina di destinazione del pacchetto di layout del truccatore utilizzando Visual Builder di Divi. Quindi, aggiungi una nuova sezione normale proprio sotto la sezione degli eroi:

Spaziatura

Rimuovi tutta la spaziatura predefinita della tua sezione successiva:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Aumenta anche la larghezza della riga:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 0

Spaziatura

Rimuovi il riempimento superiore e inferiore predefinito successivo:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Filtro

Per rendere la riga più vivace, aumenta la saturazione nelle impostazioni del filtro:

• Saturazione: 200%

Aggiungi il modulo divisore n. 1 alla colonna 1

Nascondi divisore

Per creare il primo quadrato nel nostro progetto, aggiungeremo un modulo divisore alla colonna 1. Disabilita l'opzione "Mostra divisore".

Sfondo sfumato

Quindi, aggiungi uno sfondo sfumato al modulo divisore:

• Colore 1: RGB (255,255,255,0)
• Colore 2: rgba (176,182,219.0,34)

Spaziatura

Per creare il quadrato, modifica i valori di Spaziatura:

• Margine superiore: -120 px
• Imbottitura superiore: 120 px
• Imbottitura inferiore: 120 px

Clona modulo divisore e posiziona nella colonna 2

Una volta che hai finito di modificare il modulo DIvider, clonalo e posizionalo nella seconda colonna.

Cambia sfumatura di sfondo

È necessario apportare alcune modifiche a questo duplicato, a partire dallo sfondo sfumato:

• Colore 1: rgba (228,237,234,058)
• Colore 2: RGB (255,255,255,0)

Cambia spaziatura

Modifica anche le impostazioni di Spaziatura. Ciò aumenterà la distanza tra questo modulo divisore e quello nella prima colonna.

• Margine superiore: 142px
• Imbottitura superiore: 120 px
• Imbottitura inferiore: 120 px

Clona modulo divisore n. 1 due volte e posizionalo nelle colonne 3 e 5

Clona il modulo divisore viola due volte e posiziona i duplicati nelle colonne 3 e 5.

Clona il modulo divisore n. 2 e posizionalo nella colonna 4

Clonare anche il modulo divisore verde e posizionarlo nella colonna 4.

Nascondi modulo divisore nelle colonne 3, 4 e 5 su tablet e telefono

Modulo divisore aperto nella colonna 3

Ovviamente, vogliamo che queste transizioni di sezione abbiano lo stesso aspetto su schermi di dimensioni più piccole. Ecco perché nasconderemo alcuni dei moduli che abbiamo usato. Inizia aprendo le impostazioni del Modulo divisore nella colonna 3.

Nascondi su tablet e telefono

Vai alla scheda Avanzate e disabilita il modulo su telefono e tablet.

Copia stili di visibilità

Dovremo nascondere anche i divisori nelle colonne 4 e 5. Per velocizzare il processo, copia le impostazioni di visibilità del divisore nella colonna 3:

Incolla stili di visibilità

E incollali nei moduli divisori nelle colonne 4 e 5.

Transizione sezione #2

Aggiungi nuova sezione

Individuare

Per creare la seconda transizione di sezione, aggiungi una nuova sezione qui:

Divisore superiore

Apri le impostazioni della sezione e aggiungi il seguente divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisore: #ffffff
• Altezza divisore: 236 px
• Capovolgimento divisore: verticale
• Disposizione dei divisori: in cima al contenuto della sezione

Divisore inferiore

Allo stesso modo, aggiungi anche un divisore inferiore:

• Stile divisore: trova nell'elenco
• Colore divisore: #ffffff
• Altezza divisore: 236 px
• Disposizione dei divisori: in cima al contenuto della sezione

Spaziatura

Modifica le impostazioni di Spaziatura successivamente:

• Margine superiore: 100 px
• Margine inferiore: 100 px
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

È ora di aggiungere una riga alla nuova sezione! Scegli la seguente struttura di colonne:

Dimensionamento

Senza aggiungere alcun modulo, apri le impostazioni della riga e modifica la larghezza:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Rimuovi anche tutto il riempimento superiore e inferiore predefinito:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi il modulo divisore n. 1 alla colonna 1

Colore di sfondo

Quindi, aggiungi un modulo divisore alla prima colonna. Apri le sue impostazioni e aggiungi un colore di sfondo:

• Colore di sfondo: rgba (176,182,219,0.34)

Colore divisore

Cambia anche il colore del divisore:

• Colore divisore: #ffffff

Stile divisore

Quindi, vai alle impostazioni degli stili e usa il seguente stile divisore:

• Stile divisore: doppio

Peso del divisore

Il peso del divisore dovrebbe essere il seguente:

• Peso del divisore: 18px

Spaziatura

Ultimo ma non meno importante, aumenta le dimensioni del modulo divisore utilizzando un'imbottitura personalizzata:

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Clona modulo divisore e posiziona nella colonna 2

Una volta che hai finito con il modulo divisore nella prima colonna, clonalo e posiziona il duplicato nella seconda colonna.

Cambia colore di sfondo

Cambia di conseguenza il colore di sfondo di questo duplicato:

• Colore di sfondo: #e4edea

Clona modulo divisore n. 1 e posizionalo nelle colonne 3 e 5

Continua clonando due volte il modulo divisore viola e posizionando i duplicati nelle colonne 3 e 5.

Clona il modulo divisore n. 2 e posizionalo nella colonna 4

Clona anche il modulo divisore verde e posiziona il duplicato nella colonna 4.

Nascondi modulo divisore nelle colonne 3, 4 e 5 su tablet e telefono

Nascondi su tablet e telefono

Faremo la stessa cosa che abbiamo fatto per l'esempio di transizione della prima sezione. Apri le impostazioni del Modulo divisore nella colonna 3 e nascondilo su telefono e tablet.

Copia stili di visibilità

Copia questi stili di visibilità.

Incolla stili di visibilità

E incollali nei moduli divisori nelle colonne 4 e 5.

Transizione sezione #3

Aggiungi nuova sezione

Individuare

Per aggiungere l'ultima transizione di sezione alla tua pagina, aggiungi una nuova sezione qui:

Divisore superiore

Apri le impostazioni della sezione e aggiungi un divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisore: #ffffff
• Altezza divisore: 150 px
• Disposizione dei divisori: in cima al contenuto della sezione

Divisore inferiore

Aggiungine uno in basso:

• Stile divisore: trova nell'elenco
• Colore divisore: #ffffff
• Altezza divisore: 150 px
• Capovolgimento divisore: verticale
• Disposizione dei divisori: in cima al contenuto della sezione

Spaziatura

Quindi, vai alle impostazioni Spaziatura e apporta alcune modifiche:

• Margine superiore: 100 px
• Margine inferiore: 100 px
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

La riga di cui avremo bisogno in questa sezione ha la seguente struttura a colonne:

Dimensionamento

Senza aggiungere moduli, apri le impostazioni della riga e aumenta la larghezza della riga:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Rimuovi tutto il riempimento superiore e inferiore predefinito successivo:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi il modulo divisore n. 1 alla colonna 1

Nascondi divisore

Continua aggiungendo un modulo divisore alla prima colonna. Disattiva l'opzione "Mostra divisore".

Colore di sfondo

Aggiungi invece un colore di sfondo al divisore:

• Colore di sfondo: rgba (176,182,219,0.34)

Spaziatura

Aumenta le dimensioni del modulo utilizzando l'imbottitura superiore e inferiore:

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

Clona modulo divisore e posiziona nella colonna 2

Cambia colore di sfondo

Clona il modulo divisore nella prima colonna e posiziona il duplicato nella seconda. Apri le sue impostazioni e cambia il colore di sfondo:

• Colore di sfondo: rgba (228,237,234,058)

Clona modulo divisore n. 1 e posizionalo nelle colonne 3 e 5

Clonare due volte il modulo divisore viola e posizionarlo nelle colonne 3 e 5.

Clona il modulo divisore n. 2 e posizionalo nella colonna 4

Clona anche il modulo divisore verde e posiziona il duplicato nella colonna 4.

Nascondi modulo divisore nelle colonne 3, 4 e 5 su tablet e telefono

Nascondi su tablet e telefono

Nascondi il modulo divisore nella colonna 3 su tablet e telefono.

Copia stili di visibilità

Copia questi stili di visibilità.

Incolla stili di visibilità

E incollali sul modulo divisore nelle colonne 4 e 5 e il gioco è fatto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata ai tre diversi esempi che abbiamo creato.

Pensieri finali

In questo post sul blog dei casi d'uso, ti abbiamo mostrato come utilizzare le nuove strutture di colonne di Divi per creare straordinarie transizioni di sezione. Questo tutorial fa parte della nostra iniziativa di progettazione Divi in ​​corso, in cui ogni settimana cerchiamo di inserire qualcosa nella tua cassetta degli attrezzi di progettazione. Se hai domande, assicurati di lasciare un commento nella sezione commenti qui sotto!