Apps : Mega menu


Rendi più dinamico il tuo sito con un menu performante!

Se non hai ancora attivato l'Apps "Mega Menu", clicca sull'icona “Apps” del backoffice.

Clicca sull'immagine per ingrandire


Ricerca l'Apps, quindi clicca sul tasto [Acquista].

Clicca sull'immagine per ingrandire


Se invece è stata già acquistata, verrà visualizzato il tasto [Installa].

È possibile scegliere se pubblicare l'applicazione sul sito o renderla visibile solo in anteprima:

Clicca sull'immagine per ingrandire


 
 Utilizzo

La gestione del mega menu è la stessa del menu classico, dal percorso [Sito > Menu > Menu Orizzontale].

Ogni sotto menu viene trasformato in un pannello :

Clicca sull'immagine per ingrandire


Clicca sull'immagine per ingrandire


 
 Creare una colonna

Le colonne sono determinate dalla presenza dell'elemento separatore.

Clicca sull'immagine per ingrandire


È possibile aggiungere quanti elementi separatori - quindi di colonne - si desidera. Ma nella pratica si riuscirà a gestire un massimo di 5 colonne.

 
 Menu a 3 livelli

Avere un menu a più livelli in modo da facilitare la navigazione per i clienti.

Clicca sull'immagine per ingrandire


Il sotto menu "UOMO" è applicato in formato "TITOLO" per poter passare al livello 2:

Clicca sull'immagine per ingrandire


Riguardo ad un sotto menu di livello 3 inseriamo, ad esempio, la voce "Tennis" che è applicata in formato "testo":

Clicca sull'immagine per ingrandire


 
 Inserire un'immagine di sfondo nel menu

Per inserire un'immagine di sfondo in un pannello, bisogna per prima cosa inserire un elemento immagine all'interno di un sotto menu. Questa immagine potrà essere posizionata in un qualunque sotto menu, ma è più logico posizionarla in ultima posizione, come ultimo elemento.

Bisognerà in seguito attribuire a questo elemento la classe backGround nel campo « Classe CSS Associata » : is-background

Clicca sull'immagine per ingrandire


NB : È consigliabile verificare attentamente che la dimensione dell'immagine inserita corrisponda alla dimensione disponibile nello spazio di allocazione del sotto menu.

 
 Raggruppare le immagini e i testi consecutivi in un unico elemento

Clicca sull'immagine per ingrandire


Clicca sull'immagine per ingrandire


Nei parametri dell'applicazione del mega menu:

Clicca sull'immagine per ingrandire


Associare le immagini e i testi seguenti in un unico oggetto:

Quando questa opzione è selezionata, gli elementi di testo seguito da elementi immagine vengono reggruppati per formare un elemento unico. Ciò permette di presentare dei link in formato immagine, ottimizzandoli anche dal punto di vista dell'indicizzazione del sito.
 
 MODALITA' ESPERTO - riservato ad utenti esperti:

 
 Cambio dell'immagine al passaggio del cursore del mouse (hover)

Clicca sull'immagine per ingrandire


Quando un elemento immagine è seguito da un altro elemento immagine con una classe CSS associata, sarà possibile fare in modo che l'immagine visualizzata cambi al semplice passaggio del cursore del mouse.

Bisognerà, in questo caso, attribuire a questo elemento la classe backGround nel campo « Classe CSS Associata » : is-img-hover
 
 Importazione di webBlocks nel menu

Clicca sull'immagine per ingrandire


Per aggiungere un webBlock al menu, inserire un elemento "testo", quindi richiamare il numero del webBlock interessato( es: id 123456) recuperato precendetemente dalla sezione [Gallerie > WebBlock].

Attribuire la classe backGround nel campo « Classe CSS Associata »: wb-id:123456
 
 Larghezza delle colonne

Clicca sull'immagine per ingrandire


La larghezza delle colonne può essere personalizzata grazie alle classi css dedicate : col-size-xx (xx= da 5 a 100 per intervalli di 5):
  • col-size-5
  • col-size-10
  • col-size-15
  • Ecc.

È sufficiente posizionare la classe una sola volta nella colonna di riferimento.
 
 Posizionare orizzontalmente elementi sotto una colonna

Clicca sull'immagine per ingrandire


È possibile definire un numero di colonne da visualizzare per linea grazie alla classe associata: nb-col-x (x = da 1 a 12) .

È sufficiente posizionare la classe una sola volta nella colonna di riferimento.
 

Aggiungi ai preferiti: http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=1024&TID=56164&MID=56018&LangID=4
© 2001-2019 Oxatis. Tutti i diritti riservati.