Joomla: come visualizzare le icone nelle voci del menu

Una guida che mostra come visualizzare le icone in corrispondenza delle voci di un menu Joomla, rendendolo così più gradevole alla vista dei visitatori.

joomla_logo

Nel tutorial di oggi vedremo come visualizzare delle semplici icone in corrispondenza delle voci di un menu Joomla in modo da renderlo più gradevole ed accattivante agli occhi dei visitatori. Per prima cosa osserviamo come appare un classico bottone “home” nel menu predefinito del CMS:

Joomla menu icone

 

Al termine di questa guida riusciremo ad inserire un’icona nello stesso bottone, vediamo come. Accediamo al back-end del CMS con un account amministratore e seguiamo il percorso Estensioni, Gestione, Installa.

Lasciamo aperta questa finestra del browser ed apriamone una nuova per raggiungere il sito ufficiale del modulo DJ-MegaMenu (in questo caso versione gratuita, disponibili anche versioni a pagamento con maggiori funzionalità) e scaricare l’archivio compresso.

Torniamo alla precedente finestra e procediamo all’installazione del modulo trascinandolo nell’area evidenziata dall’interfaccia del CMS:

Joomla menu icone

Se l’installazione è andata a buon fine visualizzeremo il messaggio presente anche nello screen qui sopra. È giunto il momento di scegliere l’icona da implementare, per farlo occorre prima individuare l’icona desiderata dal seguente link ed annotarne il nome. In questo tutorial abbiamo scelto l’icona home associata al nome icon-home:

Joomla menu icone

Dopo aver annotato il nome possiamo tornare al back-end Joomla e seguire il percorso Menu, Tutte le voci di menu e cliccare sull’elemento a cui desideriamo affiancare un’icona (nel nostro caso è Home):

Joomla menu icone

Dopo alcuni istanti sarà visualizzata la sezione dedicata alla modifica della voce di menu:

icon_2_d

Clicchiamo su DJ-MegaMenu Options per visualizzare la seguente schermata:

icon_2a

Nella casella in corrispondenza di Menu Icon andrà inserito il nome dell’icona precedentemente selezionata, nel nostro caso icon-home. Da notare tuttavia che “icon-” dovrà essere sostituito da “fa fa-” in modo da ottenere quanto mostrato nello screen qui sopra.

Salviamo cliccando sul bottone Salva e raggiungiamo la sezione Estensioni, Moduli. Per visualizzare gli elementi a noi necessari digitiamo “menu” nella casella cerca (lente di ingrandimento):

icon_3

Nello screen qui sopra è possibile notare che il modulo DJ-MegaMenu ha il segno di spunta verde mentre Menu Principale ha una croce rossa: ciò è ottenibile cliccando sulle corrispettive icone di ogni modulo che cambieranno stato all’istante. Assicuriamoci inoltre che DJ-MegaMenu abbiamo come posizione assegnata “position-1″.

Se così non fosse dovremo cliccare sul suo nome ed impostarla dall’apposita schermata (qui sotto). Ricordiamoci ovviamente di salvare la modifica.


icon_2e

Una volta attivato il modulo DJ-MegaMenu (segno di spunta verde) e disattivato Menu Principale (croce rossa) visitiamo la pagina principale del sito per verificare che l’icona sia stata effettivamente implementata nel menu:icon_4