Quando crei la tua intestazione globale, ci sono molte cose che devi considerare. Gli elementi che inserisci nella tua intestazione dovrebbero aiutarti Visitatori per navigare facilmente. Per ridurre il tempo che le persone trascorrono nella navigazione, molti web designer optano per un'intestazione superiore fissa, consentendo Visitatori per accedere immediatamente ad altre pagine o pubblicazioni. Questo è davvero utile, ma quando crei un'intestazione fissa, gran parte dell'altezza del tuo viewport Visitatori è occupato, il che consente meno di contenuto da visualizzare immediatamente. Se non sei pronto a fare questo sacrificio, sappi che non devi farlo. Puoi sfruttare i vantaggi di un'intestazione fissa consentendo all'intestazione generale di rivelarsi quando i visitatori scorrono verso l'alto e nasconderla quando scorrono verso il basso. Oggi ti guideremo attraverso il modo in cui nascondere e rivelare la tua intestazione globale utilizzando Theme Builder di Divi.
Panoramica
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
1. Vai a Divi Theme Builder e aggiungi un nuovo modello
Inizia andando al Divi Theme Builder.
Inizia a creare un'intestazione globale
Lì, fai clic su "Aggiungi un'intestazione globale" e seleziona "Crea un'intestazione globale".
2. Inizia a creare un'intestazione globale
Impostazioni della sezione
Colore di sfondo
All'interno dell'editor dei modelli, noterai una sezione. Apri questa sezione e cambia il suo colore di sfondo.
- Colore di sfondo: #ffffff
dimensionamento
Vai alla scheda design e assegna il 100% di larghezza alla sezione successiva.
- Larghezza: 100%
spaziatura
Aggiungi anche imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 2vw
- Imbottitura inferiore: 2vw
Scatola delle ombre
Appliceremo anche una leggera sfumatura alla nostra sezione.
- Resistenza della sfocatura dell'ombra della scatola: 50px
- Colore dell'ombra: rgba (0,0,0,0,08)
ID CSS
Più avanti in questo tutorial, avremo bisogno di un codice personalizzato affinché si verifichi l'effetto di scorrimento. Per prepararci, aggiungiamo un ID CSS alla sezione.
- ID CSS: sezione di intestazione globale
Elemento principale
Inoltre, renderemo la sezione un'intestazione fissa aggiungendo due righe di codice CSS all'elemento principale della sezione.
position: fixed;top: 0;
Z Index
Ora assicurati che la nostra sezione appaia nella parte superiore della pagina o contenuto del post, aumenteremo anche lo z-index nelle impostazioni di visibilità.
- Indice Z: 99999
Aggiungi una nuova linea
Struttura a colonne
Dopo aver completato tutti i parametri della sezione, continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora un modulo, apri le impostazioni della riga e lascia che la riga riempia l'intera larghezza dello schermo.
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Rimuovere anche tutte le imbottiture superiore e inferiore predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Elemento principale
centralo contenuto della colonna e consentire alle colonne di rimanere affiancate su schermi di dimensioni più piccole aggiungendo due righe di codice CSS all'elemento principale della riga.
display: flex;align-items: center;
Aggiungi il modulo di monitoraggio dei social media alla colonna 2
Aggiungi social network
È ora di aggiungere moduli, iniziando con un modulo di monitoraggio dei social media nella colonna 1. Aggiungi i social network che desideri mostrare.
Ripristina i singoli stili di social media
Continua reimpostando gli stili di ciascun social network a un livello individuale.
Aggiungi un singolo spazio di social network
Dovrai anche aprire le impostazioni per ogni social network individualmente e aggiungere imbottitura inferiore nelle impostazioni di spaziatura.
- Imbottitura inferiore: 0.5vw
allineamento
Dopo aver aggiunto individualmente l'imbottitura inferiore a ciascun social network, torna alle impostazioni generali della tua mod. Passa alla scheda Progettazione e modifica l'allineamento del modulo.
- Allineamento del modulo: centro
Impostazioni predefinite dell'icona
Cambia anche il colore dell'icona nelle impostazioni dell'icona.
- Colore icona: # 000000
Impostazioni dell'icona al passaggio del mouse
E cambia il colore dell'icona al passaggio del mouse.
- Colore icona: # c2ab92
confine
Completa i parametri del modulo aggiungendo un bordo inferiore nei parametri del bordo.
- Larghezza del bordo inferiore: 1px
- Colore bordo inferiore: # 000000
Aggiungi un modulo menu alla colonna 2
Seleziona il menu
Passiamo alla colonna successiva! Aggiungi un modulo menu e seleziona un menu a tua scelta.
Scarica il logo
Quindi caricare un logo nel modulo.
Rimuovi il colore di sfondo
E rimuovi il colore di sfondo.
Fornitura
Quindi passare alla scheda Progettazione e assicurarsi che le seguenti impostazioni si applichino al layout:
- Stile: centrato
- Direzione del menu a discesa: in basso
Testo del menu predefinito
Continuare modificando le impostazioni del testo del menu come segue:
- Colore link attivo: # c2ab92
- Carattere del menu: Cormorant Garamond
- Colore del testo: # 000000
- Dimensione testo menu: 1vw (desktop), 2vw (tablet), 3vw (telefono)
Testo del menu al passaggio del mouse
Cambia il testo del menu al passaggio del mouse.
- Colore testo menu: # c2ab92
menu di navigazione
Quindi modificare il colore della riga del menu a discesa nelle impostazioni del menu a discesa.
- Colore della linea del menu a discesa: # 000000
Icone
Stiamo anche cambiando il colore dell'icona del menu dell'hamburger nelle impostazioni dell'icona.
- Colore icona menu hamburger: # 000000
dimensionamento
Continua modificando la larghezza massima del logo su schermi di dimensioni diverse nelle impostazioni di dimensionamento.
- Larghezza massima del logo: 5vw (scrivania), 10vw (tablet), 13vw (telefono)
Menu collegamento CSS
E completa le impostazioni del modulo aggiungendo due righe di codice CSS al collegamento del menu del modulo nella scheda avanzata.
padding-bottom: 1vw;border-bottom: 1px solid #000;
Aggiungi un modulo di testo alla colonna 3
Aggiungi una copia
Passiamo all'ultimo modulo! Lì l'unico modulo di cui abbiamo bisogno è un modulo di testo.
Aggiungi un collegamento
Questo modulo fungerà da CTA. Aggiungi un link a tua scelta.
- URL del collegamento del modulo: #
Impostazioni di testo predefinite
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere testo: Cormorant Garamond
- Colore del testo: # 000000
- Dimensioni del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
Passa il mouse sulle impostazioni del testo
Cambia il colore del testo al passaggio del mouse.
- Colore del testo: # c2ab92
dimensionamento
Continua modificando i parametri di dimensionamento del modulo su schermi di dimensioni diverse.
- Larghezza: 12vw (desktop), 18vw (tablet), 22vw (telefono)
- Allineamento del modulo: centro
spaziatura
E aggiungi un po 'di imbottitura inferiore nelle impostazioni di spaziatura.
- Imbottitura inferiore: 0.5vw
confine
Completa i parametri del modulo aggiungendo un bordo inferiore.
- Larghezza del bordo inferiore: 1px
- Colore bordo inferiore: # 000000
Aggiungi un modulo di codice alla colonna 2
Inserisci il codice JQuery e CSS
Una volta che hai disegnato tutte le mod nella riga, è il momento di fare in modo che si verifichi l'effetto rivela / nascondi. Per fare ciò, dovremo aggiungere codice personalizzato a un modulo di codice che inseriremo nella colonna 2. Questo codice funzionerà su qualsiasi sezione aggiunta, indipendentemente da come progettate l'intestazione o i moduli. che stai utilizzando, assicurati solo di aver aggiunto l'ID CSS alla tua sezione. Inserisci il codice JQuery tra i tag di script e il codice CSS tra i tag di stile come mostrato nella schermata di stampa di seguito.
jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });
main-content{margin-top: 7vw;}
3. Salvare le modifiche del generatore e visualizzare il risultato
Una volta completata l'intestazione globale, salva tutte le modifiche e visualizza il risultato sul tuo sito web!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come far apparire la tua intestazione globale quando scorri verso l'alto e nasconderla quando scorri verso il basso. Questo è un modo popolare ed efficace per aiutare i tuoi visitatori a navigare facilmente senza occupare una parte dell'altezza della loro finestra. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
Molto bene! Congratulazioni per il lavoro! Da solo senza uno stepper come questo è difficile per un principiante. Ero solo curioso di sapere se in questo stesso processo è possibile aggiungere una configurazione in modo che il menu non scompaia. Scatta semplicemente quando scorri le pagine