Come creare bellissimi sfondi sfocati con Divi

Gli sfondi sfumati fanno oggi parte di quasi tutti i siti Web moderni che incontri. Ma non appena si desidera creare un gradiente più complesso, probabilmente si tende a utilizzare un software di modifica delle immagini. Con Divi, c'è un'alternativa. Grazie alle numerose opzioni integrate di Divi, puoi trasformare i moduli immagine in sfondi sfocati. Sfocheremo gli sfondi fino a un punto in cui solo i colori vengono visualizzati e quindi formano un gradiente. Ricreeremo un bellissimo esempio da zero e condivideremo anche il file JSON di esempio di progettazione gratuitamente!

Arriviamo ad esso!

Anteprima

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

Desktop

Mobile

Scarica GRATUITAMENTE il layout degli sfondi sfocati

Per mettere le mani sul layout gratuito degli sfondi sfocati, dovrai 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.

SCARICA

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!

Approccio

• Stiamo aggiungendo tre diversi moduli a una colonna; due moduli immagine e un modulo CTA
• La prima immagine mantiene il suo aspetto iniziale
• La seconda immagine sarà sfocata e ingrandita
• Miglioreremo anche i colori giocando con le altre impostazioni dei filtri che sono incluse nel Modulo Immagine
• Il modulo CTA si sovrapporrà al modulo immagine sfocato e lo utilizzerà come sfondo
• Per assicurarci che la sfocatura e l'aumento delle dimensioni di Image Module #2 non superino il contenitore della colonna, nasconderemo l'overflow della colonna

Iniziamo a ricreare

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento nella scheda di progettazione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza massima: 100%

Colonna 2 Overflow

Passa alla scheda Avanzate e nascondi l'overflow della colonna 2 utilizzando una singola riga di codice CSS. Ciò ci aiuterà ad assicurarci che nulla superi il contenitore della colonna. Ciò diventerà particolarmente importante quando inizieremo a trasformare un modulo immagine in uno sfondo sfocato e ne aumenteremo le dimensioni.

overflow: hidden;

Colonna 3 Overflow

Fai la stessa cosa per la terza colonna.

overflow: hidden;

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi copia H2

È ora di iniziare ad aggiungere moduli, iniziando con un modulo di testo nella prima colonna. Inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Passa alla scheda Design e modifica le impostazioni del testo H2.

• Intestazione 2 Carattere: Poppins
• Colore testo titolo 2: #232323
• Intestazione 2 Dimensioni del testo: 40 px

Spaziatura

Aggiungi anche un margine superiore personalizzato.

• Margine superiore: 9vw

Aggiungi modulo divisore alla colonna 1

Visibilità

Il secondo modulo di cui abbiamo bisogno nella colonna 2 è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda Design e cambia il colore della linea.

• Colore linea: #000000

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Continua aggiungendo un altro modulo di testo con il contenuto del paragrafo di tua scelta.

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Carattere del testo: Poppins
• Peso del carattere del testo: leggero
• Dimensione del testo: 17px
• Altezza riga di testo: 2.1em

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Inserisci una copia a tua scelta.

Impostazioni dei pulsanti

Passa alla scheda Design e modella il pulsante nelle impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 20 px
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #f4f4f4
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Poppins
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Aggiungi anche alcuni valori di spaziatura personalizzati.

• Margine superiore: 20px
• Margine inferiore: 20 px
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi il modulo immagine n. 1 alla colonna 2

Carica immagine 1:1

Alla seconda colonna! Qui, il primo modulo di cui abbiamo bisogno è un modulo immagine. Carica un'immagine con un rapporto 1:1. Ciò significa che la tua immagine deve essere un quadrato perfetto (la larghezza dovrebbe essere uguale all'altezza).

Dimensionamento

Passa alla scheda di progettazione e abilita l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Aggiungi il modulo immagine n. 2 alla colonna 2

Carica immagine 1:1

Il secondo modulo di cui abbiamo bisogno nella colonna 2 è un altro modulo immagine. Stiamo, ancora una volta, usando un'immagine con un rapporto 1:1.

Dimensionamento

Passa alla scheda Design e modifica le impostazioni di dimensionamento.

• Forza intera larghezza: Sì
• Altezza: 320 px

Spaziatura

Crea una sovrapposizione tra questo e il modulo precedente aggiungendo un margine superiore negativo.

• Margine superiore: -100 px

Filtri

Successivamente, modificheremo le impostazioni dei filtri. Questa è la parte in cui trasformiamo l'immagine in uno sfondo sfocato.

• Saturazione: 200%
• Luminosità: 145%
• Contrasto: 117%
• Sfocatura: 40 px

Trasforma scala

Per assicurarci che l'immagine copra l'intera larghezza della colonna, aumenteremo le dimensioni nelle impostazioni di trasformazione. Grazie all'overflow delle colonne nascoste che abbiamo aggiunto alle impostazioni delle righe, nulla supererà il contenitore delle colonne.

• Destra: 180%
• Fondo: 180%

Aggiungi modulo CTA alla colonna 2

Aggiungi contenuto

Il prossimo e ultimo modulo di cui abbiamo bisogno nella seconda colonna è un modulo CTA. Inserisci una copia a tua scelta.

Aggiungi collegamento

Passa alle impostazioni del collegamento e aggiungi un URL di collegamento del pulsante per visualizzare il pulsante nel design.

Rimuovi colore di sfondo

Rimuovi anche il colore di sfondo.

• Usa colore di sfondo: No

Impostazioni del testo del titolo

Continua andando alla scheda Design e modificando le impostazioni del testo del titolo.

• Livello titolo titolo: H3
• Carattere del titolo: Poppins
• Dimensione del testo del titolo: 40px
• Spaziatura delle lettere del titolo: -1px

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Carattere del corpo: Poppins
• Peso del carattere del corpo: leggero
• Altezza della linea del corpo: 2.2em

Impostazioni dei pulsanti

Insieme alle impostazioni dei pulsanti.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 20 px
• Colore del testo del pulsante: #ffffff
• Colore sfumato 1: rgba(244.244.244,0,4)
• Colore sfumato 2: rgba (255,255,255,0)
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Poppins
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

• Margine superiore: 50 px
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Spaziatura

Ultimo ma non meno importante, crea una sovrapposizione tra questo modulo e lo sfondo sfocato aggiungendo un margine superiore negativo. Stiamo anche lasciando degli spazi bianchi sul lato sinistro e destro del modulo

• Margine superiore: -250 px
• Imbottitura sinistra: 2vw
• Imbottitura destra: 2vw

Clona tutti i moduli nella colonna 2 e posiziona i duplicati nella colonna 3

Una volta completati tutti i moduli nella seconda colonna, puoi clonarli e posizionare i duplicati nella terza colonna.

Modifica modulo immagine duplicata n. 1

Cambia immagine

Cambia l'immagine nel Modulo Immagine n. 1.

Modifica modulo immagine duplicata n. 2

Cambia immagine

Fai lo stesso per il secondo modulo immagine nella colonna.

Modifica le impostazioni dei filtri

E modifica anche le impostazioni dei filtri del secondo modulo immagine.

• Saturazione: 180%
• Luminosità: 102%
• Contrasto: 117%
• Sfocatura: 35px

Modifica modulo CTA duplicato

Cambia copia

Continua modificando il contenuto del modulo CTA.

Cambia sfondo sfumato pulsante

Insieme al primo pulsante di colore sfumato e il gioco è fatto!

• Colore sfumato 1: rgba(244.244.244.0.15)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare sfondi sfocati utilizzando solo le opzioni integrate di Divi. Abbiamo ricreato da zero un bellissimo esempio che puoi utilizzare per qualsiasi tipo di sito web che crei. Ci auguriamo che questo tutorial ti ispiri a creare i tuoi design personalizzati utilizzando i suggerimenti condivisi in questo tutorial. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.