Créer un header collant facilement avec Elementor

Vous souhaitez créer un header collant créatif à votre site ?
Certes, il existe de nombreux plug-ins plus ou moins performants pour ça.
Mais aujourd’hui je vous propose une solution sans plug-in supplémentaire, et qui fonctionne à tous les coups.
Suivez le guide !

Prérequis obligatoire :

Première étape :

  • Tout d’abord vous devez créer votre en-tête avec Elementor, vous avez plein de modèles à importer gratuitement avec Elementor pro si vous le souhaitez.
  • Pensez bien à enlever tout effet de mouvement collant de votre en-tête.

Maintenant que vous avez importé ou créé votre en-tête :

  • Ajouter “50” au z-index de celui-ci
  • Ajoutez le code CSS dans l’onglet de votre section “Custom CSS”
				
					@media (min-width: 1024px){
#site_header {
	display:none;	
	width:100%!important;
}
}
				
			

Puis, pour que ça fonctionne, il faut ajouter un code JavaScript à votre en-tête.
Pour cela il faut :

  • Mettre votre menu le positionnement de la largeur : “en ligne”
  • Puis, régler votre colonne pour que votre menu soit aligné à droite.
  • Puis ajouter un widget “HTML” à côté du menu, et insérer le code JS ci-dessous à l’intérieur :
				
					<script>window.addEventListener('DOMContentLoaded', function() {
    jQuery(document).ready(function( $ ) {
    jQuery(window).scroll(function() {
      
      if ( $ (window).width() > 1024) {
       
        if ( $ (window).scrollTop() >= 400) {
            $ ('#site_header').fadeIn();
          } else {
            $ ('#site_header').fadeOut();
             }
      }
    });
});
});</script>
				
			
  • Puis changer le positionnement en largeur du widget à “En ligne”

Le positionnement de la largeur est essentiel pour que la section de l’en-tête ne prenne pas une hauteur supplémentaire à cause du widget HTML.

Maintenant que votre en-tête est configuré, dupliquez simplement la section :

Parfait, on y presque!
Maintenant vous pouvez personnaliser votre nouvel en-tête.
Vous pouvez changer le logo, la couleur, etc.

Quand cela est fait, ajoutez un effet de mouvement collant (sticky) seulement sur pc à votre deuxième en-tête.

Puis ajoutez à ce même en-tête, l’ID : site_header

Et si tout s’est bien passé, votre deuxième en-tête a dû disparaître!
Magique non?

Voyons le résultat :

Libre à vous maintenant de modifier votre en-tête comme vous le souhaitez.

À savoir :

  • Votre deuxième en-tête est maintenant invisible sur votre espace de création, pour l’afficher, enlever temporairement le code CSS de votre premier en-tête, puis remettez-le quand vous avez fini
  • Ceci ne fonctionne pas bien pour la version mobile et tablette, pensez à cacher la deuxième section d’en-tête.

Vous n’y arrivez pas?
Voici le fichier JSON à importer avec Elementor Pro


Testez sur WordPress 5.8.1 et Woocommerce 5.7.1.
Un nouveau projet WordPress ?
Contactez-moi et je me ferais un plaisir de vous aider.

Besoin d'un code personnalisé ?

Dire merci, c'est bien aussi.

Partagez cet article

0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x

Vous avez une question ?

Vous avez une question sur un article ?
Découvert un bug inexpliqué ? 😱
Ou vous avez des articles à me soumettre ? 🤔
N’hésitez pas à me contacter, je serais ravi de vous aider.

Parce que chaque projet est unique !

Pour une meilleure compréhension, merci de décrire au maximum votre projet, vos besoins, vos attentes…
Vous préférez en parler au téléphone, n’hésitez pas, je suis à votre écoute : 06 35 31 45 64

Tes modifications ont bien été sauvegardées

Bravo !

Vous êtes maintenant inscrit.

Votre réponse a bien été publiée

Votre demande a bien été envoyé, merci.

Le délai de réponse peut varier de 24h à 48h.
Merci de votre compréhension

J'ai besoin d'aide pour mon projet !

Sujet :
Créer un header collant facilement avec Elementor