10 modi divertenti per utilizzare il modulo divisore con le nuove opzioni Divi

Nel tutorial Divi di oggi, condivideremo con te un assaggio di cosa puoi fare con le nuove opzioni che sono state aggiunte a Divi negli aggiornamenti precedenti. Più precisamente; condivideremo 10 modi interessanti in cui puoi modellare il modulo divisore con queste nuove modifiche. Le possibilità sono davvero infinite, ma questo post potrebbe aiutarti a trovare l'ispirazione di cui hai bisogno per il tuo prossimo progetto.

Sbirciata

Una delle cose migliori di questo tutorial è il fatto che non utilizzeremo alcun CSS aggiuntivo (o codice di alcun tipo). Tutti gli esempi che creeremo utilizzeranno solo le opzioni incluse nel modulo divisore. Diamo una rapida occhiata ai divisori che costruiremo prima di mostrarti come crearli passo dopo passo:

10 modi divertenti per utilizzare il modulo divisore con le nuove opzioni Divi

Iscriviti al nostro canale Youtube

Crea una sezione riutilizzabile

La prima cosa che devi fare è creare la sezione che useremo in tutti e 10 gli esempi. Ovviamente puoi usare i divisori anche in altri contesti, ma creando prima questa sezione, avrai l'opportunità di giocare con il tuo Divi Builder e vedere quale preferisci.

Crea nuova pagina

Inizia creando una nuova pagina nella dashboard di WordPress, abilitando Divi Builder e aprendo Visual Builder.

Crea sezione con riga a tre colonne

Una volta che sei sulla tua nuova pagina, crea una sezione standard e usa una riga a tre colonne all'interno di quella sezione standard. Abbiamo usato '#f4f4f4' come colore di sfondo della sezione.

Aggiungi il primo modulo di testo

Quindi, aggiungi il primo modulo di testo alla prima colonna della riga. Apri le impostazioni, digita il testo che desideri visualizzare e vai alla scheda Design. All'interno della scheda Progettazione, apporta le seguenti modifiche alla sottocategoria Testo:

• Carattere del testo: Aragosta
• Dimensione carattere del testo: 35
• Colore del testo: #000000
• Altezza riga di testo: 1,7 em
• Orientamento del testo: al centro

Aggiungi il secondo modulo di testo

Dopo aver aggiunto il primo modulo di testo, puoi aggiungerne un altro proprio sotto di esso. Aggiungi il testo che vuoi che appaia e vai alla scheda Design. All'interno della scheda Progettazione, assicurati che siano applicate le seguenti modifiche:

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

Clona moduli di testo e posizionali in altre due colonne

Una volta creati questi due moduli di testo, puoi inserirli anche nelle altre due colonne della riga.

Prima di iniziare

Condivideremo 10 modi divertenti in cui puoi modellare il modulo divisore di Divi. Ciascuno degli esempi avrà tre divisori che sono in armonia tra loro. La maggior parte delle impostazioni è la stessa per tutti e tre i moduli. Inizieremo mostrandoti le impostazioni che contano per ciascuno di essi e continueremo mostrando le modifiche che devi apportare agli altri due divisori. Quindi, ogni volta che finisci il primo divisore, clonalo e posizionalo nelle altre due colonne. Fatto ciò, puoi apportare le modifiche agli altri due divisori.

Nota: per ciascuno dei divisori, dovrai abilitare l'opzione "Mostra divisore" nella scheda Contenuto.

1. Il triangolo sfocato

Impostazioni del primo modulo divisore

Scheda Contenuto

All'interno della scheda contenuto, utilizzeremo le seguenti impostazioni di sfondo:

• Primo colore: #e09900
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 176 gradi
• Posizione di partenza: 13%
• Posizione finale: 31%

Scheda Progettazione

Passa alla scheda Progettazione e assicurati che le seguenti impostazioni si applichino alla sottocategoria Dimensionamento:

• Peso del divisore: 0
• Altezza: 25px
• Larghezza: 35%
• Allineamento del modulo: Centro

Scorri verso il basso la stessa scheda e utilizza le seguenti impostazioni di animazione nella sottocategoria Animazione:

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 1200 ms
• Intensità animazione: 80%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Nella scheda contenuto, l'unica cosa che devi fare è cambiare il primo colore sfumato in '#0c71c3'.

Scheda Progettazione

Successivamente, dovrai aggiungere un ritardo di animazione di "250 ms" alla sottocategoria Animazione.

Impostazioni del terzo modulo divisore

Scheda Contenuto

Cambia il primo colore sfumato in '# 8300e9' per l'ultimo divisore.

Scheda Progettazione

Il ritardo dell'animazione che dovrai aggiungere alla sottocategoria Animazione dell'ultimo divisore è "500 ms".

2. L'ombra del colore

Impostazioni del primo modulo divisore

Scheda Contenuto

Utilizza le seguenti impostazioni di sfondo sfumato nella scheda Contenuto:

• Primo colore: #e09900
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 0%
• Posizione finale: 72%

Scheda Progettazione

La prima cosa che devi fare nella scheda Design è cambiare il colore del divisore in '#000000'.

All'interno della sottocategoria Stili della stessa scheda, utilizzare "Solido" come Stile divisore e "Alto" come Posizione divisore.

Continua a scorrere verso il basso e applica le seguenti modifiche alla sottocategoria Ridimensionamento:

• Peso del divisore: 2
• Altezza: 20px
• Larghezza: 70%
• Allineamento del modulo: Centro

E infine, usa le seguenti impostazioni delle opzioni per la sottocategoria Animazione:

• Stile di animazione: rimbalzo
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 2000 ms

Impostazioni del secondo modulo divisore

Scheda Contenuto

Cambia il primo colore sfumato dello sfondo sfumato in '# 0c71c3'.

Scheda Progettazione

All'interno della sottocategoria Animazione, aggiungi "350 ms" all'opzione Ritardo animazione.

Impostazioni del terzo modulo divisore

Scheda Contenuto

Apporta la stessa modifica al terzo divisore ma usa invece il colore '# 8300e9'.

Scheda Progettazione

E infine, aggiungi un ritardo di animazione di "700 ms".

3. La serie del gradiente

Impostazioni del primo modulo divisore

Scheda Contenuto

Per il primo divisore, usa le seguenti impostazioni di sfondo sfumato:

• Primo colore: #0970a0
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione del gradiente: 119°
• Posizione di partenza: 0%
• Posizione finale: 86%

Scheda Progettazione

All'interno della scheda Design, scegli "#FFFFFF" come colore del tuo divisore.

Successivamente, apporta le seguenti modifiche alla sottocategoria Stili:

• Stile divisore: solido
• Posizione del divisore: centrato verticalmente

Mentre sei ancora nella stessa scheda, assicurati che le seguenti impostazioni si applichino alla sottocategoria Ridimensionamento:

• Peso del divisore: 3
• Altezza: 10px
• Larghezza: 25%
• Allineamento del modulo: a sinistra

Aggiungi '15px' anche al padding inferiore all'interno della sottocategoria Spaziatura.

Infine, usa le seguenti impostazioni per la sottocategoria Animazione:

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione animazione: Sinistra
• Durata dell'animazione: 2000 ms
• Intensità animazione: 100%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Le impostazioni dello sfondo sfumato per il secondo divisore sono leggermente diverse:

• Primo colore: #0970a0
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 0%
• Posizione finale: 100%

Scheda Progettazione

All'interno della sottocategoria Dimensionamento, modificare l'allineamento del modulo al centro.

Infine, centralizza anche la direzione dell'animazione.

Impostazioni del terzo modulo divisore

Scheda Contenuto

Il terzo divisore contiene anche un altro sfondo sfumato:

• Primo colore: rgba (255,255,255,0)
• Secondo colore: #0970a0
• Tipo di gradiente: lineare
• Direzione del gradiente: 119°
• Posizione di partenza: 14%
• Posizione finale: 100%

Scheda Progettazione

Faremo le stesse modifiche che abbiamo apportato al secondo divisore, ma useremo la destra invece del centro.

4. Il Circolo Rotolante

Impostazioni del primo modulo divisore

Scheda Contenuto

Inizia applicando le seguenti impostazioni di sfondo sfumato:

• Primo colore: #e09900
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 20%
• Posizione finale: 21%

Scheda Progettazione

La prima cosa che devi fare nella scheda Design è utilizzare il colore "#000000" per il divisore.

Quindi, seleziona "Solido" come stile del divisore e "Centrato verticalmente" come posizione del divisore.

Andando avanti, apporta le seguenti modifiche alla sottocategoria Dimensionamento:

• Peso del divisore: 2
• Altezza: 50 px
• Larghezza: 40%
• Allineamento del modulo: Centro

Infine, la sottocategoria Animazione avrà bisogno delle seguenti impostazioni:

• Stile di animazione: Roll
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 1500 ms
• Ritardo animazione: 850 ms
• Intensità animazione: 60%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Cambia il primo colore sfumato in '# 0c71c3'.

Scheda Progettazione

E cambia il ritardo dell'animazione in "0ms".

Impostazioni del terzo modulo divisore

Scheda Contenuto

Per l'ultimo divisore, dovrai solo cambiare il primo colore di sfondo sfumato in '# 8300e9'.

5. La staffa

Impostazioni del primo modulo divisore

Scheda Contenuto

Usa le seguenti impostazioni di sfondo sfumato:

• Primo colore: #e0d1b1
• Secondo colore: #e09900
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 36%
• Posizione finale: 100%

Scheda Progettazione

Assicurati che il colore del divisore sia lo stesso del colore di sfondo della sezione. In questo caso, è '#f4f4f4'.

Scorri verso il basso la scheda di progettazione e usa "Tratteggio" come stile del divisore e "In alto" come posizione del divisore.

Applicare le seguenti impostazioni alla sottocategoria Dimensionamento:

• Peso del divisore: 100
• Altezza: 18px
• Larghezza: 60%
• Allineamento del modulo: Centro

Dovrai anche aggiungere "15px" all'imbottitura superiore, destra e sinistra.

Infine, usa le seguenti impostazioni di animazione:

• Stile di animazione: Zoom
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 1000 ms
• Intensità animazione: 80%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Cambia i colori dello sfondo sfumato in '# 87acc1' e '# 0c71c3'.

Scheda Progettazione

Quindi, modifica la durata dell'animazione in "1300 ms" e il ritardo dell'animazione in "250 ms".

Impostazioni del terzo modulo divisore

Scheda Contenuto

I colori sfumati utilizzati nel terzo divisore sono "#c9a4e8" e "#8300e9".

Scheda Progettazione

Cambia la durata dell'animazione in "1300 ms" e il ritardo dell'animazione in "500 ms".

6. Le doppie linee

Impostazioni del primo modulo divisore

Scheda Contenuto

Applica le seguenti impostazioni di sfondo sfumato:

• Primo colore: #e09900
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: lineare
• Direzione gradiente: 179 gradi
• Posizione di partenza: 0%
• Posizione finale: 45%

Scheda Progettazione

Scegli '#000000' come colore del divisore.

All'interno della sottocategoria Stili, usa "Doppio" come stile del divisore e "Centrato verticalmente" come posizione del divisore.

Andando avanti, usa le seguenti impostazioni per la sottocategoria Dimensionamento:

• Peso del divisore: 5
• Altezza: 25px
• Larghezza: 35%
• Allineamento del modulo: a sinistra

Infine, usa le seguenti impostazioni di animazione:

• Stile di animazione: Roll
• Ripetizione animazione: una volta
• Direzione animazione: Sinistra
• Durata dell'animazione: 1000 ms
• Intensità animazione: 50%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Cambia il primo colore sfumato in '# 0c71c3'.

Scheda Progettazione

Quindi, usa un'animazione diversa per il secondo divisore:

• Stile di animazione: dissolvenza
• Ripetizione animazione: una volta
• Durata dell'animazione: 1400 ms

Impostazioni del terzo modulo divisore

Scheda Contenuto

Per il terzo divisore, usa '# 8300e9' come primo colore di sfondo sfumato.

Scheda Progettazione

L'unica cosa che devi cambiare nella scheda Design è la direzione dell'animazione, che in questo caso è "Giusta".

7. Il ponte

Impostazioni del primo modulo divisore

Scheda Contenuto

Inizia assegnando '#8300e9' allo sfondo.

Scheda Progettazione

Continua utilizzando il colore di sfondo della sezione come colore del divisore, che in questo caso è "#f4f4f4".

Quindi, usa "Punteggiato" come stile del divisore e "In alto" come posizione del divisore.

All'interno della sottocategoria Ridimensionamento, utilizzare le seguenti impostazioni:

• Peso del divisore: 15
• Altezza: 7px
• Larghezza: 70%
• Allineamento del modulo: a sinistra

Avremo bisogno anche di un'imbottitura personalizzata:

• Imbottitura superiore: 7px
• Imbottitura destra: -7px
• Imbottitura sinistra: -7px

L'animazione che useremo ha le seguenti impostazioni:

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione animazione: Sinistra
• Durata dell'animazione: 800 ms
• Ritardo animazione: 400 ms
• Intensità animazione: 30%

Impostazioni del secondo modulo divisore

Scheda Contenuto

Per il secondo divisore, cambia lo sfondo in '#0c71c3'.

Scheda Progettazione

Useremo anche un'animazione diversa:

• Stile di animazione: Zoom
• Ripetizione animazione: una volta
• Direzione dell'animazione: Centro
• Durata dell'animazione: 800 ms
• Intensità animazione: 30%

Impostazioni del terzo modulo divisore

Scheda Contenuto

Il terzo divisore utilizzerà '#8300e9' come colore di sfondo.

Scheda Progettazione

Anche l'animazione per il terzo divisore è leggermente diversa:

• Stile di animazione: Zoom
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Durata dell'animazione: 800 ms
• Ritardo animazione: 400 ms
• Intensità animazione: 30%

8. L'eleganza

Impostazioni del primo modulo divisore

Scheda Contenuto

Inizia aggiungendo il seguente sfondo sfumato al primo divisore:

• Primo colore: #000000
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 20%
• Posizione finale: 20%

Scheda Progettazione

Usa il colore '#8300e9' per il tuo divisore.

Quindi, usa "puntinato" come stile del divisore" e "centrato verticalmente" come posizione del divisore.

Avremo bisogno anche di un'imbottitura superiore di '40px'.

E un'animazione con le seguenti impostazioni:

• Stile di animazione: rimbalzo
• Ripetizione animazione: una volta
• Direzione animazione: Giù
• Durata dell'animazione: 1000 ms

Impostazioni del secondo modulo divisore

Scheda Progettazione

Per il secondo divisore, cambia il colore in '#0c71c3'.

Anche l'animazione avrà bisogno di alcune modifiche:

• Direzione dell'animazione: Centro
• Durata animazione 1500 ms

Impostazioni del terzo modulo divisore

Scheda Progettazione

Il terzo divisore utilizzerà '#8300e9' come colore.

E avrà 'Up' come direzione dell'animazione.

9. La sottigliezza

Impostazioni del primo modulo divisore

Scheda Contenuto

Scegli le seguenti impostazioni per lo sfondo sfumato:

• Primo colore: # 8300e9
• Secondo colore: rgba (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 0%
• Posizione finale: 38%

Scheda Progettazione

All'interno della sottocategoria Dimensionamento, avrai bisogno delle seguenti impostazioni:

• Peso del divisore: 0
• Altezza: 4px
• Larghezza: 100%

Infine, l'animazione che utilizzeremo ha le seguenti impostazioni:

• Stile di animazione: rimbalzo
• Ripetizione animazione: una volta
• Direzione dell'animazione: su
• Durata animazione 1800ms

Impostazioni del secondo modulo divisore

Scheda Contenuto

Per il secondo divisore, cambia il primo colore di sfondo sfumato in '# 0c71c3'.

Impostazioni del terzo modulo divisore

Scheda Contenuto

Apporta la stessa modifica al terzo divisore ma usa invece il colore viola '# 8300e9'.

10. Il bagliore

Impostazioni del primo modulo divisore

Scheda Contenuto

Utilizza le seguenti impostazioni di sfondo sfumato per l'ultima serie di divisori:

• Primo Colore:
• Secondo Colore:
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 0%
• Posizione finale: 38%

Scheda Progettazione

Scegli anche il colore di sfondo della sezione come colore del divisore, in questo caso è "#f4f4f4".

Quindi, usa "Tratteggio" come stile del divisore e "Centrato verticalmente" come posizione del divisore.

All'interno della sottocategoria Ridimensionamento, utilizzare le seguenti impostazioni:

• Peso del divisore: 70
• Altezza: 20px
• Larghezza: 100%

Infine, utilizzeremo un'animazione con le seguenti opzioni:

• Stile di animazione: dissolvenza
• Ripetizione animazione: una volta
• Durata dell'animazione: 1800 ms
• Ritardo animazione: 800 ms

Impostazioni del secondo modulo divisore

Scheda Contenuto

Per il secondo divisore, cambia il secondo colore di sfondo sfumato in '# 0c71c3'.

Scheda Progettazione

E aggiungi un ritardo di animazione di "250 ms".

Impostazioni del terzo modulo divisore

Scheda Contenuto

Per l'ultimo divisore, cambia il secondo colore di sfondo sfumato in "# 8300e9".

Scheda Progettazione

E finisci mettendo il Ritardo animazione su '0ms'.

Pensieri finali

Con le nuove opzioni Divi, sono possibili molte nuove cose creative con le impostazioni integrate di ciascun modulo. In questo post, ti abbiamo mostrato in modo specifico come queste opzioni possono aiutarti a migliorare il tuo design attraverso il modulo divisore. Se hai domande o suggerimenti; assicurati 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 VikiVector / shutterstock.com