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.

Il menu di animazione ha rivelato divi

1. Vai a Divi Theme Builder e aggiungi un nuovo modello

Inizia andando al Divi Theme Builder.

Costruttore di temi Divi

Inizia a creare un'intestazione globale

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

Intestazione globale di Divi Builder

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
Impostazione della sessione Divi

dimensionamento

Vai alla scheda design e assegna il 100% di larghezza alla sezione successiva.

  • Larghezza: 100%
Configura la larghezza

spaziatura

Aggiungi anche imbottitura superiore e inferiore personalizzata.

  • Imbottitura superiore: 2vw
  • Imbottitura inferiore: 2vw
Sezione Impostazioni

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)
Modulo Ombre divi

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
Aggiungi classi css divi

Elemento principale

Inoltre, renderemo la sezione un'intestazione fissa aggiungendo due righe di codice CSS all'elemento principale della sezione.

position: fixed;top: 0;

Impostazioni Divi sectoin

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
Configurazione Zindex

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:

Scegli un layout

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%
Configurazione del modulo linea divi

spaziatura

Rimuovere anche tutte le imbottiture superiore e inferiore predefinite.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px
rivela l'intestazione globale

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;

Aggiungere un codice css element principal divi

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.

Aggiungi pulsante social media

Ripristina i singoli stili di social media

Continua reimpostando gli stili di ciascun social network a un livello individuale.

Ripristina lo stile di un modulo divi

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
Configurazione della spaziatura dei moduli Divi

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
Modulo di configurazione allineamento Divi

Impostazioni predefinite dell'icona

Cambia anche il colore dell'icona nelle impostazioni dell'icona.

  • Colore icona: # 000000
Cambiando il colore divi

Impostazioni dell'icona al passaggio del mouse

E cambia il colore dell'icona al passaggio del mouse.

  • Colore icona: # c2ab92
Modifica dell'icona al passaggio del mouse

confine

Completa i parametri del modulo aggiungendo un bordo inferiore nei parametri del bordo.

  • Larghezza del bordo inferiore: 1px
  • Colore bordo inferiore: # 000000
Configurazione confini divi

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.

Definire il contenuto del modulo menu divi

Scarica il logo

Quindi caricare un logo nel modulo.

Scegli un logo dello stampo divi

Rimuovi il colore di sfondo

E rimuovi il colore di sfondo.

Rimuovi il colore di sfondo div

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
Layout del menu Divi

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)
Modulo menu collegamenti configurazione divi

Testo del menu al passaggio del mouse

Cambia il testo del menu al passaggio del mouse.

  • Colore testo menu: # c2ab92
Impostazione del colore del menu Divi

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
Configurazione del colore del modulo menu Divi

Icone

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

  • Colore icona menu hamburger: # 000000
Configurazione dell'icona del menu Divi

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)
Configurazione della larghezza del menu Divi

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;

Configurazione css menu divi

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 modulo di testo divi

Aggiungi un collegamento

Questo modulo fungerà da CTA. Aggiungi un link a tua scelta.

  • URL del collegamento del modulo: #
Configurazione del modulo di testo Divi

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)
Impostazione del colore del carattere del modulo di testo Divi

Passa il mouse sulle impostazioni del testo

Cambia il colore del testo al passaggio del mouse.

  • Colore del testo: # c2ab92
Regolazione del colore del testo del modulo Divi

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
Regolazione del dimensionamento del modulo di testo Divi

spaziatura

E aggiungi un po 'di imbottitura inferiore nelle impostazioni di spaziatura.

  • Imbottitura inferiore: 0.5vw
Regolazione spaziatura modulo Divi

confine

Completa i parametri del modulo aggiungendo un bordo inferiore.

  • Larghezza del bordo inferiore: 1px
  • Colore bordo inferiore: # 000000
Regolazione del bordo del modulo di testo Divi

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;}

Aggiungi il codice js jquery wordpress divi

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!

Progettazione finale del modulo menu divi
Intestazione globale di Divi Builder

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Panoramica completa del modulo

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.