necessità per creare un menu mobile trasparente in Divi ?
Stai cercando un modo per posizionare la tua intestazione generale sopra le sezioni principali delle tue pagine? Nel tutorial Divi Oggi ti mostreremo esattamente come farlo.
Creeremo da zero una straordinaria intestazione globale (usando il costruttore di temi de Divi) e applicheremo un effetto mobile alla barra dei menu.
Andiamo.
Panoramica
Prima di immergerci in questo tutorial, diamo una rapida occhiata al risultato che vogliamo ottenere.
Vai a Theme Builder di Divi e aggiungi un nuovo modello
Allez su Divi > Generatore di temi.
Crea l'intestazione globale con Divi Theme Builder
Fai clic su "Aggiungi intestazione globale" e continua selezionando "Crea intestazione globale".
Impostazioni della sezione
Colore di sfondo
Una volta nell'editor dei modelli, noterai una sezione nella pagina. Apri questa sezione e cambia il colore di sfondo in un colore completamente trasparente. Ciò consentirà di mostrare tutto ciò che si trova sotto la sezione.
- Sfondo: rgba(0,0,0,0)
dimensionamento
Quindi vai alla scheda Stile sezione e modifica la larghezza massima.
- Larghezza massima (vedi screenshot): 100%
spaziatura
Rimuovi anche tutti i margini interni superiore e inferiore predefiniti.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Indice Z
E per assicurarsi che la sezione rimanga sempre aggiornata contenuto Dalla sezione hero, dovremo aumentare lo z-index nelle impostazioni di visibilità.
- Indice Z: 99999
Aggiungi una nuova linea
Struttura della colonna
Dopo aver completato le impostazioni della sezione, puoi aggiungere una nuova riga utilizzando la seguente struttura a colonne:
dimensionamento
Senza aggiungere moduli, apri le impostazioni della riga e modifica le impostazioni del dimensionamento come segue:
- Armonizzare le altezze delle colonne: Sì
- Larghezza massima: 100%
- Larghezza massima: 100%
spaziatura
Quindi aggiungi margini interni personalizzati (in alto e in basso).
- Margine interno del picco: 2vw
- Margine interno inferiore: 0vw
Elemento principale
Quindi, vai alla scheda Avanzate e assicurati che le colonne rimangano una accanto all'altra su schermi di dimensioni inferiori aggiungendo una singola riga di codice CSS all'elemento della riga principale.
display: flex;
Colonna 2
Colore di sfondo
Continua aprendo le impostazioni della colonna 2 e cambia il colore di sfondo in un colore semitrasparente.
- Colore di sfondo: rgba (255,255,255,0.71)
confine
Aggiungi anche un bordo inferiore alla colonna.
- Larghezza bordo inferiore: 2px
- Colore pulsante e bordo inferiore: #f4583f
Scatola delle ombre
E crea un effetto fluttuante aggiungendo un'ombra sottile.
- Shadow Box: [Visualizza cattura]
- Posizione di partenza: 20px
- Forza della sfocatura dell'ombra dell'arco: 50px
- Box Shadow Spread Forza: -20px
- Colore carattere sottotitoli: rgba(0,0,0,0.23)
Aggiungi un modulo Immagine alla colonna 1
Scarica il logo
Dopo aver completato 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 Stile modulo e modifica l'allineamento.
- Allineamento immagine: centrato
dimensionamento
Modificare anche la larghezza del modulo nelle impostazioni di dimensionamento.
- Larghezza massima: 8 vw (desktop), 14 vw (tablet), 21 vw (telefono)
Aggiungi il modulo Menu alla colonna 2
Seleziona un menu
Andiamo alla colonna successiva. Lì, l'unico modulo di cui abbiamo bisogno è un modulo Menu. Seleziona un menu a tua scelta.
Rimuovi il colore di sfondo
Quindi vai alle impostazioni di sfondo e rimuovi il colore di sfondo.
Fornitura
Passa alla scheda Stile modulo e modifica il layout.
- Stile: centrato
- Menù a tendina: giù
Testo del menu
Disegna anche le impostazioni del testo del menu.
- Carattere del menu: Mulish
- Colore del testo del menu: #6f6666
- Menu Dimensione testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
menu di navigazione
Quindi modificare le impostazioni dal menu a discesa.
- Colore della riga a discesa: #f4583f
Icone
Usa questo stesso colore per il colore dell'icona del menu dell'hamburger nelle impostazioni dell'icona.
- Colore icona menu hamburger: #f4583f
spaziatura
Completa le impostazioni del modulo aggiungendo il riempimento superiore e inferiore nelle impostazioni della spaziatura.
- Margine interno di picco: 1,5 vw
- Margine interno inferiore: 1,5 vw
Aggiungi il modulo Button alla colonna 3
Aggiungi testo al pulsante
Passiamo alla prossima e ultima colonna. Aggiungi un modulo Button con un testo a tua scelta.
allineamento
Quindi modificare l'allineamento del modulo.
- Allineamento pulsanti: centrato
Impostazioni dei pulsanti
Continua personalizzando il pulsante di conseguenza:
- Usa stili personalizzati per Button: Sì
- Dimensione testo pulsante: 0,9 vw (desktop), 1,5 vw (tablet), 2,5 vw (telefono)
- Colore testo pulsante: #ffffff
- Pulsante Sfondo: #f4583f
- Larghezza bordo pulsante: 0 pixel
- Colore bordo pulsante: #f4583f
- Pulsante Raggio bordo: 0 pixel
- Carattere pulsante: mulisco
- Pulsante luce fioca: testo in grassetto
spaziatura
Completa le impostazioni del modulo aggiungendo un riempimento personalizzato su schermi di diverse dimensioni.
- Margine interno superiore e inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno sinistro e destro: 2vw (desktop), 3vw (tablet), 4vw (telefono)
Parametri di sezione aggiuntivi
Elemento principale predefinito
Una volta completata la personalizzazione generale, c'è ancora una cosa da fare; posizionare la sezione sopra il contenuto della tua pagina. Per fare ciò 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 quelle stesse righe di 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;
Salva le modifiche del costruttore e visualizza il risultato
Una volta completata la sezione, puoi salvare l'intestazione globale e visualizzare il risultato sul tuo sito!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Scarica DIVI ora!!!
Conclusione
Ecco ! Questo è tutto per questo articolo. Ti abbiamo mostrato come creare una barra dei menu mobile e trasparente con Theme Builder di Divi. L'intestazione è posizionata sopra la prima sezione della tua pagina o del tuo post.
Per familiarizzare con Divi's Theme Builder, puoi anche leggere il nostro articolo su Come creare un'intestazione globale con il generatore di temi di Divi
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
