Visualizzare moduli solo nella versione mobile del vostro sito Joomla!

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.