Les en-têtes collants sont un excellent moyen de garder le menu de navigation de votre site Web visible à tout moment, garantissant un accès facile aux liens et informations importants. Cependant, un en-tête statique peut devenir monotone avec le temps et vous souhaiterez peut-être changer sa couleur sur le défilement pour créer une expérience utilisateur plus dynamique et plus attrayante. Dans ce guide, nous allons vous montrer comment changer la couleur d'un en-tête collant lors du défilement dans Elementor , en suivant des étapes simples et faciles à suivre. Que vous soyez un utilisateur débutant ou expérimenté d'Elementor, vous pouvez facilement mettre en œuvre cet effet et donner à votre site Web un look frais et moderne.
Méthode de conception
Si vous ne l'avez pas déjà fait, vous devrez utiliser le générateur de thème pour créer un modèle d'en-tête personnalisé. Commencez par mettre votre logo dans un widget d'image et un widget de navigation dans une section d'en-tête à deux colonnes.
L'onglet Avancé
L'onglet Avancé dans les contrôles de section sera utilisé pour les étapes suivantes.
Paramètres de marge
La manière la plus courante de créer un en-tête transparent consiste à donner à la section une marge négative égale à sa hauteur. Déverrouillez les contrôles de marge sur l'onglet Avancé et définissez le bas sur une valeur négative (exemple:-125px). Cela déplacera la section sous l’en-tête vers le haut de la page.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer MaintenantL'indice Z
Vous devrez également augmenter le Z-index de la section pour vous assurer qu'elle soit toujours en haut du contenu. Vous pouvez saisir n'importe quel nombre supérieur au reste du contenu de votre site Web, mais de nombreux concepteurs utilisent 1 000.
Paramètres collants
Sélectionnez l’option Sticky dans l’accordéon Motion Effects et réglez-la sur Top.
Ajout d'effet
Maintenant que nous avons créé une section d'en-tête transparente de base, nous allons ajouter l'effet de défilement.
Onglet Style
L'onglet Style dans les contrôles de section sera utilisé pour les étapes suivantes.
Couleur finale
Définissez la couleur de l'arrière-plan ou du dégradé final dans le sélecteur de couleurs.
Effet de défilement
Basculez le sélecteur Effets de défilement dans le panneau de commandes.
Définir les valeurs
Nous devons maintenant ajuster les valeurs des curseurs de la fenêtre pour obtenir l'effet souhaité. Faites défiler jusqu'à l'emplacement de votre page où vous souhaitez l'opacité totale et réduisez la valeur Haut jusqu'à ce que votre en-tête soit complètement opaque (exemple : 25 %). Vous pouvez maintenant augmenter la valeur du Bottom. Dans l'exemple précédent, nous souhaitons que l'effet se produise rapidement, c'est pourquoi nous définissons des valeurs très proches les unes des autres (exemple : 22 %). Cela entraînera l’effet sur un défilement de page de 3%.
Emballer
En conclusion, changer la couleur de l’en-tête collant sur le défilement dans Elementor peut améliorer l’attrait visuel et l’expérience utilisateur de votre site Web. C'est un moyen simple et efficace de faire ressortir votre site Web et de créer une impression mémorable sur vos visiteurs. Cependant, gardez à l'esprit que vous devrez ajuster ou tenir compte des appareils mobiles et des tablettes, car le comportement de l'en-tête peut varier selon la taille de l'écran. Trouver ce point idéal nécessitera quelques tests et ajustements, mais le résultat final en vaudra la peine. Alors n’hésitez plus et essayez cette technique pour donner à votre site Web un look frais et moderne.
