Un menu hors champ (off-canvas) est un menu masqué qui s’affiche après une action de l’utilisateur, généralement via une icône (menu mobile ou bouton).
Domaine E5B : Navigation. Les libellés et emplacements peuvent légèrement varier selon la version de WordPress installée ; les versions retenues pour l’examen sont précisées par les documents de chaque session.
Accès dans WordPress
WordPress → Apparence → Personnaliser → En-tête (Header Builder)
Étapes à suivre
- Depuis le tableau de bord WordPress, cliquer sur Apparence, puis sur Personnaliser.
- Cliquer sur En-tête ou Header Builder selon la version du thème Astra.
- Repérer la zone dédiée au menu hors champ / off-canvas dans le Header Builder.
- Faire glisser l’élément Menu hors champ ou Off-Canvas Menu dans l’en-tête si nécessaire.
- Cliquer sur l’élément pour accéder à ses réglages.
- Sélectionner le menu à afficher dans le menu hors champ.
- Vérifier le déclencheur du menu (icône hamburger ou bouton).
- Ajuster l’affichage si nécessaire (position, largeur).
- Vérifier le rendu dans l’aperçu du site.
- Cliquer sur Publier pour enregistrer les modifications.
Points d’attention
- Le menu hors champ doit être relié à un menu existant.
- Vérifier que le menu s’ouvre correctement sur le site.
- Tester l’affichage sur mobile si demandé.
- Ne pas oublier de publier les modifications.
Exercice d’entraînement
Cas fictif Jump4Fun, conçu par Instansia pour s’entraîner (ce n’est pas une annale).
Configurez le menu mobile pour qu’il s’ouvre en panneau latéral (hors champ) plutôt qu’en liste déroulante.
Résultat attendu : Sur mobile, un clic sur l’icône menu ouvre un panneau latéral contenant le menu principal.
Comment vérifier votre travail
- Enregistrer ou publier la modification (« Publier », « Mettre à jour » ou « Enregistrer »).
- Ouvrir le site public dans un nouvel onglet et actualiser la page.
- Contrôler aussi l’affichage sur mobile.
Dans quel cas l’utiliser en relation client ?
Un menu hors champ s’ouvre en glissant depuis le côté de l’écran quand on touche l’icône du menu. Sur mobile, il libère de la place et rend la navigation plus confortable.
À l’E5B, la consigne peut demander de modifier le comportement du menu mobile.
Questions fréquentes
Où se règle le menu hors champ avec Astra ?
Dans le constructeur d’en-tête de l’outil de personnalisation, en vue mobile, dans les réglages du bouton de menu.
Le menu hors champ remplace-t-il le menu principal ?
Non, il affiche généralement le même menu sous une autre forme.
Comment le tester ?
Passez en vue mobile dans l’outil de personnalisation, puis vérifiez sur le site en réduisant la fenêtre.
À lire aussi
- Créer ou modifier les menus et sous-menus
- Modifier l’emplacement du menu principal
- Ajouter un élément à un menu (catégorie, page, lien personnalisé)
- Tous les tutoriels WordPress
- La liste complète des fonctionnalités E5B WordPress et PrestaShop
Enseignant ou formateur ? Instansia déploie pour chaque étudiant un WordPress et un PrestaShop prêts pour s’entraîner à l’épreuve E5B, avec un suivi centralisé. Réserver une démo.