Tutoriel vidéo pour afficher différents contenus sur mobile
S'abonner à mon canal :
Contenu différent selon l'appareil
Ce que nous allons faire, c'est comment afficher différents contenus sur mobile et sur ordinateur sur un site Web SANS PLUGINS.
Cela peut être très utile, par exemple, si nous voulons informer les utilisateurs de changer d'appareil pour avoir une bonne expérience ou pour toute autre raison.
Nous devons garder à l'esprit que, dans de nombreuses occasions, avoir un bon design réactif ne consiste pas seulement à changer la taille des éléments, mais aussi à ce que les éléments apparaissent. les éléments les plus pertinents selon l'appareil.
Afficher différents contenus sur mobile fait partie de la création d'un bon design réactif.
On aurait pu le faire avec un plugin, d'ailleurs je le ferai dans un autre tuto, mais je voulais montrer comment faire sans rien installer.
Rappelez-vous le dicton :
«Le meilleur plugin est celui qu'on n'installe pas»
Oscar Martin
Création des classes CSS
Nous devons créer plusieurs classes CSS pour que le design que nous voulons soit activé.
Je vais le faire de deux manières différentes :
Créer des classes CSS manuellement
Pour créer une classe CSS manuellement dans WordPress, nous devons cliquer sur les 3 points du bloc gutenberg et sélectionner l'option Modifier au format HTML
Ce faisant, le bloc apparaîtra en html et nous pourrons ajouter la classe comme suit :
<p class="contenido-escritorio">Contenido para escritorio</p>
Créer des classes CSS avec les options WordPress
Pour le faire avec les options que WordPress apporte, nous sélectionnons le bloc et dans les options avancées à droite nous ajoutons le nom de la classe :
Création du CSS dans personnaliser des css supplémentaires
Pour afficher un contenu différent selon la taille de l'appareil, nous avons une ressource très utile en css et c'est le requête média
Les requêtes médias nous permettent de définir différentes règles en fonction de la taille de l'écran.
Les media queries détectent la taille de l'écran et selon la taille, certaines règles css ou autres sont activées.
Ici, je laisse le css utilisé
.contenido-escritorio{
display:block;
}
.contenido-movil{
display:none;
}
@media screen and (max-width: 768px){
.contenido-escritorio{
display:none;
}
.contenido-movil{
display:block;
}
}
Si vous souhaitez en savoir plus sur la règle d'affichage ici tu peux le faire
Foire aux questions sur l'ajout de contenu en fonction de la taille de l'écran
Est-ce que ça marche sur des pages qui ne sont pas faites dans WordPress ?
Bien sûr, puisque nous utilisons CSS, vous pouvez utiliser cette méthode dans n'importe quel cms ou pages créées manuellement.
Protégez-vous le contenu en toute sécurité ?
Non, comme nous changeons l'affichage en CSS, ce n'est pas un moyen sûr de protéger le contenu sensible. Le contenu n'est pas visible mais si vous regardez le code, il l'est. Ne l'utilisez donc pas pour créer des sites d'adhésion
Est-il préférable d'utiliser un plugin ou de le faire manuellement ?
Dès que nous le pouvons, mieux vaut le faire manuellement pour ne pas surcharger la page avec des plugins inutiles.
Les cours sont-ils réutilisables ?
Oui, une fois que vous l'avez créé, vous pouvez les utiliser dans tout le contenu du Web sans avoir à créer de nouvelles règles dans le CSS pour afficher différents contenus sur mobile.
Si vous aimez ces types d'astuces CSS, en voici une autre pour vous. changer le texte par css