Comment désactiver une section sur mobile uniquement ?

Points clés
• Masquer une section sur mobile est possible via le Designer
• L’opération n’affecte pas l’affichage desktop ou tablette
• Idéal pour alléger les pages et améliorer la lisibilité mobile
• Une vérification responsive est indispensable après modification

Certaines sections fonctionnent parfaitement sur ordinateur mais deviennent trop lourdes, illisibles ou inutiles sur mobile : carrousel complexe, grande image, animation riche, bannière trop haute… Bonne nouvelle : vous pouvez désactiver une section uniquement sur mobile sans toucher aux versions desktop ou tablette de votre site hôtelier.

Voici comment procéder efficacement.

Désactiver une section sur mobile via le Designer (méthode recommandée)

Pour masquer une section uniquement sur mobile, le Designer offre un contrôle total.

Procédure :

Ouvrez le Designer.
Sélectionnez la section que vous souhaitez masquer.
En haut de l’interface, passez en mode Mobile Portrait ou Mobile Landscape.
Dans le panneau de droite, repérez les icônes d’affichage (œil, visible/invisible).
Cliquez sur l’icône pour désactiver la section sur mobile uniquement.
La section devient invisible uniquement pour ce breakpoint.
Publiez.

💡 À noter : la section reste visible dans le Designer, grisées sur les breakpoints où elle est désactivée, ce qui permet de la réactiver à tout moment.

Vérifier que la bonne section est sélectionnée

Il arrive qu’un mauvais élément soit masqué (ex : un conteneur interne plutôt que la section entière).
Assurez-vous que :
• Vous sélectionnez la section complète, pas seulement un bloc interne
• L’icône de visibilité s’applique bien à tout l’élément
• Le breakpoint affiché est bien celui du mobile

Astuce
Sélectionnez la section dans la Navigator View pour éviter les erreurs.

Quand utiliser cette option ?

Désactiver une section uniquement sur mobile est utile lorsque :
• L’image ou le carrousel casse la mise en page
• L’animation ralentit le défilement
• Le texte est trop long ou trop serré
• Une section n’a pas d’intérêt sur mobile (ex : large galerie, plan détaillé, tableau complexe)
• Vous souhaitez alléger la page pour améliorer la vitesse

Alternatives possibles

Selon vos besoins, vous pouvez aussi :
• Créer une version spécifique mobile
• Remplacer une image lourde par une version mobile optimisée
• Réduire le contenu au lieu de le masquer complètement
• Masquer uniquement une partie du contenu (ex : image mais garder le texte)

Cela permet de conserver l’information tout en optimisant l’expérience mobile.

Attention aux espaces vides et au responsive

Après avoir désactivé une section sur mobile :
• Vérifiez qu’aucun espace vide ne persiste
• Ajustez les marges et paddings si nécessaire
• Vérifiez le rendu sur plusieurs appareils (iPhone, Android)
• Confirmez que la continuité du contenu reste logique

💡 Une section masquée peut modifier l’équilibre visuel de la page : testez toujours la version scrolée de la page.

Bonnes pratiques pour un site hôtelier

Pour garantir une expérience optimale :
• Conservez un design mobile-first
• Privilégiez des sections légères en haut de page
• Évitez les carrousels complexes sur smartphone
• Assurez-vous que les CTA restent accessibles
• Testez toujours la lisibilité du texte sur petit écran

Conclusion

Oui, vous pouvez désactiver une section uniquement sur mobile en quelques clics via le Designer. Cette méthode permet d’alléger la version mobile, d’améliorer la lisibilité et de garantir une expérience confortable pour les visiteurs de votre site hôtelier. En testant soigneusement le rendu après modification, vous assurez une navigation fluide et cohérente.