Vuoi creare un menu laterale scorrevole e reattivo in Divi?
Quando si crea un sito web, ti chiedi spesso che tipo di intestazione creare. La più utilizzata sul web è la barra dei menu orizzontale in alto, ma ci sono anche altre opzioni, come un menu a scorrimento.
I menu scorrevoli molto spesso ti aiutano a limitare lo spazio occupato dall'intestazione globale. Quindi puoi far apparire un menu a scorrimento quando il tuo Visitatori fare clic sull'icona dell'hamburger nell'angolo in alto a destra.
Pertanto, l'utilizzo di un menu a scorrimento ti aiuta ad aggiungere ulteriore interazione al tuo sito web.
In questo tutorial, ti mostreremo quindi come crearne uno usando il Theme Builder di Divi.
Cominciamo!
Panoramica
Prima di immergerci in questo tutorial, diamo prima un'occhiata al risultato che otterremo.
Vai a Theme Builder e crea un'intestazione globale
Vai a Generatore di temi
Per iniziare, vai su Theme Builder dal menu Divi presente nella dashboard di WordPress e fai clic su "Aggiungi intestazione globale".
Crea l'intestazione globale
Continua selezionando "Crea intestazione globale".
Crea uno stile di intestazione
Impostazioni della sezione
Colore di sfondo
Una volta nell'editor dei modelli, noterai una sezione. Apri questa sezione e rendi trasparente il colore di sfondo.
- Sfondo: RGB (255,255,255,0)
spaziatura
Passa alla scheda Stile e rimuovi tutti i margini inferiore e superiore.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Inviare
Successivamente, cambieremo la posizione della sezione andando alla scheda Avanzate e modificando le impostazioni di posizione.
- Posizione: fissa
- Posizione: centro in alto
Aggiungi la prima riga
Struttura della colonna
Dopo aver completato le impostazioni della sezione, 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:
- Larghezza massima: 97%
- Larghezza massima: 100%
spaziatura
Modifica le impostazioni di spaziatura.
- Margine interno di picco: 1%
- Margine interno inferiore: 0px
elemento principale
Successivamente, vai alla scheda avanzata e aggiungi due righe di codice CSS all'elemento principale della riga. Questo ci aiuterà ad allineare verticalmente il contenuto della colonna nella nostra riga.
display: flex;
align-items: center;
Aggiungi un modulo Immagine alla colonna 1
Scarica il logo
È ora di aggiungere moduli, a partire da un modulo Immagine nella colonna 1. Carica il tuo logo.
Aggiungi un modulo di testo alla colonna 3
Aggiungi 3 spazi all'area dei contenuti
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Colore di sfondo
Modifica il colore di sfondo del modulo.
- Sfondo: RGB (0,0,0,0.04)
Impostazioni del testo
Quindi, passa alla scheda Stile e rimuovi l'altezza della riga di testo. Questo ci aiuterà ad avere il pieno controllo sugli ambiti che abbiamo aggiunto.
- Altezza della riga di testo: 0em
dimensionamento
Modificheremo i parametri di dimensionamento del modulo.
- Larghezza massima: 120 pixel
- Allineamento del testo: a destra
spaziatura
E completeremo i parametri del modulo trasformando il modulo in un quadrato. Per questo utilizzeremo valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Vertice del margine interno: 40px
- Margine interno inferiore: 60px
- Margine interno sinistro: 40px
- Margine interno destro: 40px
Aggiungi la seconda riga
Struttura della colonna
Riga successiva! Utilizzeremo questa linea per progettare il nostro intero menu scorrevole. Utilizzare la seguente struttura a colonne:
Colore di sfondo
Senza aggiungere moduli, apri le impostazioni della riga e cambia il colore di sfondo come segue:
- Sfondo: #e7e0e2
Immagine di sfondo
Usiamo anche un'immagine di sfondo con motivi. Puoi utilizzare un motivo di sfondo a tua scelta.
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione dell'immagine di sfondo: centro
- Ripeti immagine di sfondo: Ripeti
dimensionamento
Quindi, passa alla scheda Stile e modifica le impostazioni di ridimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Spaziatura delle colonne: 1
- Larghezza massima: 20% (desktop), 40% (tablet), 60% (telefono)
- Altezza: 100vh
spaziatura
Modificare anche le impostazioni di spaziatura su schermi di dimensioni diverse.
- Margine interno vertice: 10 vw (desktop), 30 vw (tablet), 40 vw (telefono)
confine
E completa i parametri della linea aggiungendo un bordo sinistro.
- Larghezza bordo sinistro: 10px
- Colore bordo sinistro: #24394a
- Stile bordo sinistro: doppio
Aggiungi un modulo di testo alla colonna
Aggiungi contenuto
È ora di aggiungere la prima voce di menu del Modulo di testo! Aggiungi la copia alla casella contenuto.
Aggiungi un collegamento
Continua aggiungendo un collegamento pertinente alla voce di menu.
- URL collegamento modulo: #
Colore di sfondo
Quindi cambia il colore di sfondo.
- Sfondo: RGB (216,210,212,0.35)
Impostazioni del testo
Quindi, passa alla scheda Stile'3 e modifica le impostazioni del testo come segue:
- Carattere del testo: Domine
- Testo a luce soffusa: testo in grassetto
- Testo Colore Testo: #000000
- Testo Dimensione testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Allineamento del testo: centrato
spaziatura
Completa le impostazioni del modulo aggiungendo valori di spaziatura personalizzati su schermi di diverse dimensioni.
- Margine inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno del picco: 1vw
- Margine interno inferiore: 1vw
Clona modulo di testo (1 modulo per voce di menu)
Dopo aver completato il modulo di testo della prima voce di menu, puoi clonarlo tutte le volte che vuoi. Assicurati solo che i tuoi moduli non superino l'altezza della finestra.
Modifica il contenuto e i collegamenti del modulo di testo duplicato
Modifica il contenuto e i collegamenti di ciascun modulo Testo duplicato.
Aggiungi modulo pulsante alla colonna
Aggiungi una copia
L'ultimo modulo di cui abbiamo bisogno in questa riga è un modulo Button. Aggiungi una copia a tua scelta.
Aggiungi un collegamento
Aggiungi anche un collegamento.
- URL collegamento pulsante: #
allineamento
Passa alla scheda Stile e modifica l'allineamento dei pulsanti.
- Allineamento pulsanti: centrato
Impostazioni dei pulsanti
Procedi personalizzando il modulo Button come segue:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 0,7 vw (desktop), 1,5 vw (tablet), 2,5 vw (telefono)
- Colore testo pulsante: #000000
- Pulsante sfondo: rgba (0,0,0,0)
- Colore bordo pulsante: #24394a
- Pulsante Raggio bordo: 0 pixel
- Spaziatura lettere pulsanti: 4px
- Pulsante Font: Apri Nessuno
- Pulsante Luce soffusa: testo in grassetto
- Pulsante stile copia: TT
spaziatura
E completa le impostazioni del modulo aggiungendo valori di spaziatura personalizzati su schermi di diverse dimensioni.
- Margine superiore: 5vw
- Margine interno di picco: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno sinistro: 1,8 vw (desktop), 3 vw (tablet), 4 vw (telefono)
- Margine interno destro: 1,8 vw (desktop), 3 vw (tablet), 4 vw (telefono)
Aggiungi funzionalità di scorrimento
Aggiungi l'ID CSS al modulo di testo dell'icona del menu
Ora che abbiamo tutti gli elementi a posto, è il momento di creare l'effetto menu scorrevole reattivo! Innanzitutto, apri il modulo Testo (contenente gli ambiti) nella terza colonna della prima riga e utilizza un ID CSS personalizzato nella scheda Avanzate. Utilizzeremo questo ID CSS per creare una funzione di clic nel nostro codice.
- ID CSS: slide-in-open
Aggiungi la classe CSS alla riga #2
Quindi apri la seconda riga, vai alla scheda avanzate e aggiungi una classe CSS personalizzata. Quando si fa clic, la linea scorrerà.
- Classe CSS: slide-in-menu-container
Modificare il posizionamento della riga n. 2
Riposizionaremo anche questa linea. Nota come l'offset orizzontale corrisponda alla larghezza della linea su diverse dimensioni dello schermo nelle impostazioni di ridimensionamento.
- Posizione: Assoluta
- Posizione: in alto a destra
- Offset orizzontale: -20% (desktop), -40% (tablet), -60% (telefono)
Modifica l'opacità della riga 2
E porta l'opacità a 0 in uno stato predefinito.
opacity: 0;
Aggiungi il modulo Codice alla seconda colonna della prima riga
Inserisci il codice CSS
Per creare l'effetto della funzione clic e dare uno stile ai righi della nostra icona hamburger, avremo bisogno del codice CSS. Aggiungi un modulo di codice alla seconda colonna della prima riga e inserire le seguenti righe di codice CSS tra i tag di stile, come puoi vedere nella schermata di stampa qui sotto:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Inserisci il codice JQuery
Dovremo anche aggiungere un po' di JQuery per la funzione click. Accertati di inserire il codice tra i tag di script , come puoi vedere nella schermata di stampa qui sotto:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Salva le modifiche al generatore di temi e mostra i risultati sul sito web
Una volta completati tutti gli elementi della tua intestazione globale, non devi far altro che salvare tutte le modifiche e visualizzare il risultato sul tuo sito!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Conclusione
In conclusione, in questo articolo, ti abbiamo mostrato come utilizzare il generatore di temi di Divi per creare un menu scorrevole reattivo. Per questo, abbiamo combinato il meglio degli elementi e delle opzioni integrati di Divi con un codice funzione clic personalizzato. Quindi, ti consente di concentrarti sulla progettazione del menu a scorrimento e lasciare che il codice si occupi della parte funzionale dell'intestazione globale!
Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
