Créer son site web est une chose, mais offrir une expérience utilisateur interactive en est une autre. Dans cet article, je te montre comment mettre en place un menu dynamique qui change de couleur dès que tu fais défiler ta page. C’est une technique très appréciée sur les sites professionnels, et bonne nouvelle : tu peux le réaliser sans Elementor Pro ! Même avec la version gratuite, c’est simple à mettre en place.
Mettre en place ton environnement avec Elementor
Avant tout, vérifie bien que tu as installé Elementor sur ton site WordPress. Pour ce tuto, la version gratuite suffit largement. Active Elementor, puis rends-toi directement dans la section « Modèles » et clique sur « Constructeur de thème ».
Là, tu vas pouvoir créer ton en-tête. Clique simplement sur « Ajouter nouveau » et sélectionne une base vierge. Crée ensuite une section divisée en trois colonnes. Chaque colonne aura sa propre utilité : une pour ton logo, une pour ton menu principal, et une autre pour ton bouton d’action, comme « Nous contacter » ou « Demander un devis ».
Structurer efficacement ton header
Dans ta première colonne, place ton logo avec le widget « Image ». Ajuste bien sa taille et joue sur les marges pour avoir un rendu visuel équilibré. Ajouter une légère ombre peut améliorer encore le rendu visuel.
Dans la deuxième colonne, intègre le widget « Menu de navigation ». Ici, personnalise les couleurs du texte, la police, et les styles pour les différents états (actif, survol). Cela rend ton menu plus attrayant et facile à utiliser.
Enfin, dans la troisième colonne, utilise le widget « Bouton ». Il s’agira de ton principal appel à l’action. Choisis une couleur vive qui contraste avec le reste du menu pour attirer l’attention de tes visiteurs.
Créer deux headers distincts
L’astuce consiste à avoir deux menus : un menu initial visible dès l’ouverture du site et un second qui apparaît lorsque l’utilisateur scrolle.
Pour cela, termine ton premier header, puis duplique-le. Change la couleur du fond et du texte pour créer un contraste clair. Par exemple, un fond transparent pour le haut de page et un fond blanc avec du texte plus sombre lorsque l’utilisateur descend dans la page.
Si tu préfères voir comment faire concrètement, consulte cette vidéo YouTube qui explique l’installation d’un menu dynamique sur Elementor : https://youtu.be/Q7sjOO5hTww
Intégrer le code HTML et CSS facilement
Dans ton deuxième header, ajoute un widget HTML directement sous ton logo. Copie-colle le code suivant :
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
let menuDynamic = document.getElementById('menuDynamic');
if (scrollPosition > 150) {
menuDynamic.classList.add('visibleHeader');
} else {
menuDynamic.classList.remove('visibleHeader');
}
});
});
</script>
<style>
.elementor-nav-menu__container {
top: 0px !important;
}
#menuDynamic.visibleHeader {
transform: translateY(0);
}
#menuDynamic {
position: fixed;
top: 0;
width: 100%;
transition: transform 0.3s ease;
transform: translateY(-200px);
}
</style>Ce petit bout de code fait apparaître automatiquement le second menu dès que l’utilisateur fait défiler la page vers le bas.
Attribuer l’ID CSS à ton second menu
Pour que le script fonctionne correctement, tu dois attribuer l’ID « menuDynamic » à ton second header. Clique sur la section de ton menu, va dans l’onglet « Avancé », puis saisis cet ID dans le champ prévu à cet effet.
Augmente également le z-index à une valeur élevée (par exemple 100), cela garantit que ton menu restera toujours au-dessus du reste du contenu quand il apparaît.
Vérifier le fonctionnement de ton menu
Publie tes deux headers et teste immédiatement sur ton site. Lorsque tu scrolles, ton second menu doit apparaître de manière fluide.
Si ça ne fonctionne pas immédiatement, vérifie
● Que l’ID CSS est bien correct (« menuDynamic »).
● Que ton script est chargé sans conflits avec d’autres plugins.
● Teste aussi en navigation privée ou vide le cache de ton navigateur.
Si tout est correct, l’effet dynamique devrait être parfaitement fonctionnel.
Petit récapitulatif rapide
● Installer Elementor (version gratuite).
● Créer deux headers distincts.
● Personnaliser les couleurs et styles.
● Intégrer le code HTML/CSS fourni.
● Ajouter l’ID CSS « menuDynamic ».
● Publier et vérifier sur ton site.
Pour en savoir plus, rendez-vous sur Web armor
