TL;DR : Comment masquer les images en vue mobile sur WordPress
Trois méthodes pour masquer les images sur mobile dans WordPress. La méthode 1 utilise SeedProd et empêche les images de se charger entièrement, pas seulement de les masquer visuellement.
- Pourquoi masquer les images sur mobile – Les images volumineuses ralentissent le temps de chargement et repoussent le contenu hors de la vue sur les petits écrans.
- Méthode du site web SeedProd – Utilisez la Visibilité de l'appareil dans l'onglet Avancé pour activer 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écessaire.
- Méthode CSS – Ajoutez une requête média display:none, mais notez que le navigateur télécharge toujours l'image sur mobile.
Les grandes images de bureau peuvent casser votre mise en page mobile. Elles ralentissent le temps de chargement, repoussent le contenu trop loin vers le bas et donnent une impression de désordre sur les petits écrans. La solution est simple : masquez les images sur mobile pour que les visiteurs ne voient que ce qui compte.
Dans ce guide, je vais vous montrer trois méthodes simples pour masquer les images en vue mobile sur WordPress, y compris une option sans code et une méthode CSS rapide.
Pourquoi masquer une image sur mobile dans WordPress ?
Masquer les images en vue mobile permet de garder votre site propre et facile à utiliser. Une photo héroïque géante ou une bannière promotionnelle qui rend bien sur ordinateur peut submerger les petits écrans, ralentir le temps de chargement et repousser le contenu important hors de la vue. Dans certains cas, vous pourriez également vouloir proposer des offres exclusives au bureau sans confondre les visiteurs sur téléphone.
En résumé : masquer les images sur mobile offre aux utilisateurs une expérience plus rapide et plus claire.
Comment afficher et masquer une image en vue mobile sur WordPress
Les solutions pour masquer les images sur les écrans mobiles peuvent sembler complexes pour les utilisateurs peu familiers avec les langages de codage. Une recherche rapide sur Google révèle des instructions pour écrire du CSS personnalisé, des classes div et toutes sortes de jargon technique.
Ne vous inquiétez pas. Vous n'aurez besoin d'aucune expertise technique pour les méthodes que nous abordons ci-dessous. Tout ce dont vous avez besoin est un plugin WordPress, un site web WordPress et la capacité de suivre quelques étapes simples.
Méthode 1 : Masquer une image en vue mobile sur le 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 de destination et des mises en page réactives sans écrire de code.
Il comprend des centaines de modèles préconçus, et vous pouvez personnaliser chaque centimètre de votre site web avec le constructeur de pages par glisser-déposer visuel, les blocs et les sections. Vous pouvez également utiliser les paramètres de Visibilité de l'appareil pour masquer du contenu spécifique sur les vues mobiles et de bureau.
SeedProd propose également des modes intégrés, tels que "Bientôt disponible", "Mode maintenance", page 404 et page de connexion. Vous pouvez activer ou désactiver chaque mode en un clic, ce qui vous permet de masquer votre site Web au public pendant que vous travaillez sur sa conception.
Suivez les étapes ci-dessous pour masquer les images en mode mobile sur votre site Web WordPress.
Étape 1. Installer et activer SeedProd
Tout d'abord, cliquez sur le bouton ci-dessous pour obtenir votre copie de SeedProd.
Remarque : Pour utiliser la fonctionnalité 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 » Paramètres et entrez votre clé de licence.
Vous pouvez trouver votre clé dans le tableau de bord de votre compte SeedProd, dans la section "Téléchargements".
Cliquez sur le bouton Vérifier la clé 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 "Visibilité des appareils" de SeedProd pour afficher et masquer différents contenus sur ordinateur et sur mobile.
Allez dans SeedProd » Constructeur de thèmes et cliquez sur le bouton Thèmes pour choisir un modèle de site Web.
De nombreux thèmes sont disponibles pour diverses industries et types de sites Web, y compris le commerce électronique, les blogs, les portfolios, etc.
Une fois que vous avez trouvé un thème qui vous plaît, passez la souris dessus et cliquez sur l'icône en forme de coche pour l'importer sur votre site.
Vous verrez maintenant les différentes parties qui composent votre thème WordPress.
Normalement, vous devriez personnaliser ces éléments manuellement avec du code, mais avec SeedProd, vous pouvez modifier visuellement chaque partie de votre site Web avec le constructeur de pages par glisser-déposer.
Pour personnaliser une partie de votre site Web, survolez un modèle de thème et cliquez sur le lien de conception "Modifier le design". Pour ce guide, nous commençons par la page d'accueil.
Une fois que vous avez choisi un modèle, vous pouvez personnaliser la mise en page avec le constructeur par glisser-déposer de SeedProd. Lorsque vous êtes prêt, passez à l'étape 4 pour masquer l'image.
Étape 4. Masquer les images du site Web sur mobile avec la visibilité des appareils
Masquer les images en mode mobile est facile avec les paramètres "Visibilité des appareils" de SeedProd. Vous pouvez masquer des images individuellement ou des sections d'images entières en un seul clic.
Pour masquer les images individuellement, trouvez l'image que vous souhaitez masquer, puis cliquez dessus pour ouvrir les paramètres de contenu.
Ensuite, cliquez sur l'onglet "Avancé" et développez la section "Visibilité des appareils".
Pour masquer l'image sur mobile, cliquez sur le commutateur à côté de l'en-tête "Masquer sur mobile".
Cette image ne s'affichera désormais qu'aux visiteurs sur ordinateur et sera masquée sur mobile.
Vous pouvez suivre les mêmes étapes pour masquer 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 "Visibilité des appareils" pour masquer 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.
Toutes les images "grisées" ne seront pas visibles par les visiteurs du site Web sur mobile.
Lorsque vous êtes satisfait de l'apparence de votre conception, cliquez sur le bouton Enregistrer dans le coin supérieur droit de votre écran.
Suivez les étapes ci-dessus pour masquer les images en mode mobile pour tout autre modèle de thème, tel que votre barre latérale, articles uniques, pages, etc.
Par exemple, si vous souhaitez masquer les images mises en avant de vos articles de blog sur mobile, vous pouvez modifier votre modèle d'article unique et modifier les paramètres de visibilité sur le bloc d'image mise en avant comme ceci :
Étape 5. Publiez votre site Web WordPress
Lorsque vous êtes prêt à mettre votre thème personnalisé en ligne, accédez à SeedProd » Thème Builder et activez le bouton « Activer le thème SeedProd » sur la position « Activé ».
Vous pouvez maintenant prévisualiser votre site Web pour voir les modifications. Comme vous pouvez le voir dans cet exemple, les images que nous avons choisies précédemment sont masquées sur mobile.
Méthode 2 : Masquer les images en vue mobile sur les pages de destination
Les mêmes étapes fonctionnent pour les pages de destination autonomes. Créez une page dans SeedProd » Pages de destination, ouvrez-la dans l'éditeur et activez 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 WordPress intégré pour ajouter du CSS personnalisé à votre site Web.
Je comprends que certains propriétaires de sites Web préfèrent personnaliser leur site manuellement. Pour cette raison, la méthode suivante vous montrera comment masquer les images sur mobile à l'aide de CSS personnalisé.
Tout d'abord, trouvez la classe de l'élément de contenu qui contient votre image. Par exemple, l'image mise en avant 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 masque l'image visuellement, mais le navigateur la télécharge toujours sur mobile. Si la vitesse de la page est l'objectif, la méthode 1 est un meilleur choix. La visibilité des appareils de SeedProd empêche complètement 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 pour l'adapter à votre thème WordPress et à votre requête média.
Dans cet exemple, nous avons masqué l'image mise en avant 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 voir, l'image disparaît automatiquement sur les écrans de plus petite taille.
Si vous utilisez l'éditeur de blocs WordPress sans SeedProd, vérifiez le panneau Avancé dans les paramètres du bloc pour un interrupteur « Masquer sur mobile ». WordPress 6.x a ajouté cette option pour la plupart des blocs principaux.
FAQ sur le masquage des images en vue mobile
J'espère que cet article vous a aidé à apprendre comment masquer les images en mode mobile sur WordPress. Vous pourriez également aimer les guides suivants :
- Comment ajouter une barre latérale différente pour différentes pages dans WordPress
- Comment ajouter du CSS personnalisé dans WordPress (adapté aux débutants)
- Comment ajouter une ombre portée dans WordPress
- Comment masquer les titres de page dans WordPress
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
