Modifier la version mobile

Les sites WordPress utilisent un design adaptatif. Il n’y a pas de version mobile distincte à modifier. Dans ce guide, vous apprendrez à personnaliser l’apparence de votre contenu sur les appareils mobiles à l’aide des réglages de bloc et des CSS.

Le bloc Navigation comprend les réglages du bouton de menu mobile (connu sous le nom d’icône « hamburger »). Pour personnaliser votre menu sur mobile :

1. Accédez à Apparence → Éditeur depuis le tableau de bord de votre site.
2. Sélectionnez le modèle ou l’élément de modèle qui contient votre menu de navigation.
3. Ouvrez la vue en liste et sélectionnez le bloc Navigation.
4. Dans la colonne latérale des réglages du bloc, cliquez sur l’icône des réglages (icône en forme de roue dentée).

5. Dans la section Affichage :
   • Activez ou désactivez « Afficher le bouton icône » pour utiliser une icône de hamburger ou afficher le texte « Menu ».
   • Choisissez le style de l’icône (deux ou trois lignes) et sélectionnez quand l’icône représentant un hamburger apparaîtra en utilisant les réglages du menu de superposition.

En savoir plus sur la modification des styles des menus de votre site.

Certains blocs de mise en page vous permettent de contrôler si le contenu s’empile verticalement sur les écrans mobiles. Par défaut, WordPress empile automatiquement le contenu côte à côte sur des écrans plus petits pour le garder lisible.

Pour ajuster le comportement d’empilage, procédez comme suit :

1. Accédez à Apparence → Éditeur depuis le tableau de bord de votre site.
2. Modifiez la page ou le modèle contenant le bloc à ajuster.
3. Ouvrez la vue en liste et sélectionnez le bloc.
4. Dans les réglages du bloc, activez ou désactivez « Empiler sur mobile ».

Blocs avec le réglage « Empiler sur mobile » :

• Colonnes
• Média & texte
• Dernières publications Instagram

Les boutons et les menus sont plus lisibles sur mobile lorsqu’ils sont renvoyés à la ligne multiple au lieu de forcer l’ensemble du contenu sur une seule ligne. Par défaut, le réglage d’habillage de plusieurs lignes est désactivé.

Pour activer l’habillage, procédez comme suit :

1. Accédez à Apparence → Éditeur depuis le tableau de bord de votre site.
2. Modifiez la page ou le modèle contenant le bloc à ajuster.
3. Ouvrez la vue en liste et sélectionnez le bloc.
4. Dans les réglages du bloc, activez l’option « Autoriser l’habillage sur plusieurs lignes ».

Blocs avec le réglage « Autoriser l’habillage sur plusieurs lignes » :

• Boutons
• Boutons de partage
• Navigation
• Icônes de réseaux sociaux
• Commentaires
• Ligne et Empilement

Le texte en pixels (px) reste verrouillé sur une taille définie. La taille du texte en em ou rem s’ajuste en fonction des réglages de votre visiteur et de la taille de l’écran, ce qui rend votre site plus accessible et plus facile à lire sur différents appareils.

Pour remplacer le texte des pixels par des unités relatives, procédez comme suit :

1. Cliquez sur l’image à redimensionner.
2. Dans les réglages du bloc, trouvez la section Typographie.
3. Sous Taille de police, cliquez sur l’icône Taille personnalisée (deux lignes horizontales avec des points).
4. Cliquez sur l’unité px pour la remplacer par em ou rem.
5. Saisissez une valeur numérique et ajustez-la si nécessaire.

Choisir entre em et rem :

• em — Le texte s’adapte à son conteneur (idéal pour les légendes, les étiquettes ou le texte dans des blocs spécifiques)
• rem — Le texte reste cohérent sur l’ensemble de votre site (idéal pour le corps du texte, les titres et les boutons)

Vous pouvez également personnaliser la taille de police à l’échelle du site au lieu d’ajuster des blocs individuels.

Cette section du guide s’applique aux sites utilisant nos plans WordPress.com Premium, Business et Commerce. Les sites gratuits et les sites utilisant le plan Personnel doivent mettre à niveau leur plan pour avoir accès à cette fonctionnalité.

Vous pouvez masquer des blocs spécifiques sur des appareils de bureau ou mobiles à l’aide de classes CSS. Pour les configurer, procédez comme suit :

1. Modifiez la page, l’article ou le modèle contenant le bloc à masquer.
2. Sélectionnez le bloc en cliquant dessus ou en le sélectionnant dans la vue en liste.
3. Dans les réglages du bloc, cliquez sur Avancé.
4. Dans la zone « Classe(s) CSS supplémentaire(s) », entrez hide-desktop ou hide-mobile :

5. Accédez aux réglages CSS personnalisés de votre site :
   • Thèmes de bloc : Apparence → Éditeur → Styles → ⋮ → CSS supplémentaires
   • Thèmes classiques : Apparence → Personnaliser → CSS supplémentaires
6. Collez le code suivant et cliquez sur Enregistrer :

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Ajoutez le code CSS à votre site. Après cela, vous pouvez ajouter la classe hide-mobile ou hide-desktop à n’importe quel bloc, et le CSS le masquera automatiquement sur l’appareil spécifié.