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:
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:
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.
Tags
Articoli correlati
Newsletter
