Il modulo Menu a larghezza intera di Divi ti consente di posizionare un menu di navigazione in qualsiasi punto della pagina. Questo potrebbe essere utilizzato per aggiungere un secondo menu di pagina alla pagina, oppure potrebbe essere utilizzato in combinazione con la funzione Pagina vuota per spostare la navigazione principale in fondo alla pagina. Ad esempio, puoi spostare il menu sotto la prima sezione per accogliere le persone con un'immagine di avvio di grandi dimensioni. Questo in pratica consente alla navigazione dell'intestazione di spostarsi nella pagina utilizzando il builder!
Come aggiungere un modulo di menu a schermo intero alla tua pagina
Prima di poter aggiungere un modulo di menu a larghezza intera alla tua pagina, devi prima passare a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Abilita Visual Builder quando sfogli il tuo sito web in primo piano se hai effettuato l'accesso alla dashboard di WordPress.
Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. Nuovi moduli a larghezza intera possono essere aggiunti solo all'interno di sezioni a larghezza intera. Se stai iniziando una nuova pagina, non dimenticare di aggiungere prima una sezione a tutta larghezza alla tua pagina. Abbiamo alcuni ottimi tutorial su come utilizzare gli elementi della sezione Divi.
Individua il modulo del menu a larghezza intera nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "Menu a larghezza intera" o "menu a larghezza intera" (a seconda della versione) e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo di menu a larghezza intera ! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .
Caso d'uso di esempio: aggiunta di un menu a larghezza intera sotto l'intestazione della pagina
Per questo esempio, ti mostrerò come aggiungere un menu a larghezza intera nella sezione dell'intestazione di una pagina.
Ecco un esempio:
Poiché questo nuovo menu a pagina intera sostituirà il menu di navigazione principale predefinito, è necessario selezionare il modello di pagina vuota in modo che il menu di navigazione predefinito non appaia nella parte superiore della pagina oltre al menu a larghezza intera. che aggiungerò.
Per modificare il modello di pagina, vai all'editor della pagina e seleziona il modello "pagina vuota" nell'area Attributi pagina della barra laterale destra.
Poiché questo modulo visualizzerà un menu già esistente, è importante che abbiate già creato il menu prima di aggiungerlo al modulo di menu a larghezza intera.
Dopo aver creato il menu, utilizza il visual builder per aggiungere una sezione a tutta larghezza appena sotto la sezione dell'intestazione della pagina. Quindi aggiungi un modulo di menu a larghezza intera alla sezione.
Aggiorna le impostazioni del menu Fullwidth come segue:
Opzioni di contenuto
Menu: [seleziona il menu che dovrebbe essere usato nel modulo] Contesto: # 333333
Opzioni di design
Colore del testo: chiaro Orientamento del testo: centro Carattere del menu: menu Roboto Dimensione carattere: 20 px
Questo è tutto!
trucco : Puoi utilizzare le opzioni di visualizzazione nella scheda Avanzate per nascondere questo menu sui dispositivi mobili e visualizzare un menu diverso sopra l'intestazione in modo che gli utenti mobili possano vedere il menu senza dover scorrere la pagina verso il basso .
Opzioni di menu a tutto schermo
Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.
Menu
Seleziona un menu da utilizzare nel modulo. È possibile creare nuovi menu utilizzando la pagina Aspetti> Menu dalla dashboard di WordPress. Ogni volta che crei un nuovo menu, il menu sarà selezionabile da questo menu a discesa.
Colore di sfondo
Per impostazione predefinita, il modulo menu ha un colore di sfondo bianco. Se desideri utilizzare un colore diverso per lo sfondo del menu, puoi sceglierlo qui utilizzando il selettore dei colori.
Colore di sfondo del menu a discesa
Per impostazione predefinita, i menu a discesa nel modulo menu ereditano il colore di sfondo definito nell'impostazione precedente. Se desideri che i tuoi menu a discesa abbiano il proprio colore, puoi scegliere un colore personalizzato utilizzando questa impostazione.
Colore di sfondo del menu mobile
Sui dispositivi mobili, il modulo menu si trasforma in un design diverso e più adattato ai dispositivi mobili. È possibile controllare il colore di sfondo del menu a discesa mobile indipendentemente dalla sua controparte desktop.
Etichetta di amministrazione
Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.
Opzioni di progettazione del menu a larghezza intera
Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.
Aprire i sottomenu
Per impostazione predefinita, tutti i sottomenu si aprono come menu a discesa sotto la barra dei menu principale. Se posizioni il tuo menu vicino alla parte inferiore della pagina e il tuo menu contiene lunghi menu a discesa, potresti voler aprire quei menu sopra il modulo del menu in modo che il menu non si estenda oltre la finestra del browser.
Crea collegamenti a tutto il menu
Per impostazione predefinita, i collegamenti di primo livello con il modulo menu vengono posizionati all'interno della larghezza del contenuto predefinita. Se vuoi rimuovere questa restrizione e fare in modo che i tuoi link corrano per l'intera larghezza della pagina, a partire dall'estrema sinistra dello schermo, puoi abilitare questa opzione.
Colore della riga del menu a discesa
Nei menu a discesa, i collegamenti sono separati da una linea di 1 pixel. Se desideri personalizzare il colore di questa riga, puoi scegliere un colore personalizzato utilizzando il selettore di colori in questa impostazione.
Colore del testo
Qui puoi scegliere il valore del tuo testo. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere acceso. Se stai lavorando con uno sfondo chiaro, il tuo testo dovrebbe essere scuro.
Orientamento del testo
Controlla come il testo è allineato nel modulo. Puoi scegliere tra Sinistra, Destra e Centro.
Colore link attivo
I colori dei collegamenti attivi sono evidenziati nel modulo menu per mostrare all'utente la loro posizione corrente. È possibile modificare il colore di evidenziazione utilizzato per questi collegamenti attivi utilizzando questa impostazione.
Colore del testo del menu a discesa
Per impostazione predefinita, il testo nei menu a discesa del modulo eredita il colore del testo del menu principale. Tuttavia, potresti voler cambiare questo colore se hai definito un colore di sfondo del menu a discesa personalizzato.
Colore del testo del menu mobile
Per impostazione predefinita, il testo nei menu a discesa del modulo eredita il colore del testo del menu principale. Tuttavia, potresti voler cambiare questo colore se hai impostato un colore di sfondo del menu mobile personalizzato.
Carattere del menu
È possibile modificare il carattere del carattere del menu selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.
Menu Dimensione carattere
Qui puoi regolare la dimensione del carattere del menu. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Colore del testo del menu
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo digitale, scegli il colore desiderato dal selettore di colori usando questa opzione.
Spaziatura delle lettere del menu
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo numerico, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Altezza della riga del menu
L'altezza della riga influisce sullo spazio tra ogni riga del testo numerico Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Opzioni avanzate del menu a larghezza intera
Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.
ID CSS
Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.
Classe CSS
Inserisci le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare stili CSS personalizzati. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o sito web. sito web utilizzando le opzioni del tema Divi o le impostazioni della pagina Divi Builder.
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
Animazione del menu a discesa
Puoi scegliere tra diverse animazioni da utilizzare quando un menu a discesa è abilitato. Per impostazione predefinita, l'animazione è impostata su dissolvenza, ma puoi modificarla in: espandere, trascinare o capovolgere.
visibilità
Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin