Come rendere la tua intestazione trasparente appiccicosa su Scroll con Divi

Quando si tratta di impostare un'intestazione globale per il tuo sito Web, ci sono molti modi per affrontarla. Uno degli approcci più sottili è un'intestazione trasparente. Le intestazioni trasparenti sono posizionate sopra le sezioni degli eroi delle tue pagine, il che può portare a bellissimi design che si concentrano su un approccio minimo ma chiaro. Se decidi di scegliere un'intestazione trasparente ma hai bisogno di un'intestazione adesiva sullo scorrimento, adorerai questo tutorial. Usando le opzioni adesive integrate di Divi, ti mostreremo come passare da un'intestazione trasparente a un'intestazione adesiva con uno stile diverso durante lo scorrimento. La transizione tra trasparente e appiccicosa è senza sforzo! Potrai anche scaricare gratuitamente il file JSON.

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il modello di intestazione globale GRATUITAMENTE

Per mettere le mani sul modello di intestazione globale gratuito, 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!

1. Costruire la struttura dell'elemento dell'intestazione all'interno di un nuovo modello di intestazione

Crea un nuovo modello di intestazione globale

Inizia andando al Divi Theme Builder. Lì, inizia a creare una nuova intestazione globale o personalizzata.

Sezione #1 Impostazioni

Colore di sfondo

Una volta all'interno dell'editor dei modelli, noterai una sezione. Questa sezione sarà dedicata alla barra dell'intestazione in alto che puoi notare nell'anteprima di questo post. Apri le impostazioni della sezione e aggiungi un colore di sfondo nero.

• Colore di sfondo: #000000

Spaziatura

Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Aggiungi un modulo di testo alla colonna della riga e inserisci una copia a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Oswald
• Stile del carattere del testo: maiuscolo
• Colore del testo: #ffffff
• Dimensione del testo:
  • Desktop: 19px
  • Tablet: 18px
  • Telefono: 16px
• Allineamento del testo: Centro

Aggiungi sezione #2

Spaziatura

Proprio sotto la prima sezione, aggiungi un'altra sezione normale. Questa sezione sarà dedicata al nostro menu trasparente che risulterà appiccicoso sullo scorrimento. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito nella scheda di progettazione.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Colore di sfondo trasparente

Apri le impostazioni della riga e applica un colore di sfondo completamente trasparente alla riga.

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

Dimensionamento

Passa alla scheda di progettazione della riga e modifica le impostazioni di dimensionamento.

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

Spaziatura

Aggiungi un po' di imbottitura sinistra e destra personalizzata in seguito.

• Imbottitura sinistra: 10%
• Imbottitura destra: 10%

Scatola ombra

Quindi, applica un'ombra trasparente a scatola. Più avanti nel tutorial, useremo questa ombra della scatola in uno stato appiccicoso con un diverso colore dell'ombra.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0)

Posizione

Per assicurarci che la riga appaia in cima al contenuto della pagina, con uno sfondo trasparente, utilizzeremo una posizione assoluta per la nostra riga nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Colonna 2 Visibilità

Stiamo anche nascondendo la seconda colonna della nostra riga su tablet e telefono per avere un design dell'intestazione meno complesso su schermi di dimensioni più piccole.

Aggiungi modulo menu alla colonna 1

Seleziona Menu

Ora che le nostre impostazioni di riga sono a posto, è il momento di aggiungere moduli, iniziando con un Modulo menu nella colonna 1. Seleziona un menu a tua scelta.

Carica logo

Carica un logo successivo.

Rimuovi colore di sfondo

Rimuovi anche il colore di sfondo del modulo.

Menu Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del menu di conseguenza:

• Carattere del menu: Oswald
• Peso del carattere del menu: grassetto
• Stile del carattere del menu: maiuscolo
• Colore del testo del menu: #efefef
• Dimensione del testo del menu: 18px
• Allineamento del testo: a destra

Impostazioni del menu a discesa

Modifica anche le impostazioni del menu a discesa.

• Colore linea menu a discesa: rgba(0,0,0,0)
• Colore di sfondo del menu mobile: rgba(0,0,0,0.95)

Impostazioni icone

Quindi, cambia i colori delle icone nelle impostazioni delle icone.

• Colore icona carrello: #ffffff
• Colore icona di ricerca: #ffffff
• Colore icona menu hamburger: #ffffff

Impostazioni logo

Stiamo anche cambiando il colore del nostro logo nelle impostazioni del logo cambiando il filtro di inversione dell'immagine.

• Inversione immagine: 90%

Dimensionamento

Quindi, assegneremo un'altezza massima al nostro logo.

• Altezza massima logo: 40px

Spaziatura

Successivamente, aggiungeremo un'imbottitura superiore e inferiore su schermi di dimensioni più piccole.

• Imbottitura superiore:
  • Tablet e telefono: 10px
• Imbottitura inferiore:
  • Tablet e telefono: 10px

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento dei pulsanti

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Modella il pulsante successivo.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ed4441
• Colore bordo pulsante: #ed4441

• Raggio bordo pulsante: 0px
• Spaziatura lettere pulsanti: 4px
• Carattere pulsante: Oswald
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo
• Mostra icona pulsante: Sì
• Colore icona pulsante: #1a1a1a

Spaziatura

E completa le impostazioni del modulo aggiungendo alcuni valori di spaziatura personalizzati.

• Margine superiore: -70 px
• Imbottitura superiore: 25px
• Imbottitura inferiore: 25px

2. Applica effetti adesivi personalizzati

Ruota la sezione n. 2 appiccicosa

Ora che abbiamo posto le basi della nostra intestazione, è il momento di applicare l'effetto adesivo! Per farlo, inizia aprendo le impostazioni della seconda sezione e applica le seguenti impostazioni permanenti alla scheda Avanzate:

• Posizione appiccicosa: bastone in alto
• Offset superiore appiccicoso: 0px
• Limite appiccicoso inferiore: nessuno
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Colore di sfondo riga appiccicosa

Ora che l'opzione adesiva è abilitata, possiamo apportare modifiche al design adesive a tutti gli elementi all'interno della sezione. Inizieremo aprendo la riga contenente il nostro menu e applicando un colore di sfondo appiccicoso bianco.

• Colore di sfondo: #FFFFFF

Spaziatura righe adesive

Successivamente, modificheremo i valori di spaziatura permanente della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Sticky Row Box Shadow

Stiamo anche cambiando il colore dell'ombra della scatola in uno stato appiccicoso.

• Colore ombra: rgba (0,0,0,0.08)

Posizionamento della fila appiccicosa

Quindi, riporteremo il posizionamento della riga su relativo in uno stato appiccicoso.

• Posizione: Parente
• Origine offset: in alto a sinistra

Menu appiccicoso Impostazioni testo

Successivamente, cambieremo il colore del testo del menu appiccicoso.

• Colore del testo del menu: #000000

Impostazioni a discesa del menu appiccicoso

Insieme al colore di sfondo del menu mobile nelle impostazioni del menu a discesa.

• Colore di sfondo del menu mobile: #ffffff

Colori dell'icona del menu appiccicoso

Cambia anche i colori dell'icona in uno stato appiccicoso.

• Colore icona carrello: #000000
• Colore icona di ricerca: #000000
• Colore icona menu hamburger: #000000

Filtro logo appiccicoso

Quindi, rimuovi il filtro di inversione dell'immagine del logo in uno stato appiccicoso.

• Inversione immagine: 0%

Spaziatura dei pulsanti permanenti

E completa il tutorial rimuovendo il margine superiore negativo del pulsante mentre è appiccicoso.

• Margine superiore: 0px

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 combinare Divi's Theme Builder con le nuove opzioni permanenti. Più specificamente, ti abbiamo mostrato come passare da un'intestazione trasparente a un'intestazione adesiva con uno stile diverso durante lo scorrimento. Questo approccio ti consente di unire il design della tua pagina con il tuo menu mantenendo comunque una bella intestazione appiccicosa sullo scorrimento. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a 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.