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>
    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.

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur whatsapp
Partager sur email
Partager sur print

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Suivez-moi

Les derniers articles

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

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

Besoin d'aide pour mon projet

Sujet :
Créer un header collant facilement avec elementor
Panier
  • Votre panier est vide.