In un blog prevalentemente di contenuto, potremmo preferire non far visualizzare le immagini in evidenza a chi naviga da smartphone
Se, nella nostra situazione, le immagini non hanno un’importanza fondamentale, potremmo alleggerire e velocizzare il caricamento dell’elenco dei post, e mostrare subito agli utenti il titolo dei nostri contenuti più rilevanti.
Tramite Opzioni Tema/Layout/Impostazioni generali, Divi permette di nascondere le miniature dei post dalle pagine indice
Innanzi tutto: per pagine indice, intendiamo quelle dove viene visualizzata una lista di articoli (quindi gli archivi, le pagine dove mettiamo un modulo blog…), non necessariamente la homepage.
L’impostazione che ci dà Divi agisce su tutto il sito e a qualunque risoluzione. Ma se, ad esempio, volessimo nasconderle solo sugli smartphone? E magari solo le immagini di un certo modulo Blog?
Il procedimento per farlo è semplicissimo!
Come nascondere le immagini in evidenza del blog
Questo sistema nasconderà le miniature agli smartphone, ma solo quelle dei moduli blog a cui vogliamo applicarlo. Per prima cosa, andare nelle Opzioni Avanzate del modulo blog e inserire, nel campo Classe CSS il nome “no-img-mobile”.
Adesso, assegnamo a questa classe un certo comportamento, tramite una media query che dice, più o meno: “Caro schermo del telefonino, quando trovi le immagini nella lista dei post, non mostrarle se lo schermo non è largo almeno 480px!”. Eccola qui:
/* Tolgo le img da smartphone */
@media ( max-width: 479px ) { /*non mostrare le immagini su display fino 479px*/
.no-img-mobile img {
display:none;
}
}
Questo codice va messo nel Custom CSS di Divi (Opzioni Tema/Generale) oppure, se presente, nel foglio di stile del child theme.
Salvare e testare (pulire prima la cache, altrimenti potresti non vedere subito le modifiche). La misura in pixel può essere cambiata con il valore che si ritiene più congruo, se si vuole inibire la visualizzazione delle immagini in evidenza anche da tablet o a qualche display in particolare.
Studiando un po’ le media query, si scopre come rendere le pagine web ottimamente leggibili dai vari dispositivi: è un argomento che consiglio vivamente di approfondire!
