Come rivelare la tua intestazione globale mentre scorri verso l'alto e nascondi mentre scorri verso il basso con Divi

Quando crei la tua intestazione globale, ci sono molte cose che devi prendere in considerazione. Gli elementi che inserisci nell'intestazione devono aiutare i tuoi visitatori a navigare facilmente. Per ridurre il tempo che le persone trascorrono nella navigazione, molti web designer optano per un'intestazione superiore fissa, consentendo ai visitatori di accedere immediatamente ad altre pagine o post. È davvero conveniente, ma quando si crea un'intestazione fissa, viene occupata gran parte dell'altezza del viewport dei visitatori, consentendo la visualizzazione di meno contenuti contemporaneamente. Se non sei disposto a fare quel sacrificio, sappi che non devi. Puoi avere i vantaggi di un'intestazione fissa consentendo alla tua intestazione globale di rivelare quando i tuoi visitatori stanno scorrendo verso l'alto e nasconderla quando stanno scorrendo verso il basso. Oggi ti guideremo attraverso il nascondere e rivelare la tua intestazione globale usando Divi's Theme Builder. 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. Vai a Divi Theme Builder e aggiungi un nuovo modello

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder.

Inizia a creare un'intestazione globale

Lì, fai clic su "Aggiungi intestazione globale" e seleziona "Crea intestazione globale".

2. Inizia a creare un'intestazione globale

Impostazioni della sezione

Colore di sfondo

All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e cambia il suo colore di sfondo.

• Colore di sfondo: #ffffff

Dimensionamento

Passa alla scheda Design e assegna una larghezza del 100% alla tua sezione successiva.

• Larghezza: 100%

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw

Scatola ombra

Applicheremo anche un'ombra sottile alla nostra sezione.

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

ID CSS

Più avanti in questo tutorial, avremo bisogno di un codice personalizzato per realizzare l'effetto di scorrimento. Per prepararci, stiamo aggiungendo un ID CSS alla sezione.

• ID CSS: global-header-section

Elemento principale

Trasformeremo anche la sezione in un'intestazione fissa aggiungendo due righe di codice CSS all'elemento principale della sezione.

position: fixed;
top: 0;

Indice Z

Ora, per assicurarci che la nostra sezione appaia in cima a tutta la pagina o al contenuto del post, aumenteremo anche l'indice z nelle impostazioni di visibilità.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Una volta completate tutte le impostazioni della sezione, continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

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

Elemento principale

Centrare il contenuto della colonna e consentire alle colonne di rimanere l'una accanto all'altra 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 Segui social media alla colonna 2

Aggiungi social network

È ora di aggiungere moduli, iniziando con un modulo Segui social media nella colonna 1. Aggiungi i social network che desideri mostrare.

Ripristina stili di social network individuali

Continua reimpostando gli stili di ogni social network a livello individuale.

Aggiungi la spaziatura dei singoli social network

Dovrai anche aprire le impostazioni di ciascun social network individualmente e aggiungere un'imbottitura inferiore nelle impostazioni di spaziatura.

• Imbottitura inferiore: 0,5 vw

Allineamento

Dopo aver aggiunto l'imbottitura inferiore a ciascun social network individualmente, torna alle impostazioni generali del modulo. 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 modifica il colore dell'icona al passaggio del mouse.

• Colore icona: #c2ab92

Frontiera

Completa le impostazioni del modulo aggiungendo un bordo inferiore nelle impostazioni del bordo.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #000000

Aggiungi modulo menu alla colonna 2

Seleziona Menu

Alla prossima colonna! Aggiungi un modulo menu e seleziona un menu a tua scelta.

Carica logo

Carica un logo nel modulo successivo.

Rimuovi colore di sfondo

E rimuovi il colore di sfondo.

Disposizione

Quindi, passa alla scheda Progettazione e assicurati che le seguenti impostazioni si applichino al layout:

• Stile: centrato
• Direzione del menu a discesa: verso il basso

Testo del menu predefinito

Continua modificando le impostazioni del testo del menu come segue:

• Colore collegamento attivo: #c2ab92
• Carattere del menu: Cormorano Garamond
• Colore del testo: #000000
• Dimensione del testo del menu: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Testo del menu al passaggio del mouse

Modifica il testo del menu al passaggio del mouse.

• Colore del testo del menu: #c2ab92

Menu a discesa

Quindi, cambia il colore della linea del menu a discesa nelle impostazioni del menu a discesa.

• Colore linea menu a discesa: #000000

Icone

Stiamo cambiando anche il colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.

• Colore icona menu hamburger: #000000

Dimensionamento

Continua modificando la larghezza massima del logo su diverse dimensioni dello schermo nelle impostazioni di dimensionamento.

• Larghezza massima logo: 5vw (desktop), 10vw (tablet), 13vw (telefono)

Collegamento al menu CSS

E completa le impostazioni del modulo aggiungendo due righe di codice CSS al collegamento del menu del modulo nella scheda Avanzate.

padding-bottom: 1vw;
border-bottom: 1px solid #000;

Aggiungi modulo di testo alla colonna 3

Aggiungi copia

Avanti con l'ultimo modulo! Lì, l'unico modulo di cui abbiamo bisogno è un modulo di testo.

Aggiungi collegamento

Questo modulo servirà come CTA. Aggiungi un collegamento a tua scelta.

• URL collegamento modulo: #

Impostazioni di testo predefinite

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

• Carattere del testo: Cormorant Garamond
• Colore del testo: #000000
• Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Impostazioni testo al passaggio del mouse

Cambia il colore del testo al passaggio del mouse.

• Colore del testo: #c2ab92

Dimensionamento

Continua modificando le impostazioni di dimensionamento del modulo su schermi di diverse dimensioni.

• Larghezza: 12vw (desktop), 18vw (tablet), 22vw (telefono)
• Allineamento del modulo: Centro

Spaziatura

E aggiungi un po' di imbottitura in basso nelle impostazioni di spaziatura.

• Imbottitura inferiore: 0,5 vw

Frontiera

Completa le impostazioni del modulo aggiungendo un bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #000000

Aggiungi modulo codice alla colonna 2

Inserisci codice JQuery e CSS

Dopo aver stilizzato tutti i moduli nella riga, è il momento di realizzare l'effetto rivela/nascondi. Per fare ciò, dovremo aggiungere del codice personalizzato a un modulo di codice che inseriremo nella colonna 2. Questo codice funzionerà su qualsiasi sezione che aggiungi, indipendentemente da come progetti l'intestazione o da quali moduli utilizzi, solo assicurati di aver aggiunto l'ID CSS alla tua sezione. Posiziona 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 = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Salva le modifiche del generatore e visualizza il risultato

Una volta completata l'intestazione globale, salva tutte le modifiche e visualizza il risultato sul tuo sito web!

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 far apparire la tua intestazione globale mentre scorri verso l'alto e nasconderla mentre 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. 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.