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
- Méthode 2 : Masquer les images en mode mobile sur les pages d'atterrissage
- Méthode 3 : Masquer une image sur mobile avec CSS
- FAQ sur le masquage des images dans la vue mobile
Méthode 1 : Masquer l'image dans l'affichage mobile du site web
Pour la première méthode, nous utiliserons un puissant plugin WordPress pour masquer les images dans la vue mobile.
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.
Étape 3. Personnalisez la conception de votre site web
Vous verrez l'éditeur visuel de pages de SeedProd lorsque vous ouvrirez un modèle de thème. Il comporte des blocs et des sections sur la gauche pour ajouter du contenu personnalisé et un aperçu en direct sur la droite.
Vous pouvez cliquer sur n'importe quel élément pour afficher ses paramètres et modifier la conception et la mise en page. Par exemple, l'élément "titre" vous permet de modifier le contenu, l'alignement, le niveau du titre, etc.
Il est également facile d'ajouter de nouveaux éléments à votre conception. Il vous suffit de faire glisser un bloc depuis la gauche et de le déposer sur votre aperçu en direct.
Nous avons utilisé le bloc "Compte à rebours" dans cet exemple. Les comptes à rebours sont un excellent moyen d'ajouter de l'urgence à votre site et d'encourager les visiteurs à agir avant de manquer leur coup.
Comme tous les blocs SeedProd, vous pouvez cliquer dessus pour :
- Modifier le type de minuterie
- Ajuster l'alignement de la minuterie
- Ajouter un message personnalisé
- Rediriger les utilisateurs à la fin du délai
- Modifier la taille de la minuterie
Vous pouvez également cliquer sur l'onglet "Modèles" pour choisir rapidement un autre style.
É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
Vous n'avez pas besoin de reconstruire votre thème pour cacher les images sur mobile. Avec le constructeur de pages d'atterrissage de SeedProd, vous pouvez appliquer les mêmes paramètres de visibilité des appareils à n'importe quelle page autonome.
C'est parfait pour les entonnoirs de vente, les inscriptions à des webinaires ou les pages de promotion pour lesquelles vous souhaitez un affichage mobile propre sans toucher à l'ensemble de la conception de votre site.
Il suffit de créer une nouvelle page d'atterrissage dans SeedProd " Landing Pages, de choisir un modèle et de l'ouvrir dans l'éditeur visuel.
Ensuite, sélectionnez l'image que vous souhaitez masquer, allez dans Avancé → Visibilité de l'appareil, et cochez la case Masquer sur mobile.
Prévisualisez sur votre téléphone, publiez la page, et le tour est joué.
Méthode 3 : Masquer une image sur mobile avec CSS
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é.
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.
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;
}
}
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.
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.
