10 trucchi per la progettazione dello sfondo ora possibili con le nuove impostazioni dello sfondo di Divi

Dal rilascio della nuova interfaccia per le opzioni di sfondo di Divi, Divi è diventato ancora più potente. Le nuove funzionalità hanno aperto molte nuove possibilità di design. Oggi presenterò alcuni nuovi trucchi di design di cui potresti non essere a conoscenza e, si spera, di poterti ispirare a creare fantastici design di sfondo.

Esistono innumerevoli combinazioni e miscele di design di sfondo che puoi creare utilizzando Visual Builder. I 10 trucchi che ho scelto per questo post graffieranno solo la superficie, ma hanno lo scopo di introdurti a concetti diversi e suscitare il tuo interesse. La maggior parte di questi trucchi di progettazione viene eseguita utilizzando le nuove opzioni di sfondo come le nuove opzioni di sfondo sfumato e combinando immagini di sfondo con colori sfumati.

Devo avvertirti però. Una volta che inizi a scavare nelle opzioni in background, potresti non uscire mai! E 'così divertente. Beh, almeno per me è stato così.

Godere.

Ecco un'anteprima dei trucchi di design

Come seguire questo post

Invece di dover ricominciare da capo ogni volta che spiego un nuovo trucco di design, ho usato lo stesso design di esempio per la maggior parte di essi e ho aggiunto diversi trucchi a quel design. Ciò significa che la maggior parte degli esempi richiede che tu abbia completato un trucco di progettazione precedente prima di poter virare sul nuovo trucco. I trucchi n. 1-9 seguono tutti la stessa configurazione di base e richiedono il trucco n. 1 come prerequisito. Quindi, se stai testando le funzionalità, ti suggerirei di iniziare con il trucco n. 1.

10 trucchi per la progettazione dello sfondo con Divi

Iscriviti al nostro canale Youtube

Trucco n. 1: sovrapposizione diagonale

Aggiungi una sezione a larghezza intera e quindi inserisci un modulo di intestazione a larghezza intera.

Quindi aggiorna le impostazioni del modulo di intestazione come segue:

Opzioni di contenuto

Titolo: [inserisci titolo]
Sottotitolo: [inserisci sottotitolo]
URL immagine logo: [inserisci logo]
Colori sfumati di sfondo: rgba (12,113,195,0,55), rgba (255,255,255,0)
Tipo di gradiente: lineare
Direzione del gradiente: 135 gradi
Posizione di partenza: 60%
Posizione finale: 60% (qualsiasi 60% o inferiore funzionerà)

Poiché il gradiente inizia e finisce nello stesso punto, in pratica non si verifica alcun effetto gradiente. Quindi il risultato sono i due colori su ciascun lato dell'indicatore del 60%. Quello combinato con l'angolo della direzione del gradiente crea l'effetto.

Opzioni di progettazione

Colore del testo: chiaro
Carattere del titolo: predefinito, grassetto (B), maiuscolo (TT)
Dimensione carattere titolo: 40px
Dimensione carattere sottotitolo: 24 px

Opzioni avanzate

In CSS personalizzato nella casella Elemento principale, aggiungi il seguente CSS:

Padding: 150px 0;

Questo è solo per aggiungere qualche imbottitura aggiuntiva nella parte superiore e inferiore del modulo di intestazione

Salva le impostazioni

Ora è il momento di aggiungere uno sfondo alla tua sezione a larghezza intera. Vai alle impostazioni della sezione a larghezza intera facendo clic sull'icona a forma di ingranaggio nella casella di controllo viola.

Quindi aggiorna le opzioni del contenuto delle impostazioni della sezione come segue:

Immagine di sfondo: [inserisci qui l'immagine di sfondo. Dovrebbe essere largo almeno 1960px. Ho scelto questa immagine da unsplash.com e l'ho ritagliata in modo che la sezione più evidente dell'immagine sia sul lato destro.]
Usa effetto parallasse: S (questo è facoltativo ma penso che funzioni bene con la sovrapposizione diagonale)
Metodo di parallasse: vero parallasse

Questo è tutto! Sentiti libero di regolare l'opacità del colore del gradiente e il grado della direzione del gradiente a tuo piacimento.

Siamo partiti bene, credo. Passiamo al secondo trucco.

Trucco n. 2: sovrapposizioni diagonali a strati

Questo trucco di progettazione è una continuazione del trucco n. 1, quindi assicurati di aver completato il trucco n. 1 prima di continuare.

Nel trucco n. 1, abbiamo interrotto con una sovrapposizione diagonale utilizzando l'opzione del gradiente di sfondo nel modulo di intestazione a larghezza intera.

Utilizzando lo stesso esempio, aggiungi un ulteriore gradiente di sfondo alla sezione a larghezza intera. Abbiamo già un'immagine di sfondo per quella sezione, ma con le nuove opzioni di Divi possiamo combinare i colori sfumati con l'immagine di sfondo e poi fonderli con determinati effetti.

Vai alle impostazioni della sezione a larghezza intera e aggiorna le seguenti opzioni di contenuto :

Colori sfumati di sfondo: rgba (131,0,233,0,38), rgba (255,255,255,0)
Tipo di gradiente: lineare
Direzione gradiente: 135 gradi (uguale all'altra direzione del gradiente nel modulo di intestazione)
Posizione di partenza: 38%
Posizione finale: 38%

Ora fai clic sull'icona dell'immagine di sfondo e modifica quanto segue:

Usa effetto parallasse: No
Miscela immagine di sfondo: Moltiplica

Ora hai 2 sovrapposizioni diagonali sovrapposte che possono essere facilmente personalizzate per un design di sfondo unico.

Trucco n. 3: sovrapposizione del cerchio

Questo trucco di progettazione è una continuazione del trucco n. 1, quindi assicurati di aver completato il trucco n. 1 prima di continuare.

Ora trasformeremo quella sovrapposizione diagonale dal trucco n. 1 in una sovrapposizione circolare. Per fare ciò, vai alle Impostazioni del modulo a larghezza intera e aggiorna quanto segue:

Opzioni di contenuto

Tipo di gradiente di sfondo: radiale
Direzione radiale: Centro
Posizione di partenza: 30%
Posizione finale: 30%

Opzioni di progettazione

Orientamento del testo e del logo: al centro

Ora controlla il nuovo sfondo dell'intestazione.

Questo trucco crea intestazioni o inviti all'azione di grande impatto. La dimensione della sovrapposizione del cerchio può essere facilmente regolata e risponde bene alle diverse dimensioni dello schermo. In questo momento sto usando un colore sfumato semitrasparente sopra un'immagine di sfondo, ma sarebbe fantastico senza un'immagine di sfondo.

Ecco un esempio di come sarebbe senza un'immagine di sfondo e con un colore del testo più scuro.

Trucco n. 4: sovrapporre sovrapposizioni di cerchi per creare un bordo circolare

Questa è una continuazione del trucco n. 3 in cui abbiamo interrotto l'aggiunta di una sovrapposizione di cerchi a un modulo di intestazione a larghezza intera. Una volta posizionato il cerchio sovrapposto, possiamo aggiungere un secondo cerchio sovrapposto per fungere da bordo per il primo. Lo facciamo aggiungendo un altro gradiente di sfondo alla sezione a larghezza intera che si trova dietro il modulo di intestazione a larghezza intera.

Vai alle impostazioni della sezione a larghezza intera e aggiorna quanto segue:

Opzioni di contenuto

Nella scheda Immagine di sfondo:

Usa effetto parallasse: NO
Miscela immagine di sfondo: Moltiplica

Nella scheda Sfumatura di sfondo:

Colori sfumati di sfondo: rgba(0,0,0,0.45), rgba(255,255,255,0)
Tipo di gradiente di sfondo: radiale
Direzione radiale: Centro
Posizione di partenza: 34%
Posizione finale: 34%

Salva le impostazioni

Questo è tutto.

Puoi anche modificare facilmente le dimensioni del cerchio del gradiente di sfondo regolando la percentuale della posizione iniziale.

Trucco n. 5: sovrapposizione del cerchio inverso

Questa è una continuazione del trucco n. 3 che è stato interrotto con una sovrapposizione di cerchi nel modulo di intestazione a larghezza intera. In questo momento il cerchio è blu semitrasparente e il resto dell'immagine di sfondo non ha alcun colore di sovrapposizione del gradiente. Per questo trucco, lo disattiverò e invertirò la sovrapposizione del cerchio in modo che la sovrapposizione del gradiente blu semitrasparente circondi il cerchio e all'interno del cerchio esporrà l'immagine di sfondo dietro di essa.

Per fare ciò, vai alle impostazioni dell'intestazione a larghezza intera e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: rgba (255,255,255,0), rgba (12,113,195,0.79)

Nota: tutto ciò che stai veramente facendo qui è scambiare i colori a sinistra e a destra. Ora il colore trasparente è ciò che mostra all'interno del cerchio e il gradiente blu lo circonda. Aumenterei l'opacità del blu in modo che sia un po' più scuro.

Controlla…

Trucco n. 6: sovrapposizione di cerchi inversi con sfondo video

Questa è una continuazione del trucco n. 5 che ci ha lasciato con una sovrapposizione di cerchi inversi con uno sfondo blu circostante. Attualmente il cerchio espone un'immagine di sfondo dietro di esso. Puoi facilmente aggiungere uno sfondo video per sederti dietro questa sovrapposizione di cerchi. Suggerirei di utilizzare un video che non distragga troppo. Inoltre, ogni volta che utilizzi i video, assicurati che la dimensione del file sia piccola in modo che il tempo di caricamento della pagina non ne risenta.

Per sostituire l'immagine di sfondo con un video, vai su Impostazioni sezione a larghezza intera, fai clic su
icona del video di sfondo e aggiungi il tuo video.

Ora vai alle impostazioni dell'intestazione Fullwidth e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: rgba (12,113,195,0.67), #333333

Con i nuovi colori sfumati, il video di sfondo è visibile solo all'interno del cerchio. E i colori sovrapposti fanno davvero risaltare il testo.

Trucco n. 7: Sovrapposizione del cerchio inverso decentrato

Questa è una continuazione del trucco n. 5 che ci ha lasciato con una sovrapposizione di cerchi inversi. Se torni alle impostazioni dell'intestazione a larghezza intera, puoi regolare la direzione radiale su impostazioni diverse per creare un aspetto diverso per la tua intestazione.

Vai a Impostazioni intestazione Fulwidth e aggiorna quanto segue:

Opzioni di contenuto

Direzione radiale: destra

Opzioni di progettazione

Orientamento testo e logo: a sinistra

Ecco il risultato finale e alcuni esempi di diverse direzioni radiali:

Questi esempi ovviamente richiedono un po' di lavoro, ma rende l'idea.

Trucco n. 8: usare i gradienti per gli effetti ombra

Questo trucco potrebbe non essere sbalorditivo, ma è estremamente utile. Per quelli di noi che non vogliono preoccuparsi di usare un editor di foto come Photoshop per aggiungere ombre alle tue immagini, questo è per te.

Questa è una continuazione del trucco n. 1 che è stato interrotto con una sovrapposizione diagonale utilizzando l'opzione gradiente di sfondo nel modulo di intestazione a larghezza intera. Ora cambiamo la sovrapposizione blu semitrasparente con un'ombra scura che inizia a sinistra dell'immagine e sfuma gradualmente verso destra. In questo modo la parte principale dell'immagine a destra rimane intatta e l'ombra scura a sinistra aiuta a rendere il testo più leggibile.

Per aggiungere l'effetto ombra, vai alle impostazioni dell'intestazione a larghezza intera e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: rgba (0,0,0,0.55), rgba (0,0,0,0)
Direzione gradiente: 90 gradi
Posizione di partenza: 38%
Posizione finale: 85%

Ecco il risultato.

Trucco #9: Miscela immagine di sfondo

Le nuove opzioni di sfondo di Divi includono modalità di fusione CSS per la personalizzazione delle immagini. Esplorare le diverse miscele di immagini è molto divertente e tende a creare alcuni design sorprendenti. Per quelli di voi che non sono designer, non è necessario conoscere la definizione di Saturazione o Luminosità per sfruttare queste fantastiche opzioni. Dovrai avere un colore di sfondo o una sfumatura impostata in combinazione con l'immagine di sfondo per vedere tutti gli effetti fantastici (non funzionerà davvero con solo un'immagine di sfondo). Quindi gioca finché non ottieni l'aspetto che desideri. I risultati potrebbero sorprenderti.

Per questo esempio, continuerò dal trucco n. 1 che è stato interrotto con una sovrapposizione diagonale utilizzando l'opzione gradiente di sfondo nel modulo di intestazione a larghezza intera.

Vai alle Impostazioni intestazione a larghezza intera ed elimina i gradienti di sfondo sotto le Opzioni contenuto.

Salva le impostazioni

Ora vai alle Impostazioni della sezione e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: rgba(0,0,0,0.76), #0c71c3
Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 50%

Non puoi ancora vedere nessuna modifica. Va bene. Vai alla scheda Immagine di sfondo e aggiorna quanto segue:

Usa effetto parallasse: NO
Miscela immagine di sfondo: luce intensa

Questo è tutto. Controlla il risultato.

Nota: i colori usati qui creeranno effetti diversi in base all'immagine di sfondo che usi. Quindi suggerisco di giocare con i colori e le opzioni di fusione finché non ne ottieni uno che ti piace.

Trucco n. 10: stratificazione per aggiungere più colori allo sfondo sfumato.

Per impostazione predefinita, ogni sezione, riga, colonna e modulo può avere due sfumature di colore. Tuttavia, quando li combini e li sovrapponi uno sopra l'altro, puoi creare 5 colori per il tuo sfondo sfumato. E quando questi 5 colori si fondono insieme puoi creare uno spettro piuttosto interessante.

Ecco come lo fai. Innanzitutto, aggiungi una sezione regolare con una riga della struttura a 1 colonna. Quindi all'interno della riga, aggiungi un modulo Blurb.

Aggiorna le impostazioni del modulo Blurb come segue:

Opzioni di contenuto

Titolo: [inserisci titolo]
Contenuto: [inserisci contenuto]

Opzioni di progettazione

Colore del testo: chiaro
Orientamento del testo: al centro
Carattere intestazione: predefinito, grassetto (B)
Dimensione carattere intestazione: 56px
Dimensione del carattere del corpo: 22 px
Imbottitura personalizzata: 100 px in alto, 100 px in basso

Dal momento che il testo del blurb è bianco su uno sfondo bianco, non puoi ancora vederlo, ma va bene. Lo farai presto. È ora di iniziare ad aggiungere i colori sfumati.

Lavoreremo dalla parte posteriore alla parte anteriore, da sinistra a destra. Per iniziare, vai alle Impostazioni della sezione e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: #ff0077, #0c71c3
Direzione gradiente: 90 gradi
Posizione di partenza: 0%
Posizione finale: 30%

Opzioni di progettazione

Imbottitura personalizzata: 0px in alto, 0px in basso

Ora aggiorniamo il nostro prossimo livello di colore sfumato: la nostra riga. Vai alle Impostazioni riga e aggiorna quanto segue:

Opzioni di contenuto

Colori sfumati di sfondo: rgba (255,255,255,0), #8300e9
Direzione gradiente: 90 gradi
Posizione di partenza: 25%
Posizione finale: 50%
Colori sfumati di sfondo della colonna 1: rgba (255,255,255,0), #e02b20
Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 75%

Opzioni di progettazione
Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Imbottitura personalizzata: 0px in alto, 0px in basso

Salva le impostazioni

Ora per il livello finale del gradiente dobbiamo andare al modulo Blurb e aggiornare quanto segue:

Opzioni di contenuto
Colori sfumati di sfondo: rgba (255,255,255,0), #edf000
Direzione gradiente: 90 gradi
Posizione di partenza: 75%
Posizione finale: 100%

Opzioni di progettazione

Imbottitura personalizzata: 100 px in alto, 100 px in basso

Questo è tutto. Ora hai cinque colori sfumati che si fondono insieme per creare uno sfondo piuttosto colorato.

Non dimenticare, puoi anche cambiare il tipo di gradiente in radiale (circolare) e cambiare completamente il design (richiede circa 20 secondi).

Se cambi il tipo di gradiente in radiale per tutti i livelli (sezione, riga, colonna e modulo blurb), otterrai qualcosa di simile.

Trucco bonus

Ecco un esempio di come sovrapporre immagini di sfondo con parallasse. Questa è una sezione normale con un'immagine di sfondo che utilizza True Parallax. All'interno della sezione c'è una riga di 1 colonna che è stata realizzata a larghezza intera e senza riempimento in modo che si estenda per l'intera larghezza della sezione. Alla riga, ho aggiunto un'immagine di sfondo trasparente con alcuni cerchi sfumati (che dovrebbero sembrare bolle) usando il metodo CSS Parallax. Quindi ho aggiunto un modulo di invito all'azione alla riga con uno sfondo trasparente. Questa combinazione crea movimento quando si scorre verso il basso la sezione della pagina.

Questo trucco è un po' più complicato poiché richiede la creazione di una foto personalizzata al di fuori di Divi. Spero semplicemente di mostrarvi le possibilità.

Qualche altro esempio

Concluderò con alcuni esempi di design che ho creato durante il test degli stessi trucchi menzionati in questo post.

Pensieri finali

Spero che ti sia piaciuto esplorare queste nuove opzioni di sfondo e sei entusiasta delle possibilità che offrono. E, poiché queste opzioni sono disponibili su sezioni, righe, colonne e moduli, puoi applicare questi trucchi di progettazione su qualsiasi parte del tuo sito web. Se non l'hai già fatto, prenditi del tempo per scavare un po' più a fondo e lasciare fluire quei succhi creativi. Sono sicuro che se ti prendi il tempo per esplorare le opzioni di sfondo per te stesso, sarai entusiasta di implementarle nel tuo prossimo progetto. Non vedo l'ora di vedere cosa ti viene in mente.

Non vedo l'ora di sentirti nei commenti.