En bref : Comment masquer les images en mode mobile sur WordPress
Trois façons de masquer des images sur mobile dans WordPress. La première méthode utilise SeedProd et empêche complètement le chargement des images, au lieu de simplement les masquer visuellement.
- Pourquoi masquer les images sur mobile ? – Les images volumineuses ralentissent le chargement des pages et masquent le contenu sur les petits écrans.
- Méthode du site web SeedProd : utilisez l’option « Visibilité sur appareil » dans l’onglet Avancé pour activer ou désactiver l’option « Masquer sur mobile » sur n’importe quelle image ou section.
- Pages de destination SeedProd – Les mêmes étapes s'appliquent dans SeedProd » Pages de destination, aucune modification de thème n'est nécessaire.
- Méthode CSS – Ajoutez une requête média display:none, mais attention : le navigateur télécharge toujours l’image sur mobile.
Les grandes images d'ordinateur peuvent perturber la mise en page de votre site mobile. Elles ralentissent les temps de chargement, repoussent le contenu vers le bas et donnent l'impression que votre site est encombré sur les petits écrans. La solution est simple : masquez les images sur mobile pour que les visiteurs ne voient que ce qui est important.
Dans ce guide, je vous montrerai trois façons simples de masquer les images en vue mobile sur WordPress, y compris une option sans code et une méthode CSS rapide.
Pourquoi cacher l'image dans les applications mobiles sur WordPress ?
Le masquage des images en vue mobile permet à votre site d'être propre et facile à utiliser. Une photo géante ou une bannière promotionnelle qui semble parfaite sur un ordinateur de bureau peut encombrer les petits écrans, ralentir les temps de chargement et masquer le contenu important. Dans certains cas, vous pouvez également proposer des offres réservées aux ordinateurs de bureau sans perturber les utilisateurs de téléphones portables.
En résumé, le masquage des images sur mobile permet aux utilisateurs de bénéficier d'une expérience plus rapide et plus claire.
Comment afficher et masquer une image en mode mobile sur WordPress
Les solutions pour masquer les images sur les écrans mobiles peuvent sembler complexes pour les utilisateurs qui ne sont pas familiers avec les langages de codage. Une recherche rapide sur Google révèle des instructions pour écrire des feuilles de style CSS personnalisées, des classes div et tout un jargon technique.
Ne vous inquiétez pas. Vous n'aurez besoin d'aucune expertise technique pour appliquer les méthodes décrites ci-dessous. Tout ce dont vous avez besoin, c'est d'un plugin WordPress, d'un site web WordPress et de la possibilité de suivre quelques étapes simples.
Méthode 1 : Masquer l'image dans l'affichage mobile du site web
Nous utiliserons SeedProd pour masquer les images sur mobile dans WordPress sans écrire de code.
SeedProd est le meilleur constructeur de site web pour WordPress. Il vous permet de créer des thèmes WordPress, des pages d'atterrissage et des mises en page réactives sans écrire de code.
Il comprend des centaines de modèles prédéfinis, et vous pouvez personnaliser chaque centimètre de votre site Web grâce au constructeur de pages, aux blocs et aux sections par glisser-déposer. Vous pouvez également utiliser les paramètres de visibilité de l'appareil pour masquer un contenu spécifique sur les vues mobiles et de bureau.
SeedProd propose également des modes intégrés, tels que le mode"bientôt", le mode "maintenance", la page 404 et la page de connexion. Vous pouvez activer et désactiver chaque mode en un seul clic, ce qui vous permet de cacher votre site au public pendant que vous travaillez sur son design.
Suivez les étapes ci-dessous pour masquer les images en vue mobile sur votre site web WordPress.
Étape 1. Installer et activer SeedProd
Tout d'abord, cliquez sur le bouton ci-dessous pour obtenir votre exemplaire de SeedProd.
Note : Pour utiliser la fonction de création de site web de SeedProd, vous avez besoin d'une licence SeedProd Pro.
Après avoir téléchargé le plugin, installez-le et activez-le sur votre site WordPress. Vous pouvez suivre ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide.
Ensuite, allez dans SeedProd " Settings et entrez votre clé de licence.
Vous trouverez votre clé dans le tableau de bord de votre compte SeedProd, dans la section "Téléchargements".
Cliquez sur le bouton Verify Key pour déverrouiller votre licence SeedProd, puis passez à l'étape suivante.
Étape 2. Choisir un modèle de site web
L'étape suivante consiste à créer un thème WordPress personnalisé. Cela vous permettra d'utiliser les paramètres de "visibilité des appareils" de SeedProd pour afficher et masquer des contenus différents sur les ordinateurs de bureau et les téléphones portables.
Allez sur SeedProd " Theme Builder et cliquez sur le bouton Themes pour choisir un modèle de site web.
De nombreux thèmes sont disponibles pour différents secteurs et types de sites web, notamment pour le commerce électronique, les blogs, les portfolios, etc.
Une fois que vous avez trouvé un thème qui vous plaît, survolez-le et cliquez sur l'icône de la coche pour l'importer sur votre site.
Vous voyez maintenant les différentes parties qui composent votre thème WordPress.
Généralement, vous devriez les personnaliser manuellement avec du code, mais avec SeedProd, vous pouvez éditer visuellement chaque partie de votre site web avec le constructeur de pages par glisser-déposer.
Pour personnaliser n'importe quelle partie de votre site web, passez la souris sur un modèle de thème et cliquez sur le lien "Modifier la conception". Pour ce guide, nous commencerons par la page d'accueil.
Une fois votre modèle choisi, vous pouvez personnaliser la mise en page grâce à l'outil glisser-déposer de SeedProd. Lorsque vous serez prêt, passez à l'étape 4 pour masquer l'image.
Étape 4. Masquer les images du site Web sur les mobiles avec Device Visibility
Masquer les images sur les téléphones portables est facile avec les paramètres de "visibilité des appareils" de SeedProd. Vous pouvez cacher des images individuellement ou des sections entières d'images en un seul clic.
Pour masquer des images individuellement, recherchez l'image que vous souhaitez masquer, puis cliquez dessus pour ouvrir les paramètres du contenu.
Cliquez ensuite sur l'onglet "Avancé" et développez la section "Visibilité des appareils".
Pour masquer l'image sur les téléphones portables, cliquez sur le bouton situé à côté de l'intitulé "Masquer sur les téléphones portables".
Cette image ne s'affichera plus que pour les visiteurs de l'ordinateur de bureau et sera cachée sur les téléphones portables.
Vous pouvez suivre les mêmes étapes pour cacher des rangées d'images entières avec SeedProd. Ouvrez simplement les paramètres de la rangée, et dans l'onglet "Avancé", utilisez les paramètres de "Visibilité de l'appareil" pour cacher la rangée d'images sur mobile.
Vous pouvez prévisualiser vos modifications en cliquant sur l'icône "Aperçu mobile" dans la barre d'outils inférieure.
Les images grisées ne seront pas visibles pour les visiteurs du site web mobile.
Lorsque vous êtes satisfait de l'aspect de votre dessin, cliquez sur le bouton Enregistrer dans le coin supérieur droit de votre écran.
Suivez les étapes ci-dessus pour masquer les images en vue mobile pour tout autre modèle de thème, comme la barre latérale, les articles uniques, les pages, etc.
Par exemple, si vous souhaitez masquer les images en vedette de vos articles de blog sur mobile, vous pouvez modifier votre modèle d'article unique et changer les paramètres de visibilité du bloc Image en vedette comme suit :
Étape 5. Publier votre site web WordPress
Lorsque vous êtes prêt à mettre en place votre thème personnalisé, allez sur SeedProd " Theme Builder et mettez l'interrupteur "Enable SeedProd Theme" sur la position "On".
Vous pouvez maintenant prévisualiser votre site web pour voir les changements. Comme vous pouvez le voir dans cet exemple, les images que nous avons choisies plus tôt sont masquées sur mobile.
Méthode 2 : Masquer les images en mode mobile sur les pages d'atterrissage
La procédure est identique pour les pages de destination autonomes. Créez une page dans SeedProd » Pages de destination , ouvrez-la dans l'éditeur et désactivez l'option « Masquer sur mobile » dans l'onglet Avancé.
Méthode 3 : Masquer une image sur mobile avec CSS
Remarque : je ne recommande cette méthode que si vous êtes à l'aise avec les langages de codage. Vous pouvez utiliser le personnalisateur intégré de WordPress pour ajouter des feuilles de style CSS personnalisées à votre site web.
Je comprends que certains propriétaires de sites web préfèrent personnaliser leur site manuellement. C'est pourquoi la méthode suivante vous montrera comment masquer les images sur les téléphones portables à l'aide d'un CSS personnalisé.
Tout d'abord, trouvez la classe de l'élément de contenu qui contient votre image. Par exemple, l'image vedette de vos articles de blog. Vous pouvez ensuite la masquer en utilisant la classe CSS suivante :
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
Important : display:none Cette méthode masque visuellement l'image, mais le navigateur la télécharge tout de même sur mobile. Si la vitesse de chargement de la page est votre priorité, la méthode 1 est préférable. La fonctionnalité « Visibilité sur l'appareil » de SeedProd empêche tout simplement le chargement de l'image.
Vous devrez remplacer "your-element-class" par la classe CSS qui contient votre image. Vous devrez peut-être également ajuster la largeur maximale de l'appareil en fonction de votre thème WordPress et de la requête média.
Dans cet exemple, nous avons masqué l'image vedette de l'article sur mobile en ciblant la classe '.featured-media img' :
@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}
Comme vous pouvez le constater, l'image disparaît automatiquement sur les écrans de petite taille.
Si vous utilisez l'éditeur de blocs WordPress sans SeedProd, vérifiez le panneau Avancé des paramètres de bloc pour trouver l'option « Masquer sur mobile ». WordPress 6.x a ajouté cette option pour la plupart des blocs natifs.
FAQ sur le masquage des images dans la vue mobile
J'espère que cet article vous a aidé à apprendre comment cacher les images en vue mobile sur WordPress. Vous pourriez aussi aimer les guides suivants :
- Comment ajouter une barre latérale différente pour différentes pages dans WordPress
- Comment ajouter des CSS personnalisés dans WordPress (pour les débutants)
- Comment ajouter une ombre de boîte dans WordPress
- Comment masquer les titres de page dans WordPress
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
