Come creare sovrapposizioni di sfondo sfumato con le impostazioni di sfondo di Divi

Pubblicato: 2017-06-13

Nel tutorial di oggi, esploreremo le nuove ed eleganti possibilità che le nuove funzionalità di progettazione dello sfondo Divi offrono ai tuoi siti Web e più specificamente; utilizzando sovrapposizioni di sfondo sfumato.

Con questo nuovo aggiornamento in background, sono state aggiunte molte nuove opzioni al generatore Divi che ti aiuteranno a soddisfare le tue esigenze durante la progettazione di un sito Web personale o per un cliente. Queste nuove opzioni ti consentono di giocare con l'aspetto e la sensazione del tuo sito web.

Prima del rilascio di questo aggiornamento, la maggior parte delle modifiche, che ora possono essere apportate all'interno del Divi builder, doveva essere apportata tramite codice CSS personalizzato. Apportare modifiche al design del tuo sfondo ora è diventato più facile che mai. Con pochi semplici clic, puoi creare bellissimi sfondi per tutte le diverse sezioni del tuo sito web.

Esempi di sovrapposizioni di sfondo sfumato

Abbiamo creato tre sezioni con un'immagine prima e dopo che ti mostreranno come le nuove opzioni possono migliorare l'intera sensazione che il tuo sito web riflette e dargli quel certo fattore "je ne sais quoi".

La sezione degli eroi

Ecco come appare la sezione dell'eroe quando si aggiunge solo un'immagine di sfondo:

Ed ecco come apparirà il nostro risultato finale quando abbiamo aggiunto la sovrapposizione dello sfondo sfumato alla stessa immagine di sfondo utilizzata nell'immagine sopra:

La sezione Blurb

Ecco come appare la sezione blurb quando si utilizza uno sfondo a un colore:

Ed ecco come appare il risultato finale quando abbiamo aggiunto la sovrapposizione dello sfondo sfumato a uno sfondo con motivo:

La sezione dei prezzi

Ecco come appare la sezione dei prezzi quando usiamo un colore (in un tono più chiaro e più scuro):

Ed ecco come apparirà il risultato finale dopo aver usato la sovrapposizione dello sfondo sfumato:

Ognuno di essi ha impostazioni diverse e ti mostreremo esattamente, e passo dopo passo, come creare questo look in modo da poterlo utilizzare sui tuoi siti web.

Passo dopo passo: la sezione degli eroi

Per la prima sezione di questo post, stiamo ricreando una sezione degli eroi. Questo esempio rifletterà come la funzione di progettazione dello sfondo può modificare i colori utilizzati nell'immagine. E sebbene abbiamo usato una sovrapposizione di sfondo sfumato, le modifiche che abbiamo apportato sono molto sottili. Abbiamo aggiunto un senso di tono più scuro all'immagine in combinazione con un cielo di colore diverso.

Inizia a creare

Iniziamo creando una nuova pagina sul tuo sito Web WordPress. Ora aggiungi una sezione standard a quella pagina con una riga a larghezza intera. Quindi, posiziona i diversi moduli nella tua riga. Abbiamo usato due moduli di testo e un modulo pulsante.

Impostazioni del primo modulo di testo

Il primo modulo di testo è dove apparirà il titolo della tua sezione eroe. Digita il testo che vuoi che appaia nella casella del contenuto all'interno della sottocategoria Testo della scheda Contenuto e passa alla scheda Design.

All'interno della scheda Progettazione, apportare le seguenti modifiche alla sottocategoria Testo:

Orientamento del testo: al centro
Dimensione carattere del testo: 30
Colore carattere testo: #FFFFFF

Impostazioni del secondo modulo di testo

Ora apri il modulo di testo successivo e inserisci anche il testo nella casella del contenuto. Quindi, vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

Orientamento del testo: al centro
Dimensione carattere del testo: 16
Colore carattere testo: #FFFFFF

Scorri verso il basso la stessa scheda e aggiungi "500px" alla Larghezza massima nella sottocategoria Dimensionamento e "2%" al Margine inferiore nella sottocategoria Spaziatura.

Impostazioni dei pulsanti

Ultimo ma non meno importante, apri le impostazioni del Modulo pulsanti. Digita la CTA che vuoi collegare al tuo pulsante nella sottocategoria Testo della scheda Contenuto e vai alla scheda Design.

All'interno della scheda Progettazione, apporta le seguenti modifiche alla sottocategoria Pulsante:

Usa stili personalizzati per il pulsante: Sì
Dimensione del testo del pulsante: 20
Colore del testo del pulsante: #FFFFFF
Colore di sfondo del pulsante: rgba (0,0,0,0)
Larghezza bordo pulsante: 2
Colore bordo pulsante: #FFFFFF
Raggio del bordo del pulsante: 7

Ora, apri le sezioni di riga e apporta le seguenti modifiche nella sottocategoria di spaziatura del modulo Design:

Margine superiore: 15%
Margine inferiore: 10%

Impostazioni sovrapposizione sfondo sfumato

Ora arriviamo alla parte divertente; aggiungendo la sovrapposizione di sfondo sfumato all'immagine di sfondo. Vai avanti e apri l'impostazione della sezione. Quindi, vai alla sottocategoria Sfondo e inizia aggiungendo lo sfondo sfumato.

Per l'esempio che abbiamo fatto, abbiamo usato le seguenti impostazioni:

Primo colore: #3730ff
Secondo colore: #e02b20
Tipo di gradiente: lineare
Direzione gradiente: 272 gradi
Posizione di partenza: 40%
Posizione finale: 100%

Ora vai alla scheda dell'immagine di sfondo e aggiungi l'immagine che preferisci. Abbiamo scelto deliberatamente un'immagine che contenga il cielo per migliorare l'effetto che stiamo cercando di creare.

Ora, scorri verso il basso la stessa scheda. Centrare l'immagine di sfondo e attivare l'opzione Moltiplica nel menu a discesa Miscela immagine di sfondo. Hai anche molte altre opzioni che possono aiutarti a raggiungere il risultato esatto che desideri.

Ed ecco il risultato finale:

Passo dopo passo: la sezione Blurb

Il secondo esempio che ti mostreremo come creare è la sezione blurb. Vogliamo mantenere l'attenzione sul contenuto del blurb, ecco perché non abbiamo optato per uno sfondo occupato ma uno sfondo a motivo.

Il motivo di sfondo utilizzato in questo esempio proviene da Toptal. Puoi scaricare i modelli che ti piacciono per usarli per tutti i tipi di scopi, compresi quelli commerciali. Basta non dimenticare di accreditarli nella fonte del tuo sito web come indicato nelle loro FAQ.

Abbiamo anche reso le icone del blurb leggermente trasparenti per far emergere i colori sfumati. Sebbene ognuno dei blurb abbia le stesse impostazioni, il colore che passa attraverso le icone è leggermente diverso e in linea con i colori sfumati che abbiamo usato.

Inizia a creare

Inizia aggiungendo una sezione standard a una nuova pagina oa una pagina esistente. All'interno di quella sezione, avremo bisogno di una riga con tre colonne.

Continua aggiungendo un modulo Blurb nella prima colonna della riga. Useremo le stesse impostazioni del modulo blurb in ogni colonna. Ecco perché dobbiamo solo creare il modulo blurb una volta e clonarlo per le altre due colonne.

Impostazioni sfocatura

Apri le impostazioni del Modulo Blurb e digita il titolo e il contenuto nella sottocategoria Testo della scheda Contenuto. Passa alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Immagine e icona:

Colore dell'icona: rgba (255,255,255,0.36)
Icona del cerchio: Sì
Colore del cerchio: rgba (255,255,255,0)
Mostra bordo cerchio: Sì
Colore bordo cerchio: rgba (255,255,255,0.36)
Posizionamento immagine/icona: in alto
Usa dimensione carattere icona: Sì
Dimensione carattere icona: 96 px

Scorri verso il basso la stessa scheda e metti l'Orientamento del testo su "Centro" nella sottocategoria Testo.

Continua a scorrere e apri la sottocategoria Testo intestazione. Vai avanti e usa le seguenti impostazioni:

Dimensione carattere intestazione: 18
Colore del testo dell'intestazione: #FFFFFF
Altezza riga di intestazione: 1em

Ora, l'unica cosa rimasta da cambiare è la sottocategoria Corpo del testo. Assicurati che siano applicate le seguenti impostazioni:

Dimensione carattere corpo: 14
Colore del corpo del testo: #FFFFFF
Altezza della linea del corpo: 1,5 em

Non dimenticare di clonare due volte il modulo Blurb, posizionarli nelle altre due colonne rimanenti e modificare il contenuto di conseguenza.

Impostazioni riga

Apri le impostazioni della riga e vai alla sottocategoria Spaziatura nella scheda Progettazione. L'unica cosa che dovrai fare è cambiare il margine superiore e inferiore a "5%".

Impostazioni sovrapposizione sfondo sfumato

Ultimo ma non meno importante, aggiungeremo l'immagine di sfondo con la sovrapposizione del gradiente. Apri le impostazioni della tua sezione e vai alla sottocategoria Sfondo della scheda Contenuto.

Successivamente, apporta le seguenti modifiche all'opzione gradiente:

Primo colore: #52009b
Secondo colore: #0edeed
Tipo di gradiente: radiale
Direzione radiale: destra
Posizione di partenza: 28%
Posizione finale: 100%

Passa all'opzione sfondo, carica il modello scelto e apporta le seguenti modifiche:

Posizione immagine di sfondo: Centro
Ripetizione immagine di sfondo: Ripeti (a seconda del motivo)
Miscela immagine di sfondo: Moltiplica

Questo è tutto! Ora dovresti avere il seguente risultato sbalorditivo:

Passo dopo passo: la sezione dei prezzi

L'ultimo esempio di questo post è la sezione dei prezzi. In questa sezione, volevamo mostrarti che puoi usare lo sfondo sfumato ovunque. Non è fatto solo per essere utilizzato nelle sezioni, ma anche nelle colonne. Useremo solo lo sfondo sfumato per due delle colonne e faremo una sovrapposizione di sfondo sfumato per la seconda colonna.

Il motivo per cui lo facciamo è enfatizzare il pacchetto di prezzi in primo piano. Stiamo usando colori più intensi rispetto alle altre due colonne e stiamo aggiungendo anche uno sfondo a motivo. Queste due cose combinate aumentano le probabilità di attirare persone al tuo pacchetto di prezzi in primo piano, che vuoi promuovere di più.

Inizia a creare

Inizia aggiungendo una nuova sezione standard a una pagina nuova o esistente del tuo sito web. La sezione necessita di una riga con tre colonne. I moduli che utilizzeremo sono gli stessi per ogni colonna e contengono le stesse impostazioni. Ecco perché li creeremo per la prima colonna e li cloneremo nelle altre due colonne in seguito.

Impostazioni del primo modulo di testo

Aggiungi un nuovo modulo di testo alla prima colonna, aggiungi il tipo di pacchetto prezzi alla casella del contenuto nella sottocategoria Testo della scheda del contenuto e passa alla scheda Design.

Applicare le seguenti modifiche alla sottocategoria Testo della scheda Progettazione:

Orientamento del testo: al centro
Dimensione carattere del testo: 24
Colore del carattere del testo: #FFFFFF
Altezza riga di testo: 1,5 em

Scorri verso il basso la stessa scheda e apporta le seguenti modifiche alla sottocategoria Spaziatura:

Margine superiore: 50 px
Margine inferiore: 20 px

Impostazioni del secondo modulo di testo

Aggiungi un altro modulo di testo alla stessa colonna. Annota il prezzo del pacchetto nella casella del contenuto all'interno della sottocategoria Testo della scheda Contenuto e passa alla scheda Design.

Nella scheda Progettazione, apportare le seguenti modifiche:

Orientamento del testo: al centro
Dimensione carattere del testo: 82px
Colore carattere testo: #FFFFFF
Altezza riga di testo: 1.1em

Scorri verso il basso la stessa scheda e aggiungi "10px" al margine inferiore.

Impostazioni del terzo modulo di testo

Per il nostro ultimo modulo di testo, aggiungi il testo alla casella del contenuto nella sottocategoria Testo della scheda Contenuto. Quindi, vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

Orientamento del testo: al centro
Dimensione carattere del testo: 16
Colore carattere testo: #FFFFFF
Altezza riga di testo: 1.1em

Scorri verso il basso la stessa scheda e aggiungi "33 px" al margine inferiore nella sottocategoria Spaziatura.

Impostazioni dei pulsanti

Il prossimo modulo che aggiungeremo a questa colonna è il Modulo Pulsante. Digita l'invito all'azione che desideri visualizzare nella casella del contenuto all'interno della sottocategoria Testo della scheda Contenuto e passa alla scheda Design.

All'interno della scheda Progettazione, metti Allineamento pulsante nella sottocategoria Allineamento su "Centro" e apporta le seguenti modifiche alla sottocategoria Pulsante:

Usa stili personalizzati per il pulsante: Sì
Dimensione del testo del pulsante: 13
Colore del testo del pulsante: #FFFFFF
Colore di sfondo del pulsante: rgba (255,255,255,0.11)
Larghezza bordo pulsante: 2
Colore bordo pulsante: #FFFFFF
Raggio del bordo del pulsante: 4
Spaziatura delle lettere dei pulsanti: 1

Impostazioni divisori

Infine, aggiungeremo un divisore alla colonna per creare spazio. Seleziona "Non mostrare divisore" nella scheda Contenuto e vai alla scheda di progettazione dove inserisci "25 px" nel campo dell'altezza.

Ora che abbiamo aggiunto tutti i moduli, assicurati di clonarli e di inserirli anche nelle altre colonne.

Impostazioni sovrapposizione sfondo sfumato

Per questo esempio, utilizzeremo due diverse impostazioni di sfondo per le diverse colonne. La prima e l'ultima colonna saranno le stesse e la seconda sarà leggermente diversa.

Vai alle impostazioni della riga e applica le seguenti modifiche all'opzione del gradiente della prima e della terza colonna all'interno della sottocategoria Sfondo della scheda Contenuto:

Primo colore: rgba (10,122,178,0,57)
Secondo colore: rgba (142,0,142,0.47)
Colonna 1 Tipo di gradiente: radiale
Colonna 1 Direzione radiale: in alto a sinistra
Colonna 1 Posizione iniziale: 0
Posizione finale della colonna 1: 100%

Quindi, vai alla colonna 2 e apporta le seguenti modifiche all'opzione gradiente:

Primo colore: #0a7ab2
Secondo colore: #8e008e
Tipo di gradiente colonna 2: lineare
Colonna 2 Direzione gradiente: 180 gradi
Colonna 2 Posizione iniziale: 0
Posizione finale della colonna 2: 100

Passa all'opzione dell'immagine di sfondo, carica l'immagine di sfondo e modifica le impostazioni:

Colonna 2 Posizione immagine di sfondo: in alto a sinistra
Colonna 2 Immagine di sfondo Ripeti: Ripeti
Colonna 2 Miscela immagine di sfondo: Moltiplica

Pensieri finali

Gli esempi che ti abbiamo mostrato in questo post sul blog sono solo una frazione dei risultati che puoi ottenere utilizzando le nuove funzionalità di progettazione dello sfondo. Nei prossimi post, ci occuperemo sicuramente anche di altri esempi che ti aiuteranno a creare fantastici design per i siti web che realizzi. Se hai domande, commenti o suggerimenti; lascia 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!