Tutorial video per mostrare contenuti diversi su dispositivi mobili
Iscriviti a un canale mi:
Contenuti diversi a seconda del dispositivo
Quello che faremo è come mostrare contenuti diversi su dispositivi mobili e desktop su un Web SENZA PLUGINS.
Questo può essere molto utile, ad esempio, se vogliamo avvisare gli utenti di cambiare dispositivo per avere una buona esperienza o per qualsiasi altro motivo.
Dobbiamo tenere a mente che in molte occasioni avere un buon design reattivo non significa solo cambiare le dimensioni degli elementi, ma anche che gli elementi appaiano. elementi più rilevanti a seconda del dispositivo.
Mostrare contenuti diversi sui dispositivi mobili fa parte della creazione di un buon design reattivo.
Avremmo potuto farlo con un plugin, infatti lo farò in un altro tutorial, ma volevo mostrare come farlo senza installare nulla.
Ricorda il detto:
«Il miglior plugin è quello che non installi»
Oscar Martino
Creazione delle classi CSS
Abbiamo bisogno di creare diverse classi CSS in modo che il design che vogliamo sia attivato.
Lo farò in due modi diversi:
Crea classi CSS manualmente
Per creare manualmente una classe css in WordPress dobbiamo cliccare sui 3 punti del blocco gutenberg e selezionare l'opzione Modifica come HTML
Così facendo, il blocco apparirà in html e possiamo aggiungere la classe come segue:
<p class="contenido-escritorio">Contenido para escritorio</p>
Crea classi CSS con le opzioni di WordPress
Per farlo con le opzioni che offre WordPress, selezioniamo il blocco e nelle opzioni avanzate a destra aggiungiamo il nome della classe:
Creazione del CSS in personalizzare CSS aggiuntivo
Per visualizzare contenuti diversi a seconda delle dimensioni del dispositivo, abbiamo una risorsa molto utile in css e questo è il media query
Le media query ci consentono di impostare regole diverse a seconda delle dimensioni dello schermo.
Le media query rilevano le dimensioni dello schermo e, a seconda delle dimensioni, vengono attivate alcune regole CSS o altre.
Qui lascio il css utilizzato
.contenido-escritorio{
display:block;
}
.contenido-movil{
display:none;
}
@media screen and (max-width: 768px){
.contenido-escritorio{
display:none;
}
.contenido-movil{
display:block;
}
}
Se vuoi saperne di più sulla regola di visualizzazione qui puoi farlo
Domande frequenti sull'aggiunta di contenuti in base alle dimensioni dello schermo
Funziona su pagine che non sono realizzate in WordPress?
Ovviamente, poiché utilizziamo i CSS, puoi utilizzare questo metodo in qualsiasi cms o pagina creata manualmente.
Proteggi i contenuti in modo sicuro?
No, poiché stiamo cambiando il display in CSS, non è un modo sicuro per proteggere i contenuti sensibili. Il contenuto non è visibile ma se guardi il codice lo è. Quindi non usarlo per creare siti di appartenenza
È meglio usare un plugin o farlo manualmente?
Ogni volta che possiamo, è meglio farlo manualmente per non sovraccaricare la pagina con plugin non necessari.
Le classi sono riutilizzabili?
Sì, una volta creato puoi utilizzarli in tutti i contenuti del web senza dover creare nuove regole nel CSS per mostrare contenuti diversi su dispositivi mobili.
Se ti piacciono questi tipi di trucchi CSS, eccone un altro per te. cambia il testo con css