Vai al contenuto principale

Tutorial Divi: come utilizzare il modulo del menu a schermo intero

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Il modulo Menu a schermo intero su Divi semplifica l'aggiunta di bellissime intestazioni colorate nella parte superiore delle tue pagine (o ovunque sul tuo sito web, se lo desideri). Questi moduli possono essere posizionati solo in sezioni a larghezza intera.

modulo intestazione larghezza completa divi.png

Come aggiungere il modulo Menu a schermo intero Divi

Prima di poter aggiungere un modulo Menu a schermo intero alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi 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 navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

usa il costruttore di divi

Dopo essere entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli del menu a schermo intero 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.

menu completo divi.png

Individua il modulo di intestazione a schermo intero 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 "intestazione a schermo intero" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente il modulo di intestazione a schermo intero! 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'intestazione a schermo intero a una pagina Informazioni

Per questo esempio, ti mostrerò come utilizzare il modulo di intestazione Fullwidth per aggiungere un'intestazione con testo personalizzato e un'immagine di sfondo.

Tutti i moduli a schermo intero sono disponibili solo quando si utilizzano sezioni a schermo intero. Utilizzando Visual Builder, inserisci una nuova sezione a schermo intero. Quindi aggiungi un modulo Persona alla sezione.

Aggiorna le impostazioni dell'intestazione a schermo intero come segue:

Opzioni di contenuto

Titolo: Chi siamo Testo sottotitolo: Facciamo cose diverse ... URL immagine di sfondo: [inserisci immagine 1920 x 800] Colore sfondo sovrapposto: rgba (0,0,0,0.2 , XNUMX)

Opzioni di design

Orientamento del testo e del logo: pulsante centrale Scorri verso il basso Pulsante: SI Icona: [seleziona icona] Scorri verso il basso icona Colore: # fcbf00 Icona di scorrimento: 50px Colore testo: chiaro Colore testo: # fcbf00 Carattere Titolo: aperto senza, grassetto, lettere maiuscole Titolo Dimensione carattere: 60px (desktop), 40px (tablet), 30px (telefono) Sottotitolo Dimensione carattere: 25px

Opzioni avanzate (CSS personalizzato)

Elemento principale:
tappezzeria: 100px 0;

sezione contenuto divi module full screen.png

Questo è tutto!

esempio header divi.jpg

Opzioni di contenuto dell'intestazione a schermo intero

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.

contenuto sezione divi.png

titolo

Inserisci qui il titolo della tua pagina.

Testo sottotitoli

Se vuoi usare un sottotitolo, aggiungilo qui. La didascalia apparirà sotto il titolo con un carattere piccolo.

Pulsante # 1 Testo

Inserisci il testo per il pulsante.

Pulsante # 2 Testo

Inserisci il testo per il pulsante.

Contenuto

Qui puoi definire il contenuto che verrà posizionato sotto l'intestazione e il testo del titolo.

Pulsante URL 1

Immettere l'URL del pulsante.

Pulsante URL 2

Immettere l'URL del pulsante.

URL dell'immagine del logo

Carica l'immagine desiderata o digita l'URL dell'immagine che desideri visualizzare.

URL immagine intestazione

Carica l'immagine desiderata o digita l'URL dell'immagine che desideri visualizzare.

URL dell'immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo delle impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Colore di sfondo di sovrapposizione

Scegli un colore di sovrapposizione di sfondo, che verrà posizionato sopra l'immagine di sfondo. Le immagini sovrapposte semitrasparenti possono creare effetti interessanti se posizionate sopra le immagini di sfondo.

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 dell'intestazione 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.

sezione design module full width divi.png

Orientamento del testo e del logo

Questo controlla come il testo è allineato nel modulo.

Fai uno schermo intero

Qui puoi scegliere se l'intestazione deve essere espansa a schermo intero.

Usa l'effetto Parallax

Se abilitato, le immagini di sfondo avranno una posizione fissa come il tuo scorrimento, creando un divertente effetto di parallasse.

Metodo di parallasse

Definisci il metodo, utilizzato per l'effetto di parallasse.

Mostra il pulsante di scorrimento verso il basso

Qui puoi scegliere se visualizzare il pulsante di scorrimento verso il basso.

icona

Scegli un'icona da visualizzare per il pulsante di scorrimento verso il basso.

Scorri verso il basso l'icona Colore

Per impostazione predefinita, l'icona a discesa eredita il colore del testo dell'intestazione (bianco o grigio). È possibile modificare questo colore regolando il colore in questa opzione utilizzando il selettore dei colori.

Scorri verso il basso Dimensioni icona

Usa questa impostazione per aumentare o diminuire la dimensione dell'icona di scorrimento verso il basso che appare nella parte inferiore dell'intestazione.

allineamento divi modulo full width in head.png

Allineamento verticale dell'immagine

Controlla l'orientamento dell'immagine nel modulo.

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.

Allineamento verticale del testo

Questa impostazione determina l'allineamento verticale del contenuto. Il contenuto può essere centrato verticalmente o allineato in basso.

Carattere del titolo

È possibile modificare il carattere del testo del titolo 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.

Dimensione del carattere del titolo

Qui puoi regolare la dimensione del testo del titolo. È 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 suo tipo di unità.

Colore del testo del titolo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del titolo, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere del titolo

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo del titolo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di spaziatura desiderata nel campo di immissione 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 suo tipo di unità.

titolo sectio design module in head full screen divi.png

Altezza della riga del titolo

L'altezza della linea influisce sullo spazio tra ogni riga del testo del titolo.Se desideri 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 input 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 suo tipo di unità.

Carattere del contenuto

È possibile modificare il carattere del testo del contenuto 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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Dimensione del carattere del contenuto

Qui puoi regolare la dimensione del testo del contenuto. È 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 suo tipo di unità.

Colore del testo del contenuto

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del contenuto, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura di lettere di contenuto

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del contenuto, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione di 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 suo tipo di unità.

Altezza della riga del contenuto

L'altezza delle righe influisce sullo spazio tra ogni riga del testo del contenuto 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 suo tipo di unità.

Carattere sottotitoli

È possibile modificare il carattere del testo della didascalia 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.

Dimensione del carattere dei sottotitoli

Qui puoi regolare la dimensione del testo della didascalia. È 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 suo tipo di unità.

Colore del testo dei sottotitoli

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo della didascalia, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere dei sottotitoli

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo della didascalia, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci 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 suo tipo di unità.

Altezza della linea dei sottotitoli

L'altezza della riga influisce sullo spazio tra ogni riga del testo della didascalia. Se si desidera aumentare lo spazio tra ogni riga, 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 suo tipo di unità.

Larghezza massima del testo

Usa questa impostazione per ridurre la larghezza massima del testo nel modulo di intestazione. Ad esempio, un valore del 50% garantirà che il testo non superi mai il 50% della larghezza del modulo di intestazione generale.

sezione design modulo divi head full width.png

Usa stili personalizzati per il pulsante

L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.

Dimensione del testo del pulsante

Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.

Colore del testo del pulsante

Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.

Colore di sfondo del pulsante

Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.

Pulsante Larghezza bordo

Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.

Colore del bordo del pulsante

Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.

Raggio del bordo del pulsante

Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.

Spaziatura delle lettere dei pulsanti

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, 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 suo tipo di unità.

Carattere pulsante

È possibile modificare il carattere del testo del pulsante 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.

Aggiungi un'icona a pulsante

Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia al passaggio del mouse.

Icona del pulsante

Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.

Pulsante icona colore

La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.

Pulsante di posizionamento delle icone

Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.

Mostra solo l'icona quando si passa con il mouse sopra il pulsante

Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo al passaggio del mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.

Colore del testo al passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore di sfondo del pulsante al passaggio del mouse (colore del pulsante al passaggio del mouse)

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Pulsante Colore bordo al passaggio del mouse (colore del bordo del mouse)

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Pulsante del bordo del passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Pulsante di spaziatura delle note di puntamento

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Opzioni avanzate di intestazione 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.

modulo heading divisione sezione advance.png

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

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. 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 al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella 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.

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.

Altri tutorial di Divi

Questo articolo contiene i commenti 2

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
8 azioni
quota3
Tweet1
Enregistrer4