Ti piacerebbe creare una bella intestazione trasparente e appiccicosa con Divi?
Quando si tratta di impostare un'intestazione globale per il tuo sito web, ci sono molti modi per affrontarlo. Uno degli approcci più sottili è un'intestazione trasparente.
Se decidi di utilizzare un'intestazione trasparente ma hai bisogno che sia appiccicosa durante lo scorrimento, adorerai questo tutorial. Il passaggio tra trasparente e appiccicoso è semplice!
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato.
Crea un nuovo modello di intestazione globale
Vai su Divi > Creazione temi.
Sezione #1 Impostazioni
Colore di sfondo
Una volta nell'editor dei modelli, noterai una sezione. Questa sezione sarà dedicata alla barra di intestazione in alto che puoi notare nell'anteprima di questo articolo. Apri le impostazioni della sezione e aggiungi un colore di sfondo nero.
- Sfondo: #000000
spaziatura
Passa alla scheda Stile sezione e rimuovi tutti i margini interni (superiore e inferiore) per impostazione predefinita.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Aggiungi un modulo di testo alla colonna
Aggiungi un modulo Testo alla colonna della riga e inserisci un messaggio a tua scelta.
Impostazioni del testo
Passa alla scheda Stile modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Oswald
- Stile di copia del testo: TT
- Colore del testo Testo: #ffffff
- Testo Dimensione testo:
- Desktop: 19px
- Tablet: 18px
- Telefono: 16px
- Allineamento del testo: centrato
Aggiungi la sezione # 2
spaziatura
Appena sotto la prima sezione, aggiungi un'altra sezione normale. Questa sezione sarà dedicata al nostro menu trasparente che diventerà appiccicoso durante lo scorrimento.
Apri le impostazioni della sezione e rimuovi tutti i margini interni (in alto e in basso) per impostazione predefinita nella scheda Stile.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo trasparente
Apri le impostazioni della linea e applica un colore di sfondo completamente trasparente alla linea.
- Sfondo: RGB (255,255,255,0)
dimensionamento
Passa alla scheda Stile linea e modifica le impostazioni di ridimensionamento.
- Usa larghezza grondaia personalizzata: Sì
- Spaziatura delle colonne: 1
- Larghezza massima: 100%
- Larghezza massima: 100%
spaziatura
Quindi aggiungi margini interni personalizzati (sinistro e destro).
- Margine interno sinistro: 10%
- Margine interno Legge: 10%
Scatola delle ombre
Quindi, applica un'ombra a scatola trasparente. Più avanti nel tutorial useremo questa ombra della scatola in uno stato appiccicoso con un colore dell'ombra diverso.
- Intensità sfocatura ombra scatola: 50px
- Colore carattere sottotitoli: rgba (0,0,0,0)
Posizione
Per assicurarti che la linea appaia nella parte superiore del file contenuto della pagina, con sfondo trasparente, utilizzeremo una posizione assoluta per la nostra riga nella scheda avanzata.
- Posizione: Assoluta
- Posizione: in alto a sinistra
Colonna 2 Visibilità
Nascondiamo anche la seconda colonna della nostra riga su tablet e telefono per avere un design dell'intestazione meno complesso su schermi di dimensioni inferiori.
Aggiungi il modulo Menu alla colonna 1
Seleziona un 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 il menu di tua scelta.
Scarica il logo
Quindi carica un logo.
Rimuovi il colore di sfondo
Rimuovere anche il colore di sfondo dal modulo.
Impostazioni del testo del menu
Passa alla scheda Stile del modulo e modifica le impostazioni del testo del menu di conseguenza:
- Menu dei caratteri: Oswald
- Menu luce soffusa: grassetto
- Menu stile copia: TT
- Colore testo menu: #efef
- Dimensione testo menu: 18px
- Allineamento del testo: a destra
Impostazioni del menu a discesa
Modificare anche le impostazioni del menu a discesa.
- Colore riga a discesa: rgba(0,0,0,0)
- Menu mobile Colore di sfondo: rgba (0,0,0,0,95)
Impostazioni delle icone
Quindi, cambia i colori delle icone nelle impostazioni delle icone.
- Colore icona carrello: #ffffff
- Colore icona ricerca: #ffffff
- Colore icona menu hamburger: #ffffff
Impostazioni del logo
Cambiamo anche il colore del nostro logo nelle impostazioni del logo modificando il filtro di inversione dell'immagine.
- Inversione immagine: 90%
dimensionamento
Successivamente, assegneremo un'altezza massima al nostro logo.
- Larghezza massima del logo: 40 pixel
spaziatura
Successivamente, aggiungeremo il riempimento superiore e inferiore su schermi di piccole dimensioni.
- Margine interno del picco:
- Tablet e telefono: 10px
- Margine interno inferiore:
- Tablet e telefono: 10px
Aggiungi il modulo Button alla colonna 2
Aggiungi testo al pulsante
Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo Button. Aggiungi un testo a tua scelta.
Allineamento dei pulsanti
Passa alla scheda Stile modulo e modifica l'allineamento dei pulsanti.
- Allineamento pulsanti: a destra
Impostazioni dei pulsanti
Personalizza il pulsante successivo.
- Usa stili personalizzati per Button: Sì
- Dimensione testo pulsante: 16px
- Colore testo pulsante: #ffffff
- Pulsante Sfondo: #ed4441
- Colore bordo bottone: #ed4441
- Pulsante Raggio bordo: 0 pixel
- Spaziatura lettere pulsanti: 4px
- Carattere pulsante: Oswald
- Pulsante Luce soffusa: testo in grassetto
- Pulsante stile copia: TT
- Mostra icona pulsante: Sì
- Colore icona pulsante: #1a1a1a
spaziatura
E completa i parametri del modulo aggiungendo valori di spaziatura personalizzati.
- Margine superiore: -70px
- Margine interno superiore e inferiore: 25 px
Applica effetti appiccicosi personalizzati
Rendi appiccicosa la sezione n. 2
Ora che abbiamo gettato le basi per la nostra intestazione, è il momento di applicare l'effetto appiccicoso! Per fare ciò, inizia aprendo le impostazioni nella seconda sezione e applica le seguenti impostazioni permanenti alla scheda avanzate:
- Posizione appiccicosa: resta in alto
- Offset superiore stick: 0px
- Mimitazione appiccicosa inferiore: nessuna
- Compensazione dagli elementi appiccicosi circostanti: SÌ
- Stili di transizione predefiniti e permanenti: SÌ
Colore di sfondo della linea del bastone
Ora che l'opzione permanente è abilitata, possiamo apportare modifiche alle opzioni permanenti a tutti gli elementi nella sezione. Inizieremo aprendo la riga contenente il nostro menu e applicando un colore di sfondo bianco all'opzione adesiva.
- Colore di sfondo: #FFFFFF
Spaziatura tra le righe appiccicosa
Successivamente, modificheremo i valori di spaziatura della funzione sticky della linea.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Scatola delle ombre appiccicose
Stiamo anche cambiando il colore dell'ombra della scatola in uno stato appiccicoso.
- Colore carattere sottotitoli: rgba(0,0,0,0.08)
Posizionamento appiccicoso della linea
Successivamente, restituiremo il posizionamento della riga su relativo in uno stato permanente.
- Posizione: relativa
- Origine offset: in alto a sinistra
Impostazioni del testo del menu dello stato permanente
Successivamente, cambieremo il colore del testo del menu in uno stato permanente.
- Colore testo menu: #000000
Impostazioni del menu a discesa in stato permanente
Con il colore di sfondo del menu mobile nelle impostazioni del menu a discesa.
- Menu mobile, colore di sfondo: #ffffff
Colori dell'icona del menu in stato appiccicoso
Cambia anche i colori delle icone in uno stato permanente.
- Colore icona carrello: #000000
- Colore icona ricerca: #000000
- Colore icona menu hamburger: #000000
Filtro logo in stato appiccicoso
Quindi, rimuovi il filtro di inversione dall'immagine del logo in uno stato appiccicoso.
- Inversione dell'immagine: 0%
Spaziatura dei pulsanti in stato appiccicoso
E completa il tutorial rimuovendo il margine superiore negativo dal pulsante quando è in stato appiccicoso.
- Margine superiore: 0px
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato finale.
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come combinare il costruttore di temi di Divi con le nuove opzioni adesive. Nello specifico, ti abbiamo mostrato come passare da un'intestazione trasparente a un'intestazione adesiva di stile diverso durante lo scorrimento.
Questo approccio ti consente di unire il design della tua pagina al menu mantenendo comunque una bella intestazione appiccicosa durante lo scorrimento.
Se vuoi saperne di più su Divi, non esitare a visitare il nostro catalogo di Tutorial Divi. Puoi anche consultare Come creare la pagina Blog con il modulo Divi Blog
Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma intanto, condividi questo articolo sui tuoi diversi social network.
...
