bloggerselite logo

Comment créer un en-tête sticky à changement de couleur sans code 

Comment créer un en-tête sticky à changement de couleur sans code 

Dans ce nouveau tutoriel, nous allons créer un en-tête sticky ou collant dans Elementor qui changera la transparence des couleurs au fur et à mesure que les visiteurs feront défiler le site web.

Lors de la conception de notre site web, l’un des éléments les plus importants est l’en-tête – Il permet aux visiteurs de savoir où ils se trouvent via notre logo, il leur permet également de naviguer facilement sur le site web et en proposant parfois un ou plusieurs CTA tels que contacter ou même acheter un produit ou un service.

D’une manière générale, c’est une bonne pratique de garder cette barre de navigation accessible en la rendant sticky… mais cela ne signifie pas que notre en-tête doit être statique. Nous pouvons ajouter de la couleur et différents effets pour le rendre plus dynamique.

Alors allons-y et voyons comment nous pouvons le faire avec Elementor ! Mais avant de nous lancer vous pourrez voir en image ce que nous souhaitons réaliser.

créer un en-tête sticky

Comment créer un en-tête sticky à changement de couleur sans code 

Nous allons travailler sur un modèle d’en-tête et utiliser des effets de mouvement pour obtenir l’effet de changement de couleur lorsque nous feront défiler la page;

Ces deux fonctionnalités se trouvent uniquement da la version d’Elementor Pro, alors assurez-vous de l’avoir.

Maintenant, commençons par la page d’accueil, avec ce magasin de drones.

créer en-tête sticky avec Elementor

Comme vous pouvez le voir, nous avons déjà un en-tête, mais il ne colle pas vraiment lorsque je fais défiler le site Web. Nous voulons nous assurer que :

  1. L’en-tête colle en haut de notre page,
  2. Il commence avec un arrière-plan transparent et ne change de couleur que lorsque nous faisons défiler.

Déplacez-vous à travers différentes sections du site web en passant le curseur au dessus.

Ce bouton jaune indique qu’il s’agit d’un modèle en dehors de la page sur laquelle nous travaillons actuellement. Cliquez sur Modifier l’en-tête pour le faire.

Comment créer un en-tête sticky à changement de couleur sans code 

La première étape consiste à le rendre transparent. Cliquez sur le conteneur et, dans l’onglet style, choisissez une couleur d’arrière-plan transparente.

Comment créer un en-tête sticky à changement de couleur sans code 

Ensuite, dirigez-vous vers l’onglet Avancé et donnez-lui une marge négative pour faire apparaître l’en-tête sur l’image du héros. Pour vous assurer que l’en-tête soit visible au-dessus de tous les autres éléments, définissez l’index z approprié. Nous allons là fixer à 9999 juste pour être sûr.

créer en-tête sticky avec Elementor

Maintenant que nous avons terminé avec la couleur d’arrière-plan, développez la section Motion Effects et définissez le paramètre Sticky sur Top.

Comment créer un en-tête sticky à changement de couleur sans code 

Voila, si nous essayons de prévisualiser nous verrons que l’arrière plan transparent nous fera des problèmes à cause du fait que lors du défilement le logo et le menu viendront se superposer aux autres éléments de la page, masquant légèrement ces derniers.

Lire aussi : Comment utiliser le sélecteur de couleurs et le mode sombre dans Elementor

Pour résoudre ce problème nous allons donc rendre l’arrère-plan de l’entête sombre et légèrement transparent.

Comment créer un en-tête sticky à changement de couleur sans code 

Maintenant, regardons une fois de plus comment nous nous en sortons. Cela a l’air Ok.

Lire également : Elementor Free vs. Pro: Lequel choisir ?

Pour ajouter l’effet de changement de couleur, activez l’option Scrolling Effects et choisissez Transparency. Définissez-le sur Fade In et définissez les niveaux appropriés. Comme nous voulons que le changement de couleur se produise très tôt sur le défilement de la page, nous devons le définir sur un faible pourcentage et rendre les points de départ et d’arrivée de l’effet très proches les uns des autres.

créer en-tête sticky avec Elementor

Une fois cette étape terminée, fermez la fenêtre de transparence et définissez les effets par rapport à la page entière.

Comment créer un en-tête sticky à changement de couleur sans code 

Mettons à jour la page pour enregistrer les modifications que nous avons apportées. Il est temps de masquer le panneau de l’éditeur et de voir en action ce que nous venons de réaliser.

créer en-tête sticky avec Elementor

Voila nous venons de créer un en-tête collant à changement de couleur sans code.

Autres Ressources :

FAQ

Qu’est-ce qu’un en-tête sticky ?

Un en-tête sticky reste fixé en haut de la page lorsque l’utilisateur fait défiler le contenu vers le bas.

Pourquoi utiliser un en-tête sticky sur un site web ?

Il améliore l’expérience utilisateur en offrant une navigation constante et accessible à tout moment.

Comment créer un en-tête sticky avec Elementor ?

Utilisez l’option de positionnement fixe dans les réglages avancés de votre section d’en-tête.

Peut-on changer la couleur d’un en-tête sticky sans code ?

Oui, en configurant les styles de votre en-tête sticky dans les paramètres de design de votre thème ou d’Elementor.

Quelles sont les bonnes pratiques pour concevoir un en-tête sticky efficace ?

Assurez-vous qu’il reste discret mais visible, avec des options de navigation claires et accessibles.

Est-ce que tous les thèmes WordPress supportent les en-têtes sticky ?

Non, certains thèmes nécessitent des ajustements ou des plugins supplémentaires pour activer cette fonctionnalité.

Conclusion

Nous avons commencé avec un en-tête transparent qui passe à une couleur plus unie au fur et à mesure que nous faisons défiler et reste en haut de la page tout le temps.

J’espère que vous avez trouvé ce tutoriel utile. Si vous l’avez réalisé, assurez-vous de nous laisser un commentaire pour nous faire savoir quel type de contenu nous devrions continuer à créer pour vous.

Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x