--- title: "Visualizzare moduli solo nella versione mobile del vostro sito Joomla! - Pixed" description: "Scopri come rendere visibili moduli o contenuti Joomla solo su dispositivi mobili o desktop con semplici righe di CSS. Guida pratica per migliorare la visualizzazione responsive del tuo sito in pochi passaggi" url: "https://www.pixed.it/pixed-blog/joomla/visualizzare-moduli-solo-nella-versione-mobile-del-vostro-sito-joomla" language: "it-it" published: "2016-01-26T14:40:53Z" modified: "2024-10-08T16:15:18Z" --- # Visualizzare moduli solo nella versione mobile del vostro sito Joomla! 26 Gennaio 2016 · Gianluca Gabella ⏱ tempo di lettura Quante volte vi sarà capitato, creando il vostro bel sito Joomla, di dover fare scelte progettuali forzate da un modulo o un componente che non è progettato in modo *responsive* (quindi non ottimizzato per una visualizzazione su dispositivo mobile) ? A me, purtroppo, è successo parecchie volte quindi mi sono fatto questa domanda: E' possibile far comparire un modulo (o un blocco di testo, o il contenuto all'interno di un articolo) solo nella versione mobile o solo nella versione desktop del sito? **La risposta è ovviamente SI!** Nativamente per Joomla non esiste questa opzione, ma poche righe di CSS ci permetteranno di raggiungere questo risultato senza il minimo sforzo. ### 1. Cosa dobbiamo ottenere e cosa ci serve? - Fare in modo che il nostro modulo X sia visibile solo nella versione desktop del sito - Fare in modo che il nostro modulo Y (che può essere X modificato a dovere) sia visibile solo nella versione mobile del sito ### 2. Cominciamo a modificare il nostro CSS Prima di tutto nel nostro file CSS settiamo questi due parametri: > .hidden-desktop {display:none !important} > > .hidden-mobile {display:block !important} **Che cosa significano?** Molto semplicemente stiamo dicendo che un qualsiasi elemento di classe "**.hidden-desktop**" deve essere invisibile nella visualizzazione desktop del sito mentre un qualsiasi elemento di classe "**.hidden-mobile**" deve essere visualizzato regolarmente. A questo punto dobbiamo definire come si deve comportare il modulo di classe .hidden-desktop a seconda della larghezza (in pixel) del device che sta guardando il sito: > /\* desktop con monitor largo: più di 1200 pixel \*/ > @media (min-width: 1200px) { > .hidden-desktop {display:none !important} > } > > /\* per device con monitor larghi da 768 a 979 pixel: tablet orizzontali o desktop \*/ > @media (min-width: 768px) and (max-width: 979px) { > .hidden-desktop {display:none !important} > } > > /\* tra 480 pixel e 767 pixel: tablet vari \*/ > @media (max-width: 767px) { > .hidden-desktop {display:block !important} > } > > /\* Tutto ciò che ha un monitor più piccolo di 480 pixel: telefoni \*/ > @media (max-width: 480px) { > .hidden-desktop {display:block !important} > } **Che cosa significano queste righe?** Molto semplicemente se il mio *viewport* (larghezza attuale della finestra) è dai *768 pixel* in su allora lascia l'elemento di classe *.hidden-desktop* invisibile; se il mio *viewport* è inferiore o uguale a *768 pixel* allora cambia la visibilità dell'elemento di classe *.hidden-desktop* in *block*, ossia visibile. **In parole povere, cos'è successo?** Semplice: il mio CSS si adatta costantemente alla larghezza della finestra: se è piccola applica la terza e la quarta regola (elemento visibile), se la finestra è grande applica le prime due (elemento invisibile). ### 3. Il caso contrario: rendere una classe visibile solo nella versione desktop? Il ragionamento è lo stesso, ma il codice sarà il seguente (nel vostro file CSS potete scrivere i due blocchi di codice uno di seguito all'altro) > /\* desktop con monitor largo: più di 1200 pixel \*/ > @media (min-width: 1200px) { > .hidden-mobile {display:block !important} > } > > /\* per device con monitor larghi da 768 a 979 pixel: tablet orizzontali o desktop \*/ > @media (min-width: 768px) and (max-width: 979px) { > .hidden-mobile {display:block !important} > } > > /\* tra 480 pixel e 767 pixel: tablet vari \*/ > @media (max-width: 767px) { > .hidden-mobile {display:none !important} > } > > /\* Tutto ciò che ha un monitor più piccolo di 480 pixel: telefoni \*/ > @media (max-width: 480px) { > .hidden-mobile {display:none !important} > } **Che cosa significano queste righe?** Al pari del precedente blocco di codice queste righe definiscono quando la classe deve essere visibile (*display: block* nelle prime due regole) oppure invisibile (*display: none* delle ultime due regole). ### 4. Ora che ho modificato il mio CSS come procedo? A questo punto dobbiamo assegnare la classe appropriata ai nostri moduli Joomla. Questo passaggio potete farlo direttamente nel **pannello di controllo --> estensioni --> gestione moduli**. Cliccate sul modulo che volete nascondere nella versione mobile e, nella parte destra, sotto la tab **Opzioni Avanzate**, aggiungete la classe **" hidden-mobile"** al modulo. **ATTENZIONE**: ricordatevi di lasciare uno spazio davanti a *hidden-mobile*, per evitare che si vada ad "appicciare" ad altre classi già presenti nel modulo, vanificando quindi il vostro lavoro. Qui potete vedere un esempio: ![schermata gestione modulo](https://www.pixed.it/images/blog/hidden_mobile_desktop/hidden_mobile.png) Come potete vedere dall'immagine il mio modulo chiamato "Le nostre linee" si trova in **position-7** e ha la classe **hidden-mobile** quindi sarà visibile solo quando il *viewport* sarà abbastanza grande (ossia quando saremo in visualizzazione desktop). A questo punto duplichiamo il nostro modulo e assegniamogli una nuova posizione, in questo modo: ![duplichiamo il modulo](https://www.pixed.it/images/blog/hidden_mobile_desktop/hidden_desktop.png) In questo modo il nostro nuovo modulo (chiamato *Le nostre linee 2*) sarà in una nuova posizione (**position-8**) e sarà visibile solo nella versione mobile del sito. ### 5. Morale della favola? Semplice: siete in una di queste situazioni? - Il vostro template è molto bello in versione desktop ma fa schifo in versione mobile... - I vostri moduli stanno bene in position-7 ma sul telefono si accavallano... - Il vostro modulo slideshow è enorme e non si vede bene sul telefono, quindi volete farlo scomparire... Con questo trucchetto CSS avrete modo di decidere quali moduli far comparire e dove, a seconda del dispositivo che visualizza il vostro sito. --- ti è piaciuto questo articolo? Condividilo! dal blog potrebbero interessarti: [Tutti gli articoli](https://www.pixed.it/pixed-blog) [![Come funziona la cache di Joomla?](https://www.pixed.it/media/yootheme/cache/5f/joomla-cache-5fd083f6.jpg?src=images/blog/cache/joomla-cache.jpg&thumbnail=600,400,&hash=6d3e3a00) ### Come funziona la cache di Joomla? 11 Dicembre 2024 ](https://www.pixed.it/pixed-blog/joomla/come-funziona-la-cache-di-joomla) [![Joomla e Open Graph: Configurare i Meta Tag Senza Estensioni](https://www.pixed.it/media/yootheme/cache/69/DALL.E%202024-11-25%2011.24.18%20-%20A%20LEGO-style%20minifigure%20character%20with%20a%20smiling%20face%20sitting%20at%20a%20desk%20and%20looking%20excitedly%20at%20a%20laptop%20screen.%20The%20background%20features%20colorful%20so-69649f4d.jpg?src=images/blog/opengraph/DALL.E%202024-11-25%2011.24.18%20-%20A%20LEGO-style%20minifigure%20character%20with%20a%20smiling%20face%20sitting%20at%20a%20desk%20and%20looking%20excitedly%20at%20a%20laptop%20screen.%20The%20background%20features%20colorful%20so.jpg&thumbnail=600,400,&hash=f175df22) ### Joomla e Open Graph: Configurare i Meta Tag Senza Estensioni 25 Novembre 2024 ](https://www.pixed.it/pixed-blog/joomla/joomla-e-open-graph-configurare-i-meta-tag-per-la-seo-senza-estensioni-esterne) [![Usiamo ChatGPT per creare un semplice modulo per Joomla4](https://www.pixed.it/media/yootheme/cache/1b/possessed-photography-U3sOwViXhkY-unsplash-1b7cd35e.jpg?src=images/blog/chatgpt/possessed-photography-U3sOwViXhkY-unsplash.jpg&thumbnail=600,400,&hash=811b83f0) ### Usiamo ChatGPT per creare un semplice modulo per Joomla4 03 Febbraio 2023 ](https://www.pixed.it/pixed-blog/joomla/usiamo-chatgpt-per-creare-un-semplice-modulo-per-joomla4)