Ti piacerebbe avere un menu Divi Mega con immagini per illustrare il contenuto dal menù? 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 quando 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.
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
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.
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ù:
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.
Trascina le tue immagini sulla pagina per aggiungerle o fai clic su 'Seleziona i file'
Inserisci le immagini nel Mega Menu
Torna alla pagina dei menu nella dashboard di WordPress.
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%” />
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"
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.
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
Accedi al tuo sito web e passa il mouse sopra il collegamento del mega menu. Ora il tuo mega menu dovrebbe assomigliare a questo:
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.
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 web. e-commerce che hanno un sacco di contenuto e richiedono immagini del prodotto. Speriamo che questo tutorial sia 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 intanto, condividi questo articolo sui tuoi diversi social network.
...
