Come creare uno sfondo di immagine di parallasse con una sovrapposizione sfumata in Divi
Pubblicato: 2022-08-03Nelle versioni precedenti di Divi, l'aggiunta di una sovrapposizione sfumatura a un'immagine di sfondo con parallasse non era un'opzione incorporata. Ma, con le nuove opzioni di sfondo di Divi (e Gradient Builder), puoi creare facilmente bellissimi sfondi parallasse con innumerevoli disegni di sovrapposizione sfumati.
In questo tutorial, ti mostreremo come utilizzare le opzioni di sfondo di Divi per aggiungere una sovrapposizione sfumata colorata che si fonde con un'immagine di sfondo utilizzando i metodi True e CSS Parallax.
Sbirciata
Ecco una rapida occhiata ai progetti di sfondo che creeremo in questo tutorial.
Questo primo ha una sovrapposizione sfumatura con il metodo di fusione Colore utilizzato sull'immagine di sfondo utilizzando il metodo True Parallax.
Ed ecco lo stesso design che utilizza il metodo CSS Parallax. Si noti che il gradiente rimane fisso/attaccato all'immagine di sfondo in modo che sembri essere una parte dell'immagine reale e non solo un livello.
Ed ecco un esempio di sovrapposizione sfumatura che utilizza interruzioni di colore semitrasparenti senza una modalità di fusione.
Il concetto
L'idea di base di questo design prevede due passaggi:
1. Crea una sfumatura di sfondo per una sezione utilizzando il generatore di sfumature assicurandoti di posizionare la sfumatura sopra l'immagine di sfondo.
2. Aggiungi un'immagine di sfondo alla stessa sezione che utilizza uno dei metodi di parallasse e il metodo di fusione del colore.
Ciò consentirà al gradiente colorato di sovrapporsi all'immagine di parallasse mentre si sposta durante lo scorrimento della pagina. La modalità di fusione del colore unisce la sovrapposizione del gradiente con l'immagine per una bella immagine che ha un bell'aspetto con il parallasse.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Guadagnare
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à in
elenco, inserisci semplicemente il tuo indirizzo e-mail qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.
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!
Per importare il layout della sezione nella tua Libreria Divi, procedi come segue:
- Vai alla Libreria Divi.
- Fai clic sul pulsante Importa nella parte superiore della pagina.
- Nel popup di portabilità, seleziona la scheda di importazione
- Scegli il file di download dal tuo computer (assicurati di decomprimere prima il file e di utilizzare il file JSON).
- Quindi fare clic sul pulsante di importazione.
Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.
Veniamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Costruisci da zero".
- Ora hai una tela bianca per iniziare a progettare in Divi!
Come creare uno sfondo di immagine di parallasse con una sovrapposizione sfumata in Divi
1. Crea la riga di riempimento e il testo dell'intestazione
Sebbene ci concentreremo sul design dello sfondo della sezione per questo tutorial, ha senso aggiungere una riga di riempimento e un'intestazione per avere un'idea migliore di come apparirà il design in un normale caso d'uso.
Per iniziare, aggiungi una riga di una colonna alla sezione esistente nel builder.
Quindi, aggiungi un modulo di testo alla riga/colonna.
Impostazioni di testo
Apri le impostazioni per il modulo di testo. Nella scheda Contenuto, aggiungi un'intestazione H2 al contenuto del corpo.
<h2>Say Hello to Divi</h2>
Nella scheda progettazione, aggiorna le opzioni di intestazione e la larghezza massima come segue:
- Intestazione 2 Font: Inter
- Intestazione 2 Peso del carattere: grassetto
- Intestazione 2 Colore del testo: #fff
- Titolo 2 Dimensione testo: 8vw
- Altezza della linea dell'intestazione 2: 1,2 em
- Intestazione 2 Ombra del testo: vedi screenshot
- Intestazione 2 Sfocatura dell'ombra del testo Intensità: 0,28 em
- Intestazione 2 Colore dell'ombra del testo: #10076d
- Larghezza massima: 50%
Impostazioni di riga
Ora che l'intestazione è a posto, aggiorniamo le dimensioni e la spaziatura delle righe per renderle più reattive.
Apri le impostazioni della riga. Nella scheda Progettazione, aggiorna quanto segue:
- Larghezza: 100%
- Larghezza massima: 80vw
- Imbottitura: 15vw superiore, 15vw inferiore
2. Progetta lo sfondo sfumato per la sezione
Ora che il contenuto di riempimento è completo, siamo pronti per iniziare a progettare lo sfondo del gradiente della sezione.
Impostazioni del gradiente di sfondo
Apri le impostazioni per la sezione. Nella scheda Contenuto, seleziona la scheda sfumatura sotto le opzioni di sfondo e aggiorna le opzioni di sfumatura come segue:
- Gradient Stop 1: #0094ff (a 0%)
- Gradient Stop 2: #ff00c7 (al 25%)
- Gradient Stop 3: #0094ff (al 50%)
- Gradient Stop 4: #ff00c7 (al 75%)
- Gradient Stop 5: #0094ff (al 100%)
- Tipo di sfumatura: circolare
- Posizione gradiente: in basso a sinistra
- Posiziona il gradiente sopra l'immagine di sfondo: SÌ
3. Aggiungi un'immagine di sfondo di parallasse con la modalità di fusione dei colori
Una volta completato il design del gradiente, siamo pronti per aggiungere la nostra immagine di sfondo parallasse. Quindi applicheremo la modalità di fusione del colore per fondere il design del gradiente con l'immagine di sfondo per un bellissimo design di sfondo parallasse.
Impostazioni dell'immagine di sfondo
Nelle opzioni di sfondo della sezione, seleziona la scheda Immagine di sfondo e carica un'immagine di sfondo . L'aggiornamento quanto segue:
- Usa l'effetto di parallasse: SÌ
- Metodo di parallasse: vera parallasse
- Miscela immagine di sfondo: colore
Perché la modalità di fusione del colore?
La modalità di fusione del colore fonde una versione in scala di grigi dell'immagine con i colori (tonalità e saturazione) del gradiente. Ciò preserva la qualità visiva dell'immagine con una combinazione di colori completamente nuova.
4. Aggiungi una maschera di sfondo (perché no?)
Per completare il design, aggiungiamo una maschera di sfondo che si troverà dietro la nostra intestazione per far risaltare il testo un po' di più ed enfatizzare l'effetto di parallasse.
Impostazioni della maschera di sfondo
Mentre sei nelle opzioni di sfondo della sezione, seleziona la scheda Maschera di sfondo e aggiorna quanto segue:
- Maschera: Lame
- Trasformazione maschera: capovolgi orizzontalmente, inverti
- Dimensione maschera: dimensione personalizzata
- Larghezza maschera: 72vw
- Posizione maschera: in alto a destra
5. Aggiungi uno spazio di scorrimento temporaneo per il test
Prima di controllare i risultati finali, dobbiamo aggiungere dello spazio sopra e sotto la nostra sezione in modo da avere spazio di scorrimento sufficiente per vedere l'effetto di parallasse in azione. Per fare ciò, aggiungi semplicemente il seguente margine alla sezione:
- Margine: 80vh in alto, 80vh in basso
Non dimenticare di rimuovere questa spaziatura quando aggiungi la sezione alla tua pagina.
Risultati finali
Diamo un'occhiata al risultato finale su una pagina live.
Ed ecco lo stesso design che utilizza il metodo CSS Parallax. Si noti che il gradiente rimane fisso/attaccato all'immagine di sfondo in modo che sembri essere una parte dell'immagine reale e non solo un livello.
Utilizzo di una sovrapposizione sfumatura senza la modalità di fusione
Anche se adoro la modalità di fusione per questo design, potresti sentire la necessità di una sovrapposizione del gradiente più tradizionale per la tua immagine di sfondo parallasse.
Ad esempio, puoi scegliere di non aggiungere una modalità di fusione al disegno e semplicemente assegnare a ciascuna delle interruzioni di colore del gradiente un colore semitrasparente. Ciò ti consentirebbe di vedere una rappresentazione più sottile dell'immagine di sfondo dietro la sovrapposizione del gradiente.
Per fare ciò è possibile ridurre l'opacità di ciascun colore a qualcosa come il 72% e quindi riportare l'opzione di fusione dell'immagine di sfondo su Normale.
Ecco un esempio di come sarebbe.
Prova più gradienti!
Il Generatore di sfumature può creare tanti più colori e tipi di sfumatura che puoi utilizzare per far risaltare questi disegni di sfondo a strati. Puoi dare un'occhiata alle nostre demo dal vivo di più possibilità di progettazione del gradiente di sfondo.
Pensieri finali
La creazione di un design di sfondo parallasse con una sovrapposizione sfumata sfumata può essere eseguita facilmente utilizzando le opzioni di sfondo integrate di Divi. Ti dà davvero la potenza di Photoshop in Divi come mai prima d'ora. Sentiti libero di esplorare diverse combinazioni di colori con innumerevoli interruzioni e posizioni di colore sfumato. Inoltre, puoi sperimentare anche diverse modalità di fusione.
Si spera che questo possa tornare utile per il tuo sito Web o per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!