Accueil Formations Maîtriser WordPress 7- Créer son portfolio en ligne de A à Z

Gérer le responsive design avec WordPress 7 et Gutenberg

Retour à la formation
Chapitre 5 Leçon 4
Précédent
Suivant

Apprenez à utiliser les outils de responsive design de WordPress 7 dans Gutenberg pour masquer des blocs sur mobile et adapter les styles des éléments selon la taille d’écran, sans recourir au CSS.

Détails de la leçon

Description de la leçon

Cette leçon présente deux nouveautés de WordPress 7 destinées à faciliter la conception de pages adaptées aux différents écrans. Jusqu’alors, l’affichage responsive reposait surtout sur le thème ou sur l’ajout de règles CSS personnalisées. Gutenberg propose désormais des réglages accessibles directement depuis l’éditeur.

La première démonstration montre comment masquer un bloc selon le type d’appareil. À partir d’un paragraphe placé entre deux titres, l’utilisateur ouvre le menu du bloc, choisit l’option de masquage et sélectionne l’affichage mobile. Après l’enregistrement, l’aperçu de la page et les outils de développement du navigateur permettent de vérifier que le paragraphe reste visible sur grand écran, mais disparaît sur mobile. Le réglage peut ensuite être annulé pour rétablir son affichage.

La seconde nouveauté concerne les styles responsifs. Il est possible de sélectionner un titre, de choisir le contexte mobile depuis l’icône d’appareil, puis de modifier ses propriétés, par exemple sa taille et sa couleur. Ces changements s’appliquent à l’affichage mobile sans modifier les réglages définis pour ordinateur. L’aperçu en front office permet de contrôler le résultat, tandis que les styles globaux continuent de servir de référence pour les autres contextes.

La leçon évoque enfin la personnalisation des états interactifs, notamment le survol des boutons et l’état de focus, important pour l’accessibilité. Ces fonctions offrent davantage de contrôle visuel dans Gutenberg et permettent de réaliser des adaptations ciblées sans écrire de CSS pour chaque cas.

Objectifs de cette leçon

À l’issue de cette leçon, l’apprenant pourra :

  • masquer un bloc sur une catégorie d’appareils, notamment sur mobile ;
  • modifier les styles d’un élément pour un contexte d’affichage précis ;
  • vérifier les adaptations avec l’aperçu et les outils de développement du navigateur ;
  • comprendre le rôle des états de survol et de focus dans la personnalisation et l’accessibilité.

Prérequis pour cette leçon

Il est utile de connaître les bases de l’édition d’une page dans WordPress et de savoir sélectionner et modifier des blocs dans Gutenberg. Un navigateur web est nécessaire pour consulter le site et, si besoin, utiliser son mode d’émulation des appareils. Aucune connaissance en CSS n’est requise pour suivre les manipulations présentées.

Métiers concernés

Ces compétences sont utiles aux intégrateurs web, concepteurs de sites WordPress, développeurs front-end, webdesigners, gestionnaires de contenu et responsables de communication numérique. Elles facilitent la création de pages lisibles sur mobile et l’adaptation de l’expérience utilisateur aux différents appareils, sans devoir systématiquement produire des règles CSS spécifiques.

Alternatives et ressources

Pour adapter l’affichage, il est également possible d’utiliser les options responsive intégrées au thème WordPress, un constructeur de pages tel qu’Elementor ou des règles CSS personnalisées. Les outils de développement des navigateurs, comme ceux de Chrome, Firefox ou Edge, permettent de simuler différentes tailles d’écran et de contrôler le rendu. Ces solutions peuvent compléter les réglages de Gutenberg lorsque des besoins plus avancés ne sont pas couverts par l’éditeur.

Questions & Réponses

Sélectionnez le paragraphe, ouvrez le menu du bloc, puis choisissez l’option de masquage et indiquez que le bloc doit être masqué sur mobile. Enregistrez la page. Le paragraphe reste alors visible dans les autres contextes d’affichage, selon le réglage choisi.
Sélectionnez le titre, ouvrez le sélecteur de contexte d’appareil dans la barre de l’éditeur et choisissez l’affichage mobile. Modifiez ensuite les propriétés souhaitées, comme la taille ou la couleur du texte, puis enregistrez. Les réglages définis pour ordinateur ne sont pas remplacés par ces adaptations propres au mobile.
Après avoir enregistré les changements, consultez la page en front office. Vous pouvez utiliser les outils de développement du navigateur et leur mode d’émulation d’appareils pour simuler un écran mobile ou une autre taille. Cela permet de contrôler la visibilité des blocs et l’apparence des éléments dans chaque contexte.