Come aggiungere sovrapposizioni di colore e sfumatura a Divi Parallax e sfondi video

Le sovrapposizioni di colore e sfumatura sono eccellenti elementi di design che possono catturare l'attenzione del tuo pubblico e far risaltare i tuoi contenuti. Funzionano benissimo con le immagini di sfondo. Aggiungi un'immagine di sfondo a una sezione, riga o colonna, aggiungi una sovrapposizione di colore o sfumatura e quindi posiziona il contenuto su di essa. Un problema, tuttavia, è che le sovrapposizioni di colore e sfumatura non funzionano con parallasse e sfondi video in Divi per impostazione predefinita.

In questo tutorial, ti mostreremo come aggiungere sovrapposizioni di colori e sfumature agli sfondi con un'immagine in parallasse o un video utilizzando un plug-in di terze parti dal nostro marketplace. Vedremo anche le sovrapposizioni che funzionano con i divisori di sezione. Normalmente ciò richiederebbe codice, ma con gli strumenti giusti non è difficile da implementare per chiunque.

Cominciamo.

Sbirciata

Ecco uno sguardo a cosa costruiremo in questo tutorial.

Sto creando un layout con uno sfondo di parallasse in una sezione e uno sfondo video in un'altra. Lo sfondo di parallasse avrà un gradiente e lo sfondo del video avrà una sovrapposizione di un solo colore. Daremo anche uno stile ai divisori di sezione. Sto usando la pagina di destinazione del Pacchetto Layout Pizzeria perché, beh, la pizza. Ecco come appare su un desktop.

Ecco come appare lo stesso design su un telefono.

Parallasse Divi standard e sfondi video

Gli strumenti Divi standard ti consentono di aggiungere immagini di sfondo e video a sezioni, righe e colonne, ma le sovrapposizioni per loro sono limitate. Per le immagini di sfondo, puoi aggiungere una sovrapposizione sfumatura ma non una sovrapposizione per un colore a tinta unita. Le opzioni per il video non includono gli overlay.

Le opzioni per le immagini di sfondo includono il parallasse, ma se abiliti il ​​parallasse per l'immagine di sfondo, l'overlay non viene più visualizzato sull'immagine. È disattivato, anche se è stato selezionato per visualizzare l'overlay.

Come aggiungere sovrapposizioni di colore e sfumatura a Divi Parallax e sfondi video

Aggiungeremo sovrapposizioni di colore e sfumatura a parallasse e sfondi video utilizzando un plug-in di terze parti chiamato Divi Background Plus. Vedremo anche come modellare i divisori di sezione usando questo plugin.

Installa Divi Background Plus

Divi Background Plus è disponibile nel Divi Marketplace. Vediamo come iniziare. Innanzitutto, acquista e scarica Divi Background Plus sul tuo computer.

Nella dashboard di WordPress, vai su Plugin e seleziona Aggiungi nuovo . Fai clic su Carica plug-in nella parte superiore dello schermo.

Seleziona Scegli file , vai al file compresso sul tuo computer, seleziona il file e fai clic su Installa ora .

Una volta caricato il file, fai clic su Attiva plug-in . Non è necessaria nessun'altra configurazione. Il plugin è ora pronto per l'uso.

Un nuovo modulo viene aggiunto a Divi Builder chiamato Divi Background Plus. Utilizzeremo questo modulo per creare le nostre sovrapposizioni di sfumature e colori per sfondi di annunci video con parallasse. Questo plugin e gli sfondi nelle sezioni sono tutto ciò di cui avremo bisogno per questo tutorial.

Aggiungi sovrapposizioni sfumate a Divi Parallax Background

Apri le impostazioni della sezione in cui caricherai l'immagine di sfondo. In questo esempio, sto utilizzando l'immagine di sfondo con la prima sezione nel pacchetto di layout Pizzeria, ma puoi caricarla in qualsiasi sezione, riga o colonna che desideri.

Apri la scheda immagine nelle impostazioni del contenuto. Abilita l' uso dell'effetto di parallasse . Sto usando True Parallax, che è l'impostazione predefinita. Funziona anche CSS Parallax.

L'abilitazione dell'effetto di parallasse disabilita il gradiente, ma le impostazioni per il gradiente sono ancora al loro posto. Anziché utilizzare il gradiente nelle impostazioni della sezione, aggiungeremo il gradiente nelle impostazioni nel modulo Divi Background Plus.

Se desideri utilizzare lo stesso gradiente già utilizzato per questa sezione (come lo sono io), seleziona la scheda Gradiente e fai clic con il pulsante destro del mouse in un punto qualsiasi del gradiente. Fare clic su Copia colori sfumatura di sfondo .

Seleziona per aggiungere un nuovo modulo alla sezione con la tua immagine di sfondo e scegli Divi Background Plus .

Nelle impostazioni di layout nella scheda Contenuto, scegli di applicare le impostazioni alla sezione, riga o colonna. Sto selezionando Sezione .

Apri le impostazioni dello sfondo e seleziona la scheda Gradiente. Il gradiente predefinito viene applicato automaticamente. Puoi regolare l'opacità in modo che lo sfondo sia visibile, creare il tuo gradiente o utilizzare quello del layout.

Per utilizzare quello del layout, fai clic con il pulsante destro del mouse e seleziona Incolla colori sfumati di sfondo . Questo non solo applicherà i colori, ma anche le impostazioni per il tipo di sfumatura, la direzione, la posizione iniziale, la posizione finale e posizionando la sfumatura sopra l'immagine di sfondo.

Ecco il risultato. Ora ho una versione dell'originale che include la stessa immagine e sovrapposizione, ma ora mostra lo sfondo in vero parallasse.

Ecco come appare lo stesso layout su un telefono.

Aggiungi sovrapposizione colore allo sfondo video Divi

Aggiungi una nuova sezione regolare sotto la prima sezione. Aggiungeremo il video di sfondo a questa sezione, un modulo Divi Background Plus per l'overlay e aggiungeremo moduli di testo per visualizzare messaggi, informazioni di contatto e un CTA nell'overlay.

Ho intenzione di utilizzare il testo della sezione Call to Action. Questo è facile da fare con gli strumenti Layer di Divi. Per fare ciò, fai clic con il pulsante destro del mouse sulla sezione che desideri copiare e seleziona Vai al livello .

Fare clic con il pulsante destro del mouse sulle righe che si desidera copiare e selezionare Copia riga .

Quindi, seleziona la sezione in cui desideri posizionare la riga, fai clic con il pulsante destro del mouse e seleziona Incolla riga . Lo sto facendo per entrambe le righe che voglio copiare da questa sezione. In alternativa, avrei potuto copiare questa sezione e aggiungervi il modulo Divi Background Plus.

Ora ho una nuova sezione con Divi Background Plus, diversi moduli di testo e un CTA.

Quindi, aggiungi il video allo sfondo della sezione. I colori nel video funzionano bene con i colori nel testo, ma voglio aggiungere una sovrapposizione per farli risaltare un po' di più. Per il mio video di sfondo, sto usando il video gratuito Mixed Toppings Over a Pizza di Pexels di Tima Miroshnichenko.

Apri le impostazioni Divi Background Plus e scegli Sezione per il layout.

Scorri verso il basso fino alla scheda Sfondo e seleziona l'opzione colore. Naturalmente, i tuoi colori saranno diversi a seconda del tuo video. Volevo dare al video una sfumatura rossa. ho usato:

• rgb(150,0,0,0.15)

Ecco come appare il video di sfondo con il mio overlay colorato di rosso su un desktop.

Ecco lo stesso layout su un telefono.

Per qualche altro esempio, eccolo con lo sfondo viola standard con un'opacità del 30%.

Questa è l'arancia standard con un'opacità dell'80%.

Modella il divisore di sezione

Le sovrapposizioni funzionano anche con i divisori di sezione. Per aggiungere un divisore di sezione, apri le impostazioni della sezione.

Vai alla scheda Progettazione, seleziona Divisori e scegli In alto o In basso , a seconda di dove vuoi aggiungere un divisore. Sto aggiungendo un divisore solo sul fondo. Fare clic sulla casella a discesa denominata Stile divisore per scegliere il divisore.

Scegli lo stile del divisorio che desideri. Sto selezionando il quinto stile, che crea un angolo con due colori.

Seleziona l'icona di modifica per aggiungere un colore personalizzato. Questo è il colore che appare in quella sezione in cui il divisore non viene mostrato. Il colore predefinito è il bianco, come puoi vedere nell'esempio precedente. Aggiungi il colore come codice esadecimale o scegli il colore dal selettore di colori. Sto aggiungendo il colore #0d0d0d, che è uno dei colori nella sezione sotto il video.

• Colore #0d0d0d

Il video ora ha un divisore in stile per la parte inferiore di quella sezione. Puoi vedere il video che mostra attraverso le parti trasparenti del divisore e si fonde bene con entrambe le sezioni.

Risultato

Diamo un'occhiata a come appare il layout su desktop e dispositivi mobili.

Ecco uno sguardo alla versione desktop. Ha un vero sfondo parallasse con una sovrapposizione sfumata nella prima sezione. La seconda sezione include un'immagine di sfondo con una sovrapposizione di colori e un divisore di sezione che la separa dalla sezione successiva.

Ecco come appare il layout su un telefono. Tutti gli elementi funzionano bene sui dispositivi mobili.

Pensieri finali

Questo è il nostro sguardo su come aggiungere sovrapposizioni di colore e sfumatura alla parallasse Divi e agli sfondi video. Divi Background Plus li rende facili da costruire e utilizzare. Funziona con sezioni, righe e colonne ed è facile scegliere tra di loro. Tutte le personalizzazioni sono strumenti e impostazioni Divi standard, quindi sono familiari.

Ora i tuoi sfondi possono includere sovrapposizioni di colori e sfumature senza dover disabilitare la parallasse e i video!

Vogliamo sentire da voi. Hai creato sovrapposizioni di colori e sfumature per le tue immagini e video con parallasse con Divi Background Plus? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite Lauritta / shutterstock.com