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.
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).
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).
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.
Semplice: siete in una di queste situazioni?
Con questo trucchetto CSS avrete modo di decidere quali moduli far comparire e dove, a seconda del dispositivo che visualizza il vostro sito.
Pixed di Gabella Gianluca
via del Lavoro 39, 40127 - Bologna (BO)
p.IVA: 03219311200 - C.F.: GBLGLC84T21A944B
Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo. - 051.514551