Come creare una barra dei menu mobile trasparente globale con Divi's Theme Builder

Cerchi un modo per mettere la tua intestazione globale in cima alle sezioni degli eroi delle tue pagine? Nel tutorial Divi di oggi, ti mostreremo esattamente come farlo. Ricreeremo da zero una splendida intestazione globale (usando Divi's Theme Builder) e applicheremo un effetto mobile alla barra dei menu. 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 della barra dei menu mobile GRATUITAMENTE

Per mettere le mani sul modello di intestazione globale della barra dei menu mobile, 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!

Iscriviti al nostro canale Youtube

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

Quindi, fai clic su "Aggiungi intestazione globale" e continua selezionando "Crea intestazione globale".

2. Inizia a creare un'intestazione globale

Impostazioni della sezione

Colore di sfondo

Una volta entrato nell'editor dei modelli, noterai una sezione nella pagina. Apri quella sezione e cambia il colore di sfondo in uno completamente trasparente. Ciò consentirà a tutto ciò che si trova sotto la sezione di mostrare attraverso.

• Colore di sfondo: rgba(0,0,0,0)

Dimensionamento

Vai alla scheda design della sezione e modifica la larghezza.

• Larghezza: 100%

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

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

Indice Z

E per assicurarci che la sezione rimanga in primo piano rispetto a tutto il contenuto della sezione eroe, dovremo aumentare l'indice z della sezione nelle impostazioni di visibilità.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Una volta completate le impostazioni della sezione, puoi aggiungere una nuova riga utilizzando la seguente struttura a colonne:

Dimensionamento

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

• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

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

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

Elemento principale

Quindi, vai alla scheda Avanzate e assicurati che le colonne rimangano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Colonna 2

Colore di sfondo

Continua aprendo le impostazioni della colonna 2 e cambia il colore di sfondo in uno semitrasparente.

• Colore di sfondo: rgba (255,255,255,0.71)

Frontiera

Aggiungi anche un bordo inferiore alla colonna.

• Larghezza bordo inferiore: 2px
• Colore bordo inferiore: #f4583f

Scatola ombra

E crea un effetto fluttuante aggiungendo una sottile ombra a scatola.

• Posizione verticale dell'ombra del riquadro: 20 px
• Forza sfocatura ombra scatola: 50 px
• Forza di diffusione dell'ombra della scatola: -20px
• Colore ombra: rgba(0,0,0,0.23)

Aggiungi modulo immagine alla colonna 1

Carica logo

Una volta completate le impostazioni di riga e colonna, è il momento di aggiungere i moduli, iniziando con un Modulo immagine nella colonna 1. Carica un logo con uno sfondo trasparente.

Allineamento

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

• Allineamento immagine : Centro

Dimensionamento

Modifica anche la larghezza del modulo nelle impostazioni di dimensionamento.

• Larghezza: 8vw (desktop), 14vw (tablet), 21vw (telefono)

Aggiungi modulo menu alla colonna 2

Seleziona Menu

Alla prossima colonna. Lì, l'unico modulo di cui abbiamo bisogno è un modulo menu. Seleziona un menu a tua scelta.

Rimuovi colore di sfondo

Quindi, vai alle impostazioni dello sfondo e rimuovi il colore di sfondo.

Disposizione

Passa alla scheda di progettazione del modulo e modifica il layout.

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

Testo del menu

Stile anche le impostazioni del testo del menu.

• Carattere del menu: Muli
• Colore del testo del menu: #6f6666
• Dimensione del testo del menu: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Menu a discesa

Modifica le impostazioni del menu a discesa successivamente.

• Colore linea menu a discesa: #f4583f

Icone

Usa lo stesso colore per il colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.

• Colore icona menu hamburger: #f4583f

Spaziatura

Completa le impostazioni del modulo aggiungendo un'imbottitura superiore e inferiore nelle impostazioni di spaziatura.

• Imbottitura superiore: 1.5vw
• Imbottitura inferiore: 1.5vw

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Alla prossima e ultima colonna. Aggiungi un modulo pulsante con una copia a tua scelta.

Allineamento

Modificare l'allineamento del modulo successivo.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua modellando il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.9vw (desktop), 1.5vw (tablet), 2.5vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #f4583f
• Larghezza bordo pulsante: 0px
• Colore bordo pulsante: #f4583f
• Raggio bordo pulsante: 0px

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

Spaziatura

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

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)
• Imbottitura destra: 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)

Impostazioni della sezione aggiuntiva

Elemento principale predefinito

Una volta completato il design generale, c'è ancora una cosa da fare; posizionando la sezione in cima al contenuto della tua pagina. Per farlo, dovremo aggiungere due righe di codice CSS all'elemento principale della sezione.

position: absolute;
top: 0;

Elemento principale al passaggio del mouse

Assicurati di aggiungere le stesse righe di codice CSS all'opzione al passaggio del mouse dell'elemento principale. Ciò impedirà lo sfarfallio della sezione una volta che ci passi sopra.

position: absolute;
top: 0;

3. Salva le modifiche del generatore e visualizza il risultato

Una volta completata la sezione, puoi salvare l'intestazione globale 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 creare una barra dei menu mobile con Divi's Theme Builder. Questo è un ottimo modo per unire le sezioni dell'intestazione e degli eroi. L'intestazione è posizionata sopra la prima sezione della tua pagina o del tuo post. 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.