Créer un en-tête fixe (sticky) avec Elementor

Sur beaucoup de sites, quand on fait défiler une longue page, le menu disparaît en haut. Pour changer de page ou prendre contact, le visiteur doit remonter tout en haut. Un en-tête fixe (on dit aussi « sticky », collant en anglais) règle ce problème : il reste collé en haut de l’écran pendant tout le défilement. Le menu et votre bouton « Demander un devis » restent toujours à portée de clic.

Avant de commencer

• Elementor Pro est nécessaire (réglage Sticky et constructeur de thème).
• Votre en-tête doit être créé avec le constructeur de thème d’Elementor. Si ce n’est pas encore fait, suivez d’abord créer un en-tête avec le constructeur de thème.
• Repérez si votre site utilise l’éditeur v3 (conteneurs classiques, onglet Advanced) ou v4 (éditeur atomique) : la méthode diffère un peu. En cas de doute, voir Elementor v4, ce qui change.

Ouvrir le modèle d’en-tête

1. Dans l’administration WordPress, ouvrez Elementor › Constructeur de thème.
2. Dans la colonne de gauche, cliquez sur Header.
3. Sur votre en-tête, cliquez sur Edit : l’éditeur Elementor s’ouvre sur le modèle.
4. Cliquez sur la poignée du conteneur principal de l’en-tête (le petit onglet qui apparaît au survol, en haut du bloc) pour le sélectionner entièrement. Rendre fixe un seul widget (le logo seul, par exemple) n’aurait pas de sens.

Méthode 1 : avec les conteneurs classiques (Elementor v3)

1. Le conteneur étant sélectionné, ouvrez l’onglet Advanced du panneau de gauche.
2. Dépliez la section Motion Effects.
3. Dans la liste Sticky, choisissez Top (collé en haut de l’écran). Bottom le collerait en bas, ce qui sert plutôt à une barre d’appel à l’action. None désactive l’effet.
4. Dans Sticky On, choisissez les appareils concernés : Desktop (ordinateur), Tablet Portrait (tablette), Mobile Portrait (téléphone).
5. Laissez Offset à 0 : c’est la distance entre l’en-tête et le haut de l’écran une fois collé.
6. Effects Offset : le nombre de pixels à faire défiler avant que les changements de style (couleur, hauteur…) se déclenchent. Il ne sert que si vous ajoutez ces changements (voir plus bas).
7. Cliquez sur Publish (ou Update).

Ouvrez votre site dans un nouvel onglet et faites défiler une page : l’en-tête reste en place.

Méthode 2 : avec Elementor v4 (éditeur atomique)

En v4, le comportement sticky passe par les réglages de position, comme en CSS :

1. Sélectionnez le conteneur de l’en-tête.
2. Ouvrez l’onglet Style et dépliez la section Position.
3. Dans Position, choisissez Sticky.
4. Dans Top, indiquez 0 pour coller l’en-tête au bord haut de l’écran.
5. Augmentez le Z-index (par exemple 100) : c’est l’ordre d’empilement. Plus il est élevé, plus l’élément passe au-dessus des autres. Sans cela, des images ou des carrousels pourraient glisser par-dessus votre menu.
6. Publiez.

Bonus : un en-tête transparent qui se colore au défilement

C’est l’effet qu’on voit sur beaucoup de sites modernes : en haut de la page, l’en-tête est transparent et laisse voir la grande image d’accueil ; dès qu’on descend, il prend une couleur de fond pour rester lisible. Voici la méthode proposée par Elementor (conteneurs classiques) :

1. Sélectionnez le conteneur de l’en-tête, onglet Advanced › Layout.
2. Mettez une marge basse négative égale à la hauteur de votre en-tête, par exemple -100 px pour un en-tête de 100 px de haut. Résultat : la section suivante (votre image d’accueil) remonte et passe sous l’en-tête.
3. Mettez un Z-index élevé, par exemple 1000, pour que l’en-tête reste au-dessus de tout.
4. Dans Motion Effects, réglez Sticky sur Top pour les trois appareils.
5. Onglet Style › Background : choisissez la couleur de fond finale, celle que vous voulez une fois la page défilée (blanc, par exemple).
6. De retour dans Motion Effects, activez Scrolling Effects, puis cliquez sur le crayon de Transparency.
7. Réglez le Viewport avec des valeurs Top et Bottom proches (par exemple 25 % et 22 %) : le fond passera du transparent à l’opaque sur une toute petite portion de défilement, donc rapidement.
8. Publiez et testez.

Seul le fond change d’opacité : votre logo et votre menu restent visibles en permanence. Pensez à choisir une couleur de texte du menu lisible à la fois sur votre image et sur le fond final.

Exemple : le site d’un artisan

Un plombier a une page « Services » très longue, avec une dizaine de prestations. Avec un en-tête fixe qui contient son logo, trois liens et un bouton « Appeler » bien visible, le visiteur peut l’appeler à n’importe quel moment de sa lecture, sans remonter. Sur mobile, on garde l’en-tête fixe mais plus fin (logo plus petit, menu en icône), pour ne pas manger l’écran.

Les erreurs fréquentes

• Un en-tête trop haut : 120 px collés en haut d’un téléphone, c’est un quart de l’écran perdu. Réduisez la hauteur sur mobile, ou désactivez le sticky sur mobile (Sticky On).
• Le contenu passe par-dessus le menu : augmentez le Z-index de l’en-tête.
• Les liens d’ancre arrivent sous l’en-tête : un lien « Voir nos tarifs » qui fait descendre à une section peut s’arrêter avec le titre caché derrière l’en-tête. Ajoutez un peu d’espace en haut des sections ciblées.
• La première section est cachée par l’en-tête transparent : c’est normal avec la marge négative, ajoutez un espace intérieur (padding) en haut de cette section.
• Rien ne se passe : vérifiez que vous avez bien sélectionné le conteneur principal (pas un widget), que l’appareil de test est coché dans Sticky On, et videz le cache de votre site.

Questions fréquentes

Puis-je rendre fixe autre chose que l’en-tête ?

Oui : n’importe quel conteneur ou widget peut être sticky. Par exemple une colonne de sommaire à côté d’un long article, ou un bouton de réservation dans une barre latérale. L’option Stay In Column permet alors à l’élément de rester dans sa colonne au lieu de suivre tout l’écran.

Un en-tête fixe ralentit-il le site ?

Non, l’effet est très léger. Ce sont surtout les grosses images et les animations en excès qui ralentissent une page.

Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.