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 : Elementor Elementor Pro Thème Hello Elementor Première étape : Tout d’abord vous […]
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.
Besoin d'un code personnalisé ?
À lire aussi
Maintenance site web : pourquoi c'est vital pour votre entreprise
Un site laissé sans maintenance devient une porte ouverte aux pannes et aux piratages. Voici ce qu'un contrat sérieux couvre vraiment, et pourquoi c'est rentable.
Création site WordPress : 7 avantages décisifs pour votre entreprise
Création site WordPress : 7 avantages décisifs pour votre entreprise Dans un monde numérique en constante évolution, la **création site WordPress** s’est imposée comme une solution incontournable pour les entreprises souhaitant marquer leur présence en ligne. Que vous soyez une PME, un artisan ou une grande structure, disposer d’un site web performant est aujourd’hui un […]
Ajouter un temps de lecture estimé à vos articles WordPress
Introduction Le temps de lecture est devenu un élément essentiel pour améliorer l’expérience utilisateur sur les blogs et sites web modernes.Dans cet article, nous allons explorer comment implémenter un shortcode WordPress personnalisé qui calcule et affiche automatiquement le temps de lecture estimé de vos articles, accompagné d’une icône élégante. Pourquoi ajouter un temps de lecture […]