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.

Laisser un commentaire

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

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.