Come posizionare automaticamente l'intestazione sotto la prima sezione Divi di ogni pagina

Da quando è uscito il Divi Theme Builder, abbiamo condiviso tutorial su come creare e personalizzare un'intestazione per adattarla alle diverse esigenze che potresti avere. Nel tutorial di oggi, continueremo questo viaggio mostrandoti come posizionare automaticamente un'intestazione personalizzata sotto la prima sezione Divi di ogni pagina. Questo approccio consente ai visitatori di vedere prima la sezione degli eroi delle tue pagine e quindi di accedere al menu e a tutti i suoi elementi. Lo stile che stiamo usando per l'intestazione personalizzata corrisponde al pacchetto di layout Bistro, sarai anche in grado di scaricare il modello di pagina personalizzato gratuitamente!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di intestazione personalizzato

Per mettere le mani sul modello di intestazione personalizzato 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 di pagina

Vai a Divi Theme Builder e aggiungi un nuovo modello

Inizia andando su Divi Theme Builder e aggiungi un nuovo modello.

Usa acceso

Usa questo nuovo modello su tutte le pagine.

• Utilizzare su: tutte le pagine

2. Inizia a creare un design di intestazione personalizzato

Continua creando un'intestazione personalizzata all'interno del modello di pagina.

Impostazioni della sezione

Colore di sfondo

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e cambia il colore di sfondo.

• Colore di sfondo: #FFFFFF

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della sezione.

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

Frontiera

Aggiungi anche un bordo superiore e inferiore.

• Larghezza bordo superiore e inferiore: 1 px
• Colore bordo superiore e inferiore: #002d4c

ID CSS

E includi un ID CSS. Più avanti nel tutorial, useremo questo ID CSS per posizionare la sezione sotto la prima sezione di ogni pagina.

• ID CSS: intestazione personalizzata

Indice Z

Ultimo ma non meno importante, aumenteremo l'indice z della sezione per assicurarci che appaia in cima a tutto il contenuto della pagina.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

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 della sezione.

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

Spaziatura

Rimuovi anche tutto il riempimento superiore e inferiore predefinito.

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

Elemento principale

Per assicurarci che tutte le colonne rimangano una accanto all'altra su schermi di dimensioni più piccole e per centrare il contenuto della colonna, aggiungeremo anche due righe di codice CSS all'elemento principale della riga.

display: flex;
align-items: center;

Colonna 1

Spaziatura

Continua aprendo le impostazioni della colonna 1 e aggiungi un po' di riempimento superiore e inferiore alle impostazioni di spaziatura.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Frontiera

Aggiungi anche un bordo destro alla colonna.

• Larghezza bordo destro: 1px
• Colore bordo destro: #002d4c

Aggiungi modulo immagine alla colonna 1

Carica logo

È ora di iniziare ad aggiungere moduli! Nella colonna 1, avremo bisogno di un modulo immagine. Carica il tuo logo.

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Modifica anche la larghezza del modulo su schermi di diverse dimensioni.

• Larghezza: 4vw (desktop), 7vw (tablet), 12vw (telefono)

Aggiungi modulo menu alla colonna 2

Seleziona Menu

Sulla seconda colonna, lì, avremo bisogno di un modulo menu. Seleziona un menu a tua scelta.

Disposizione

Passa alla scheda di progettazione del modulo e modifica le impostazioni del layout come segue:

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

Testo del menu

Modifica anche le impostazioni del testo del menu.

• Carattere del menu: Cabin
• Colore del testo del menu: #77848d
• Dimensione del testo del menu: 16 px (desktop), 15 px (tablet), 14 px (telefono)
• Altezza della riga del menu: 1,8 em

Testo a discesa

Quindi, cambia alcuni colori nelle impostazioni del testo a discesa.

• Colore di sfondo del menu a discesa: #ffffff
• Colore linea menu a discesa: #002d4c

Icone

E completa le impostazioni del modulo modificando il colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.

• Colore icona menu hamburger: #002d4c

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Alla prossima e ultima colonna. Lì, avremo bisogno di un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua applicando uno stile al pulsante nelle impostazioni del pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 13 px
• Colore del testo del pulsante: #002d4c
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 2px
• Colore bordo pulsante: #ffffff (predefinito), #d1d1d1 (passa il mouse)
• Raggio bordo pulsante: 0px

• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: cabina
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Quindi, aggiungi un'imbottitura personalizzata su diverse dimensioni dello schermo.

• Imbottitura superiore: 16px
• Imbottitura inferiore: 16px
• Imbottitura sinistra: 24 pixel (desktop e tablet), 13 pixel (telefono)
• Imbottitura destra: 24px (desktop e tablet), 13px (telefono)

Scatola ombra

Completa le impostazioni del modulo aggiungendo un'ombra di scatola.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 0px
• Forza di diffusione dell'ombra del riquadro: 2px (predefinito), 6px (al passaggio del mouse)
• Colore ombra: #002d4c
• Posizione dell'ombra nella scatola: Ombra interna

3. Posiziona automaticamente l'intestazione dopo la prima sezione di ogni pagina usando JQuery

Aggiungi modulo codice alla colonna 2

Ora, per posizionare automaticamente il menu sotto la prima sezione di ogni pagina, avremo bisogno di un po' di codice JQuery. Per includere questo codice nella nostra intestazione personalizzata, aggiungi un Modulo codice alla colonna 2.

Inserisci codice JQuery

Aggiungi le seguenti righe di codice JQuery, tra i tag di script, come puoi notare nella schermata di stampa sottostante , al modulo Codice per applicare l'effetto:

jQuery(funzione($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

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

E completa l'intestazione personalizzata salvando tutte le modifiche al generatore di temi e visualizzando il risultato sulle tue pagine!

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 posizionare automaticamente l'intestazione personalizzata che crei utilizzando il Theme Builder di Divi dopo la prima sezione Divi di ogni pagina. Dovrai solo creare l'intestazione personalizzata una volta, aggiungere il codice JQuery e l'intestazione personalizzata verrà automaticamente riposizionata. Questo è un ottimo modo per cambiare la normale posizione nella parte superiore della pagina del menu e consentire alla sezione degli eroi di brillare per prima. Sei stato anche in grado di scaricare il modello 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.