Come aggiungere effetti filtro sfondo CSS a un'intestazione adesiva in Divi

L'aggiunta di effetti di filtro sullo sfondo CSS è un modo divertente e unico per migliorare il design di un menu di intestazione appiccicoso. Ciò che rende la proprietà CSS del filtro sfondo così unica è che consente di applicare effetti di filtro all'area dietro un elemento. Questa è un'opzione perfetta per le intestazioni adesive perché il design della tua pagina può essere magicamente modificato dietro l'intestazione mentre scorri la pagina. Potresti aver visto questo effetto utilizzato su siti popolari come apple.com.

In questo tutorial, ti mostreremo come aggiungere effetti di filtro sullo sfondo CSS a un'intestazione adesiva in Divi. Innanzitutto, spiegheremo il semplice processo di aggiunta di effetti di filtro sullo sfondo a un'intestazione esistente che prevede 3 semplici passaggi. Successivamente, analizzeremo come costruire l'intera intestazione da zero.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Nota gli effetti del filtro sfocatura e saturazione applicati agli elementi dietro l'intestazione mentre scorri.

Per una semplice demo live di questo effetto di filtro sullo sfondo aggiunto a un'intestazione, dai un'occhiata a questo codepen.

Scarica GRATUITAMENTE il modello di intestazione globale

Per mettere le mani sui disegni di questo tutorial, 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!

Come caricare il modello

Vai a Divi Theme Builder

Per caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.

Carica il modello di sito Web predefinito globale

Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.

Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".

Salva le modifiche al generatore di temi Divi

Una volta caricato il file, noterai una nuova intestazione e un piè di pagina globali nel modello di sito Web predefinito. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.

Passiamo al tutorial, vero?

Aggiunta di effetti filtro sullo sfondo CSS a un'intestazione esistente

Il modo più semplice per dimostrare il processo è aggiungere effetti di filtro sullo sfondo CSS a un'intestazione esistente in Divi. In realtà, si riduce a questi tre semplici passaggi:

1. Aggiungi un colore di sfondo semitrasparente alla sezione dell'intestazione
2. Aggiungi il CSS personalizzato del filtro sullo sfondo alla sezione dell'intestazione
3. Aggiungi una posizione fissa alla sezione dell'intestazione

Ecco come farlo in Divi.

Modifica intestazione in Generatore di temi

Vai al Generatore di temi e fai clic per modificare il modello di intestazione esistente.

Aggiungi colore di sfondo semitrasparente alla sezione

Apri le impostazioni nella sezione contenente gli elementi del menu di intestazione. Quindi aggiungi un colore di sfondo semitrasparente alla sezione. In questo esempio diamo alla sezione il seguente colore di sfondo:

• Colore di sfondo: rgba(0,0,0,0,8)

Aggiungi filtro sfondo CSS personalizzato

Successivamente, possiamo aggiungere gli effetti del filtro dello sfondo (usando la proprietà CSS del filtro dello sfondo) con un frammento di CSS personalizzato nell'elemento principale della sezione. Nella scheda Avanzate, incolla il seguente CSS nell'Elemento principale:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Questi effetti filtro sono simili agli effetti filtro incorporati in tutti gli elementi Divi. La differenza principale è che il filtro di sfondo aggiunge l'effetto agli elementi dietro di esso, mentre gli effetti filtro incorporati di Divi aggiungono l'effetto all'elemento stesso.

Qui stiamo usando 2 effetti filtro (saturazione e sfocatura) che applicheranno l'effetto filtro a qualsiasi elemento di design dietro la sezione.

Sentiti libero di esplorare l'aggiunta di altri valori di funzione di filtro (o una combinazione di questi) per creare il tuo design unico. I più utili di questi includono:

• sfocatura()
• luminosità()
• contrasto()
• scala di grigi()
• tonalità-ruota()
• invertire()
• seppia()
• saturare()

Aggiungi posizione permanente all'intestazione

Infine, assicurati di dare alla sezione dell'intestazione una posizione appiccicosa.

Risultato finale

Ecco uno sguardo al risultato finale su una pagina live. Nota gli effetti del filtro sfocatura e saturazione applicati agli elementi dietro l'intestazione mentre scorri.

Costruire un'intestazione con gli effetti del filtro sullo sfondo CSS da zero

Se vuoi creare da zero l'intera intestazione con effetti di filtro sullo sfondo CSS, ecco come farlo.

Crea un'intestazione globale in Generatore di temi

Vai al Generatore di temi e fai clic su Crea una nuova intestazione globale.

Creazione di una sezione permanente con effetti filtro sfondo CSS

Iniziamo creando una sezione adesiva con gli effetti filtro di sfondo CSS come abbiamo fatto nella prima parte di questo tutorial.

Nell'editor del layout dell'intestazione globale, aggiungi una riga a una colonna alla sezione.

Apri le impostazioni della sezione. Quindi aggiungi il seguente colore di sfondo semitrasparente alla sezione:

• Colore di sfondo: rgba(0,0,0,0,8)

Aggiorna l'imbottitura come segue:

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

Successivamente, possiamo aggiungere gli effetti del filtro dello sfondo (usando la proprietà CSS del filtro dello sfondo) con un frammento di CSS personalizzato nell'elemento principale della sezione. Nella scheda Avanzate, incolla il seguente CSS nell'Elemento principale:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Infine, assicurati di dare alla sezione dell'intestazione una posizione appiccicosa.

• Posizione appiccicosa: bastone in alto

Modifica impostazioni riga

Ora che la sezione è terminata, apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 95%
• Imbottitura: 20px in alto, 20px in basso

Aggiungi immagine logo

Dopo che le impostazioni della riga sono state aggiornate, aggiungi un modulo immagine alla riga/colonna per creare il logo.

Carica l'immagine del logo nel modulo immagine.

L'aggiornamento delle impostazioni di progettazione dell'immagine come segue:

• Larghezza: 50px
• Margine: 0 px a destra

Crea menu

Quindi, aggiungi un modulo menu sotto il modulo immagine.

Nella scheda contenuto, seleziona un menu e assegna al menu un colore di sfondo trasparente.

• Colore di sfondo: rgba(0,0,0,0)

Nella scheda Progettazione, aggiorna le impostazioni di progettazione del menu come segue:

• Stile: allineato a sinistra
• Colore collegamento attivo: #fff
• Carattere del menu: Montserrat
• Peso del carattere del menu: semi grassetto
• Colore del testo del menu: #fff
• Allineamento del testo: Centro
• Colore di sfondo del menu a discesa: #333
• Colore linea menu a discesa: #fff
• Colore del testo del menu a discesa: #fff
• Menu a tendina Link attivo: #fff
• Sfondo del menu mobile: #333
• Colore testo menu mobile: #fff
• Colore icona carrello: #fff
• Colore icona di ricerca: #fff
• Colore icona menu hamburger: #fff
• Larghezza: 80% (desktop e tablet)

Pulsante Crea con modulo di testo

Per creare il piccolo pulsante per l'intestazione, utilizzeremo un modulo di testo. Aggiungi un modulo di testo sotto il menu.

Aggiorna il contenuto del corpo con il lavoro "Negozio". Quindi dai al modulo di testo un colore di sfondo bianco.

• Corpo del testo: "Negozio"
• Colore di sfondo: #fff

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del testo: Montserrat
• Peso del carattere del testo: semi grassetto
• Colore del testo del testo: #333
• Altezza riga di testo: 2em
• Allineamento del testo: Centro
• Larghezza: 50px
• Angoli arrotondati: 5px

Qui il modulo di testo ha la stessa larghezza dell'immagine del logo. Ciò aiuterà ad allineare perfettamente gli elementi quando utilizziamo la proprietà flex sulla colonna con CSS personalizzato.

Allinea i moduli in colonna con la proprietà Flex CSS

Una volta che il logo, il menu e il modulo di testo sono stati aggiunti alla colonna, apri le impostazioni della colonna e incolla il seguente CSS personalizzato nell'elemento principale:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Salva layout e modello di intestazione

Una volta fatto, assicurati di salvare il layout e il modello.

Risultato finale

Ecco un altro sguardo al design finale. Nota gli effetti del filtro sfocatura e saturazione applicati agli elementi dietro l'intestazione mentre scorri.

Supporto browser

Sfortunatamente, la proprietà CSS del filtro dello sfondo attualmente non funziona bene su IE e Firefox. Tuttavia, il fallback sarà il colore di sfondo semitrasparente dato alla sezione, che funziona ancora e ha un bell'aspetto.

Pensieri finali

Si spera che il tuo prossimo progetto trarrà vantaggio da un'intestazione con un piacevole effetto filtro sullo sfondo. È davvero facile da aggiungere a qualsiasi intestazione in Divi e divertente esplorare tutti i diversi valori delle funzioni di filtro disponibili.

Non vedo l'ora di sentirti nei commenti.

Saluti!