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.