Tutoriel Logo Joomla Joomla

Comment masquer un module sur smartphone

Devant l'expansion de la navigation en mobilité, il peut être interessant de choisir de ne pas afficher certains modules sur smartphone afin de laisser l'utilisateur se concentrer sur l'essentiel du contenu disponible sur son écran. Nous allons voir au travers de ce tutoriel comment masquer un module sur smartphone dans Joomla.

Table des matières
- Les classes CSS
- Masquer le module

Les classes CSS

Très probablement, vous considérerez que certains modules affichés sur votre site sont de moindre importance. Aussi, il peut être judicieux d'éviter aux utilisateurs d'avoir à faire défiler de longues pages de contenu avant d'atteindre la zone qu'ils recherchent.
A défaut, vous pouvez décider d'afficher un module différent dont le contenu sera plus approprié pour les écrans de plus petites dimensions. Grâce à Bootstrap, ce type de manipulation est maintenant très simple à réaliser puisque Bootstrap inclut certaines classes CSS qui répondent spécifiquement à ce type de besoin.

Les classes CSS de Bootstrap dont nous avons besoin sont les suivantes :

Smartphones (> 768px) :

hidden-phone

Tablettes (≥ 768px) :

hidden-tablet

Ecrans de bureau (≥ 992px) :

hidden-desktop

Ainsi, vous avez la possibilité de masquer l'affichage d'un module sur smartphone mais de le faire apparaitre sur tablettes, par exemple.


Masquer le module

Dans le footer de notre site de démo, nous avons affiché 3 modules : Nos coordonnées, les Tags populaires ainsi qu'un module d'information saisonnière. Ces deux derniers modules n'ont pas d'intérêt sur mobile, nous décidons les masquer.

Masquer des modules sur smartphones

Depuis le panneau d'administration, ouvrez Extensions - Modules.

Masquer des modules sur smartphone

Dans la liste des modules publiés sur votre site, repérez le module à masquer sur mobile (vous pouvez vous aider des filtres du menu latéral en sélectionnant sa position dans le template, par exemple).

Masquer des modules sur smartphone

Ouvrez le module de votre choix en cliquant sur son titre. Cliquez ensuite sur l'onglet Paramètres avancés.

Masquer des modules sur smartphone

Dans la zone Suffixe de classe CSS vous allez indiquer la classe CSS de votre choix sans oublier d'ajouter un espace devant le nom de la classe :

Masquer un module sur smartphone

Cliquez ensuite sur Enregistrer et fermer pour valider votre saisie.

Maintenant, redimensionnez la fenêtre de votre navigateur ou affichez le site sur votre smartphone pour constater que le module ne s'affiche plus.

Masquer un module sur smartphone


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.