Header Wix Studio : créer un en-tête clair et responsive 🧭

Le header (en-tête) est la bande en haut de votre site : logo, menu, bouton d'action. C'est la première chose que voit un visiteur, et l'outil qu'il utilise pour naviguer. Sur Wix Studio, c'est une section globale, présente sur toutes les pages.

En bref : modifiez le header une fois, il change partout. Choisissez son comportement au défilement dans l'Inspecteur (il défile, reste figé, disparaît ou s'efface), passez le menu en hamburger sur mobile, et réglez des breakpoints propres au header si le menu déborde.

Que mettre dans le header d'un site ?

• le logo, cliquable vers l'accueil ;

• le menu principal, avec peu d'entrées ;

• un bouton d'action visible : prendre rendez-vous, demander un devis, voir la boutique ;

• selon le site : panier, espace membre, sélecteur de langue ou barre de recherche.

Moins il y a d'éléments, plus le header est lisible, surtout sur mobile. Pour un gros site avec beaucoup de pages, un mega menu organise la navigation sans surcharger la barre.

Les effets de défilement du header

Dans l'Inspecteur, les réglages du header proposent un menu déroulant avec 4 comportements au défilement :

Avec les effets figé, disparition et fondu, vous pouvez choisir si le header recouvre la section suivante : idéal pour un header transparent posé sur une section hero. Une option permet aussi de changer la couleur du header pendant le défilement, pour garder le menu lisible.

Un header responsive : menu hamburger et breakpoints

Sur Wix Studio, la disposition du menu se règle par breakpoint : horizontale, verticale ou hamburger. En général, on garde le menu horizontal sur ordinateur et on passe en hamburger sur tablette et mobile.

Le piège classique : un menu qui déborde sur les petits ordinateurs, avant même la bascule en tablette. Deux solutions :

• régler le débordement du menu horizontal : retour à la ligne ou défilement des entrées ;

• personnaliser les breakpoints du header. Comme c'est une section globale, ses breakpoints sont indépendants de ceux des pages : vous pouvez le faire passer en version tablette dès 1 100 px, sans toucher au reste du site.

Header et SEO

Le logo du header n'a pas besoin d'être un titre H1 : gardez le H1 pour le titre principal de chaque page (voir les balises Hn). Les liens du menu, eux, aident Google à comprendre la structure du site : donnez à vos pages des noms clairs, qui décrivent leur contenu.

Mon avis de webdesigner sur le header

Un bon header se fait oublier : on trouve tout de suite le menu et le bouton de contact, sans chercher. Mon conseil : un bouton d'action bien contrasté, visible aussi sur mobile à côté de l'icône hamburger. C'est souvent plus utile qu'un menu très complet, car le visiteur pressé n'ouvre pas toujours le menu.

Et testez toujours votre header en étirant le canevas entre la version ordinateur et la version tablette : c'est là que les menus se chevauchent. Si vous voulez un site dont la navigation est pensée pour convertir, voyez mon offre de création de site vitrine.

Questions fréquentes sur le header Wix Studio

Peut-on avoir un header différent sur certaines pages ?

Oui, en créant une autre section globale de type header et en l'ajoutant aux pages voulues. Gardez tout de même une navigation cohérente d'une page à l'autre.

Comment faire un header transparent sur Wix Studio ?

Rendez le fond du header transparent, choisissez un effet de défilement (figé, disparition ou fondu) avec recouvrement de la section suivante, puis ajoutez une couleur au défilement pour que le menu reste lisible une fois la page descendue.

Le menu peut-il être différent sur mobile ?

Oui, sa disposition se règle par breakpoint : horizontal sur ordinateur, hamburger sur mobile, par exemple. Les entrées du menu, elles, restent les mêmes.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : effets de défilement du header, Wix : mise en page des menus.