Utilizzo delle nuove impostazioni del filtro delle colonne di Divi per creare effetti di fusione straordinari

Pubblicato: 2019-08-09

Le nuove impostazioni del filtro colonna di Divi possono essere utilizzate in molti modi creativi. In questo post, ti mostreremo come fondere un'immagine di sfondo della riga principale con il contenuto della colonna. Aggiungeremo diverse sfumature di colore ai moduli e una modalità di fusione "schermo" a colonne per creare un effetto sorprendente. Speriamo che questo design ti ispiri a utilizzare le modalità di fusione delle colonne nel tuo prossimo progetto Divi. Potrai anche scaricare gratuitamente il file JSON!

Arriviamo ad esso!

Anteprima

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

Desktop

anteprima desktop modalità di fusione

Mobile

modalità di fusione gif reattive

Scarica GRATUITAMENTE il layout delle modalità di fusione delle colonne

Per mettere le mani sul layout delle modalità di fusione delle colonne gratuite, devi 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.

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 con riga a 3 colonne

Inizia il design aggiungendo una nuova sezione con una riga a tre colonne.

aggiungi una riga di tre colonne

Spaziatura delle sezioni

Apri le impostazioni della sezione e regola la spaziatura.

Margine sinistro e destro: 3vw
Imbottitura superiore e inferiore: 84 px

stile la sezione

Impostazioni riga

Sfondo

Prima di aggiungere qualsiasi modulo, modificheremo le impostazioni della riga. Inizia aggiungendo un colore di sfondo.

Colore di sfondo: grigio medio #c4c4c4

aggiungi il colore grigio allo sfondo

Quindi, carica un'immagine di sfondo e mescola il colore di sfondo con l'immagine utilizzando una modalità di fusione.

Miscela immagine di sfondo: Moltiplica

aggiungi immagine e imposta la modalità di fusione su moltiplica

Dimensionamento

Regola le impostazioni di dimensionamento della riga successiva.

Usa larghezza grondaia personalizzata: Sì
Larghezza grondaia: 1
Equalizza l'altezza della colonna: Sì
Larghezza: 100%
Larghezza massima: 100%

modella lo sfondo della sezione

Spaziatura

Rimuovi anche l'imbottitura di riga predefinita.

Imbottitura superiore e inferiore: 0px

modella lo sfondo della riga

Scatola ombra

Continua aggiungendo una semplice ombra di riquadro alla riga.

Ombra scatola: prima opzione

aggiungi un'ombra di riquadro alla sezione

Visibilità

Regola l'indice Z nella scheda Visibilità.

Indice Z: 1

indice di visibilità della riga

Stile Colonna 1

Inserisci le impostazioni della prima colonna.

Seleziona la colonna 1

Filtri

Applicare una modalità di fusione dello schermo alla colonna nella scheda filtri.

Modalità di fusione: schermo

applica la modalità di fusione dello schermo

Scala di trasformazione al passaggio del mouse

Immettere il gruppo di opzioni di trasformazione e modificare le impostazioni della scala di trasformazione al passaggio del mouse.

Scala di trasformazione: 105% su entrambi gli assi x e y

trasforma al passaggio del mouse o colonna uno

Visibilità

Accedi alla scheda visibilità della colonna e regola le impostazioni di overflow.

Overflow orizzontale: visibile
Overflow verticale: visibile

visibilità della riga

transizioni

Passa alla scheda delle transizioni e regola la durata della transizione per creare una transizione graduale.

Durata della transizione: 500 ms

durata della transizione

Aggiungi modulo di testo alla colonna 1

Ogni colonna contiene tre moduli di testo. Aggiungi un primo modulo di testo alla colonna 1 con alcuni contenuti H2 di tua scelta e regola le impostazioni come segue.

inserisci il modulo di testo nella colonna uno