Come scambiare l'intestazione Divi con un'altra su Scroll

La tua intestazione rimane inevitabilmente uno degli elementi più importanti del tuo sito web. Influenza il processo di navigazione dei tuoi visitatori e consente loro di trovare ciò che stanno cercando in un batter d'occhio. Ora, se stai cercando un modo per scambiare l'intestazione Divi durante lo scorrimento con un'altra, ti piacerà questo post. Ti mostreremo esattamente come realizzarlo con il generatore di temi di Divi, gli elementi integrati e del codice aggiuntivo. Ci stiamo anche assicurando che ci sia uno spazio segnaposto generato automaticamente per l'intestazione nella parte superiore della pagina. 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 Swap Divi GRATUITAMENTE

Per mettere le mani sul modello di intestazione Divi di scambio gratuito, devi 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 inizia a creare un'intestazione globale

Vai a Divi Theme Builder

Inizia andando su Divi Theme Builder nel backend del tuo sito Web WordPress e fai clic su "Aggiungi intestazione globale".

Crea intestazione globale

Quindi, fai clic su "Crea intestazione globale" per essere reindirizzato all'editor del modello.

2. Crea entrambe le intestazioni nella stessa sezione

Modifica sezione

Dimensionamento

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri le impostazioni della sezione e assicurati che la larghezza della sezione sia "100%".

• Larghezza: 100%

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Scatola ombra

Stiamo usando anche un'ombra sottile della scatola.

• Posizione verticale dell'ombra del riquadro: 15 px
• Colore ombra: rgba(0,0,0,0.06)

Posizione

Ultimo ma non meno importante, faremo in modo che la sezione si attacchi alla parte superiore centrale della nostra pagina utilizzando le impostazioni di posizione nella scheda Avanzate.

• Posizione: fissa
• Posizione: in alto al centro

Aggiungi intestazione riga n. 1

Struttura della colonna

Entrambe le intestazioni che creeremo faranno parte della stessa sezione. Useremo una riga separata per ogni intestazione. Aggiungi l'intestazione della prima riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #000000

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

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

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Elemento principale

Completa le impostazioni della riga aggiungendo due righe di codice CSS all'elemento principale della riga. Questo codice CSS ci aiuterà ad allineare tutti i contenuti delle colonne.

display: flex;
align-items: center;

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica un logo a tua scelta.

Allineamento

Modificare l'allineamento del modulo successivo.

• Allineamento immagine: centro

Aggiungi modulo menu alla colonna 2

Seleziona Menu

Nella seconda colonna, l'unico modulo di cui abbiamo bisogno è un Modulo Menu. Seleziona un menu a tua scelta.

Rimuovi colore di sfondo

Successivamente, rimuovi il colore di sfondo del modulo.

Disposizione

Passa alla scheda Design e modifica il layout di conseguenza:

• Stile: centrato

Menu Impostazioni testo

Quindi, apportare alcune modifiche alle impostazioni del testo del menu.

• Carattere del menu: Roboto
• Peso del carattere del menu: grassetto
• Colore del testo del menu: #ffffff (desktop), #000000 (tablet e telefono)
• Dimensione del testo del menu: 18px

Menu a discesa Impostazioni testo

Successivamente, modificheremo il colore della linea del menu a discesa nelle impostazioni del testo del menu a discesa.

• Colore linea menu a discesa: #000000

Impostazioni icone

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

• Colore icona menu hamburger: #ffffff

Spaziatura

Completa le impostazioni del modulo aggiungendo un'imbottitura sinistra e destra personalizzata su schermi di dimensioni più piccole.

• Imbottitura sinistra: 30px (solo tablet e telefono)
• Imbottitura destra: 30px (solo tablet e telefono)

Aggiungi il modulo Segui social media alla colonna 3

Aggiungi social network di scelta

Nell'ultima colonna, l'unico modulo di cui abbiamo bisogno è un modulo di follow sui social media. Aggiungi i social network di tua scelta.

Colore di sfondo del singolo social network

Quindi, apri singolarmente ogni social network e cambia il colore di sfondo in bianco.

• Colore di sfondo: #FFFFFF

Allineamento

Torna alle impostazioni generali del modulo e modifica l'allineamento del modulo.

• Allineamento del modulo: Centro

Impostazioni icona

Modifica anche il colore dell'icona.

• Colore icona: #0042c9

Frontiera

E completa le impostazioni del modulo aggiungendo un raggio di bordo.

• Tutti gli angoli: 100 px

Aggiungi intestazione riga #2

Struttura della colonna

Alla seconda intestazione! Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

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

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Elemento principale

Quindi, allinea tutto il contenuto della colonna utilizzando due righe di codice CSS nell'elemento principale della riga.

display: flex;
align-items: center;

Colore di sfondo della colonna 3

E completa le impostazioni della riga aprendo le impostazioni della colonna 3 e utilizzando un colore di sfondo.

• Colore di sfondo: #0042c9

Aggiungi modulo immagine alla colonna 1

Carica immagine

Nella colonna 1, l'unico modulo di cui abbiamo bisogno è un modulo immagine. Carica un logo a tua scelta.

Allineamento

Modificare successivamente l'allineamento dell'immagine del modulo.

• Allineamento immagine: centro

Clona modulo menu e posizionalo nella colonna 2 dell'intestazione riga n. 2

Clona il modulo menu che è stato utilizzato nella riga precedente e posiziona il duplicato nella colonna centrale della seconda riga.

Modifica le impostazioni del testo del menu

Apri il modulo Menu duplicato e cambia il colore del testo del menu.

• Colore del testo del menu: #0042c9

Modifica le impostazioni del testo del menu a discesa

Modifica anche le impostazioni del testo del menu a discesa.

• Colore linea menu a discesa: #ffc21d

Modifica le impostazioni delle icone

Completa le impostazioni del modulo menu cambiando il colore dell'icona del menu dell'hamburger.

• Colore icona menu hamburger: #0042c9

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Nell'ultima colonna della riga, l'unico modulo di cui abbiamo bisogno è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

Modificare l'allineamento del pulsante successivo.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Quindi, modella il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensioni del testo del pulsante: 20 px (desktop), 18 px (tablet), 15 px (telefono)
• Colore del testo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px

• Carattere del pulsante: Roboto
• Peso del carattere del pulsante: grassetto

Spaziatura

E completa le impostazioni del modulo aggiungendo del riempimento personalizzato su diverse dimensioni dello schermo.

• Imbottitura superiore: 33px (Desktop), 35px (Tablet), 38px (Telefono)
• Imbottitura inferiore: 33px (desktop), 35px (tablet), 38px (telefono)

2. Aggiungi classi CSS

Sezione

Una volta aggiunti e stilizzati tutti i moduli, è il momento di aggiungere le classi CSS che utilizzeremo all'interno del nostro codice JQuery. Innanzitutto, apri le impostazioni della sezione e utilizza la seguente classe CSS:

• Classe CSS: header-sezione

Intestazione riga #1

Quindi, apri l'intestazione della prima riga e usa la seguente classe CSS:

• Classe CSS: header-1

Intestazione riga #2

Apri anche la seconda riga. Usa la seguente classe CSS per questo:

• Classe CSS: header-2

3. Aggiungi codice JQuery e CSS

Aggiungi modulo codice alla terza colonna della prima riga

Una volta che tutte le classi CSS sono a posto, è il momento di aggiungere il codice. Aggiungi un nuovo Modulo Codice dove vuoi all'interno della tua sezione. Lo posizioniamo nella terza colonna della prima riga.

Aggiungi codice JQuery (tra i tag di script)

Quindi, aggiungi le seguenti righe di codice CSS tra i tag di script come puoi vedere nella schermata di stampa qui sotto:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Aggiungi codice CSS (tra i tag di stile)

Aggiungi anche il seguente codice CSS tra i tag di stile :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Salva le modifiche al generatore di temi e visualizza il risultato

A questo punto, l'unica cosa che resta da fare è salvare tutte le modifiche del generatore di temi e visualizzare 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 scambiare l'intestazione Divi con un'altra durante lo scorrimento utilizzando il generatore di temi Divi, gli elementi Divi e alcuni codici JQuery e CSS aggiuntivi. Abbiamo anche generato automaticamente uno spazio nella parte superiore del contenitore della pagina che impedisce all'intestazione fissa di sovrapporsi al contenuto della pagina. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello di intestazione Divi di scambio! 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.