Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

Ti piacerebbe avere un Mega Menu Divi con immagini per illustrare il contenuto del menu? Segui il nostro tutorial su come aggiungere immagini a un Mega Menu?

Adoriamo interagire con le immagini online. Con questo in mente, ha senso aggiungere un'immagine al tuo sito web ogni volta che è possibile. 

Inoltre, l'aggiunta di immagini in un mega menu è un'altra grande opportunità per offrire ai tuoi utenti l'interazione di cui hanno bisogno.

Le immagini migliorano anche il menu catturando la loro attenzione per semplificare ulteriormente il processo di navigazione.

Panoramica

Prima di entrare in questo tutorial, diamo un'occhiata al risultato che vogliamo ottenere.

Mega Menu Divi con immagini

Creazione del mega menù

Per iniziare, dobbiamo prima creare il menu. 

Per questo esempio, creeremo una voce di menu principale principale chiamata “Mega Menù” con quattro voci di sottomenu di seguito. Ciascuna delle quattro voci di sottomenu ha tre voci di sottomenu.

Vai alla dashboard di WordPress, quindi fai clic su Aspetti> Menu

Mega Menu Divi con immagini

Fare clic 'Crea un nuovo menu', assegnagli un nome e fai clic su 'Crea menu'.

Assicurati di abilitare la proprietà del menu Classi CSS facendo clic sulla scheda Opzioni schermata in alto a destra della schermata Menu e verifica Classi CSS.

Ora puoi aggiungere le tue voci di menu al nuovo menu che hai creato.

Divi: il miglior tema WordPress di tutti i tempi!

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

Per prima cosa creiamo la voce di menu che sarà il genitore di tutte le altre voci di menu. Questo è il collegamento che mostrerà il tuo mega menu al passaggio del mouse.

Per creare questa voce di menu, creare un collegamento personalizzato con i seguenti parametri:

  • URL: http://#
  • Titolo di navigazione: Mega Menu
  • Classi CSS: mega-menu

Ora disponi/trascina le quattro voci di menu (ognuna con tre voci secondarie proprie) in modo che diventino voci secondarie del collegamento principale Mega Menu principale.

Una volta aggiunti i collegamenti al menu, scorrere fino a 'Reglages du menu' nella parte inferiore della schermata del menu e selezionare 'Menu principale' per posizione di visualizzazione. Infine, fai clic su 'Salva menu'

Ecco come si presenta finora il nostro mega menù:

Mega Menu Divi con immagini

Aggiunta di immagini al mega menu

Ora che il menu è pronto, è il momento di aggiungere le immagini.

Leggi anche: Come faccio a fluttuare i post del blog in DIVI?

Ottieni le immagini

Inizia ottenendo quattro immagini. Queste immagini dovrebbero riguardare le quattro voci del sottomenu (Informazioni, Consegna del servizio, Il nostro lavoro e Contattaci).

Usa un editor di foto per ridimensionare e ritagliare ogni immagine in modo che sia larga 500 px e alta 300 px.

Aggiungi queste immagini alla libreria di WordPress. Clicca su Media > Aggiungi.

come aggiungere immagini a un Mega Menu

Trascina le tue immagini sulla pagina per aggiungerle o fai clic su 'Seleziona i file'

come aggiungere immagini a un Mega Menu

Inserisci le immagini nel Mega Menu

Torna alla pagina dei menu nella dashboard di WordPress.

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

In questo esempio, il collegamento nella parte superiore della prima colonna è " Di "

Fare clic sulla freccia a destra dell'elemento " Di ". Nella casella Etichetta di navigazione, aggiungi l'immagine desiderata utilizzando il tag html img subito prima del testo " Di ". Il tag immagine dovrebbe assomigliare a questo:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
come aggiungere immagini a un Mega Menu

Per trovare l'URL dell'immagine, vai a Media > Libreria multimediale, fai clic sull'immagine che desideri aggiungere. 

Nella schermata pop-up Dettagli allegato, trova l'URL nella sezione giusta, quindi fai clic su "Copia URL negli appunti"

come aggiungere immagini a un Mega Menu

Ora torna alla configurazione della voce di menu " Di " nella pagina del menu e sostituire il testo "Inserisci URL immagine" incollando l'URL dell'immagine utilizzando ctrl + v.

come aggiungere immagini a un Mega Menu

Prima di uscire dalle opzioni di configurazione per la voce di menu " Di ", trova la casella di testo Classi CSS e inserisci la classe "mega-link".

Questo ci consentirà di aggiungere uno stile personalizzato in un secondo momento.

Ripetere questo processo per aggiungere le seguenti tre immagini a ciascuna delle voci di sottomenu con la classe "mega-link". (In questo esempio, i restanti tre elementi sono “Erogazione dei servizi”, “Il nostro lavoro” et " Contattaci ".)

Risultato

Vai al tuo sito web e passa il mouse sopra il link del mega menu. Ora il tuo mega menu dovrebbe assomigliare a questo:

Mega Menu Divi con immagini

Nota che quando passi il mouse su ciascuna delle immagini, le immagini sfumano con la voce del sottomenu direttamente sotto. Questo perché l'immagine fa parte di quel collegamento, quindi facendo clic su di essa si accederà all'URL associato.

Tocchi finali

Per quest'ultimo passaggio, aggiungi alcuni CSS personalizzati al menu per rendere il carattere del testo più grande e centrato. Assegna anche un raggio di bordo attorno all'immagine per farla sembrare più pulita.

Nella dashboard di WordPress, vai a Divi> Opzioni tema . 

Scorri verso il basso fino alla casella CSS personalizzato, inserisci il CSS di seguito e fai clic 'Salvare le modifiche' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

Risultato finale

Tu hai finito !

Se hai seguito tutti i passaggi di questo tutorial, ecco il risultato che dovresti ottenere.

Mega Menu Divi con immagini

Scarica DIVI ora!!!

Conclusione

Hai un mega menu Divi con immagini senza dover utilizzare un plug-in. Questo tipo di menu funziona particolarmente bene per i siti di e-commerce che hanno molti contenuti e richiedono immagini di prodotti. Ci auguriamo che questo tutorial possa essere utile per i tuoi prossimi progetti Divi.

Se hai bisogno di più elementi per completare i tuoi progetti di creazione di siti web, sfoglia anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Ma intantocondividi questo articolo sui tuoi diversi social network.

...

0 azioni
quota
Tweet
Enregistrer