Come creare un menu Blurb al passaggio del mouse/clic per la tua pagina con Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di design Divi in ​​corso, ti mostreremo come creare uno straordinario menu blurb che si espande quando passi il mouse o fai clic su di esso. Inizieremo per prima cosa seguendo alcuni passaggi generali. Continueremo aggiungendo voci di menu utilizzando i moduli Blurb e finiremo permettendoti di scegliere tra un effetto al passaggio del mouse o un clic.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Modalità al passaggio del mouse

Desktop

Mobile

Fare clic su Modalità

Desktop

Mobile

1. Crea una pagina vuota e carica la pagina di destinazione delle visite turistiche

Aggiungi nuova pagina vuota e abilita Divi Builder

La prima cosa che devi fare è creare una nuova pagina vuota. Dai un titolo alla tua pagina e passa a Divi Builder.

Carica la pagina di destinazione delle visite turistiche

Dopo aver abilitato Divi Builder, carica il layout della pagina di destinazione del pacchetto di layout turistici.

2. Aggiungi una nuova sezione normale in fondo alla pagina

Una volta nascosta la barra dei menu principale, possiamo iniziare ad aggiungere il menu blurb. Per fare ciò, aggiungeremo una nuova sezione regolare in fondo alla nostra pagina.

Colore di sfondo

Apri le impostazioni della sezione e aggiungi un colore di sfondo bianco leggermente trasparente.

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

Spaziatura

Passa alla scheda Progettazione e rimuovi tutte le imbottiture superiori e inferiori predefinite della sezione.

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

Ombra casella predefinita

Aggiungi un'ombra di casella alla sezione successiva.

• Forza sfocatura ombra scatola: 18px
• Colore ombra: #383838

Ombra del riquadro al passaggio del mouse

E cambia la forza della sfocatura dell'ombra della scatola al passaggio del mouse.

• Forza sfocatura ombra scatola: 1000 px

Nascondi gli overflow della sezione e aumenta l'indice Z

Useremo le impostazioni di ridimensionamento della sezione per far funzionare questa tecnica, ma per assicurarci che nulla superi il contenitore della sezione, dovremo nascondere gli overflow. Stiamo anche aumentando l'indice Z per assicurarci che la sezione rimanga in cima al resto della pagina.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto
• Indice Z: 9999

3. Assicurati che tutto il contenuto del menu della sezione sia creato utilizzando Vw e si adatti all'altezza della finestra di 100 su tutte le dimensioni dello schermo

Aggiungi riga n. 1

Struttura della colonna

Una volta completate le impostazioni di base della sezione, è il momento di aggiungere tutti i contenuti che desideri visualizzare nel menu. Puoi creare qualsiasi design desideri utilizzando gli elementi di design e le opzioni integrate di Divi, ma devi assicurarti che tutto si adatti a un'altezza di '100vh' su tutte le dimensioni dello schermo. Per ottenere ciò, utilizzeremo l'unità di larghezza della finestra durante il processo di costruzione e modificheremo i valori su diverse dimensioni dello schermo. Inizia aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e assicurati che occupi l'intera larghezza della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Passa alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Aggiungi modulo di testo alla colonna

Aggiungi simbolo

Continua aggiungendo un modulo di testo alla colonna della riga. Aggiungi il simbolo '=' alla casella del contenuto o sentiti libero di usare qualsiasi altro simbolo a tua scelta.

Colore di sfondo

Successivamente cambia il colore di sfondo del modulo.

• Colore di sfondo: #000000

Impostazioni testo

Passa alla scheda Design e modifica anche le impostazioni del testo.

• Carattere del testo: Open Sans
• Allineamento del testo: Centro
• Colore del testo: #ffffff
• Dimensione del testo: 3vw (desktop), 5vw (tablet), 7vw (telefono)
• Altezza riga di testo: 1em

Spaziatura

Stiamo anche aggiungendo spazio nella parte superiore e inferiore del modulo utilizzando i seguenti valori di riempimento personalizzati:

• Imbottitura superiore: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefono)
• Imbottitura inferiore: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefono)

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una seconda riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Passa alle impostazioni di spaziatura e aggiungi successivamente un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)

Schermo

Per assicurarci che entrambe le colonne rimangano una accanto all'altra su schermi di dimensioni più piccole, aggiungeremo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere le voci del menu! Aggiungi un nuovo modulo Blurb alla prima colonna della riga e inserisci del contenuto a tua scelta.

Seleziona icona

Scegli un'icona successiva.

Aggiungi collegamento

E inserisci un collegamento alla pagina che corrisponda alla voce di menu.

• URL collegamento titolo: #

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona di conseguenza:

• Colore icona: #ff3314
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 2vw (desktop), 3vw (tablet), 4vw (telefono)

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: PT Serif
• Stile carattere del titolo: sottolineato
• Colore sottolineatura titolo: #ff3314
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 1.8vw (desktop), 2.3vw (tablet), 3.3vw (telefono)

Impostazioni del corpo del testo

Quindi, modifica le impostazioni del testo del corpo.

• Carattere del corpo: Lato
• Allineamento del corpo del testo: Centro
• Colore del corpo del testo: #c6c6c6
• Dimensioni del corpo del testo: 0.9vw (desktop), 1.7vw (tablet), 2.1vw (telefono)
• Altezza della linea del corpo: 1,8 em

Dimensionamento

E modifica la larghezza del modulo su diverse dimensioni dello schermo utilizzando i seguenti valori:

• Larghezza: 60% (Desktop), 65% (Tablet), 80% (Telefono)

Animazione

Stiamo anche rimuovendo l'animazione dell'icona nelle impostazioni dell'animazione.

• Animazione icona: nessuna animazione

Clona modulo Blurb e posiziona duplicato nella colonna 2

Una volta completato il modulo Blurb, puoi clonarlo e posizionare il duplicato nella seconda colonna della riga.

Cambia copia

Assicurati di cambiare la copia.

Cambia icona

Insieme all'icona.

Cambia collegamento

E il collegamento alla pagina che corrisponde alla nuova voce di menu.

Clona riga due volte

Dopo aver completato entrambi i moduli Blurb nella riga, puoi clonare l'intera riga due volte.

Cambia copia, icona e collegamento per ogni duplicato Blurb individualmente

Assicurati di modificare la copia, l'icona e il collegamento per ciascuna delle voci del menu blurb singolarmente.

4. Rendi la sezione appiccicosa

Predefinito

Dopo aver aggiunto tutti gli elementi che vuoi mostrare alla tua sezione, puoi fare in modo che la sezione si attacchi alla parte superiore sinistra della pagina aggiungendo le seguenti due righe di codice CSS all'elemento principale della sezione:

position: fixed;
top: 0;

Passa il mouse (importante!)

Abilita l'opzione al passaggio del mouse sull'elemento principale della sezione e assicurati che la sezione rimanga fissa anche in questo stato.

position: fixed;

5. Scegli un metodo: A) Menu al passaggio del mouse o B) Menu al clic

A) Menu al passaggio del mouse

Dimensionamento della sezione predefinito

Nella parte successiva del tutorial, dovrai scegliere un metodo preferito; un menu al passaggio del mouse o fare clic. Il menu al passaggio del mouse si comporterà come un menu a clic sui dispositivi più piccoli. Se decidi di scegliere l'opzione al passaggio del mouse, apri nuovamente le impostazioni della sezione, vai alle impostazioni di dimensionamento e modifica di conseguenza la larghezza e l'altezza del tuo menu:

• Larghezza: 8vw (desktop), 12vw (tablet), 20vw (telefono)
• Altezza: 7.4vw (desktop), 12vw (tablet), 16vw (telefono)

Dimensionamento della sezione al passaggio del mouse

Modifica i valori al passaggio del mouse per creare un menu espandibile.

• Larghezza: 80%
• Altezza: 100vh

B) Menu su Click

Aggiungi la classe CSS al modulo di testo

Se vuoi un menu che si apre solo al clic, dovrai aprire il modulo di testo contenente il simbolo del menu. Vai alla scheda Avanzate e aggiungi una classe CSS personalizzata.

• Classe CSS: fullwidth-open

Aggiungi la classe CSS alla sezione

Successivamente apri le impostazioni della sezione e aggiungi una classe CSS diversa.

• Classe CSS: smooth-transform

Dimensionamento della sezione

Stiamo modificando la larghezza e l'altezza della nostra sezione successiva.

• Larghezza: 8vw (desktop), 12vw (tablet), 20vw (telefono)
• Altezza: 7.4vw (desktop), 12vw (tablet), 16vw (telefono)

Aggiungi codice alla pagina

Aggiungi nuova riga in fondo alla sezione

Ora, per creare l'effetto di commutazione, avremo bisogno di un po' di codice JQuery e CSS. Inizia aggiungendo un modulo di codice a una nuova riga nella parte inferiore della sezione.

Aggiungi modulo codice alla sezione e inserisci codice JQuery Toggle

Copia le seguenti righe di codice JQuery e incollale nella casella del codice:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Aggiungi codice CSS personalizzato alle impostazioni della pagina

Ultimo ma non meno importante, apri le impostazioni della pagina e aggiungi le seguenti righe di codice CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Modalità al passaggio del mouse

Desktop

Mobile

Fare clic su Modalità

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un bellissimo modulo blurb che si espande al clic/passa il mouse (a seconda delle tue preferenze). Questo è un ottimo modo per aggiungere ulteriore interattività al tuo menu mantenendo un risultato reattivo su tutte le dimensioni dello schermo. Se hai domande o suggerimenti, assicurati di 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.