Lire la vidéo
Aucun plugin, seulement Elementor
De nombreux tutoriels présents sur le web propose des solutions complexes pour changer de couleur votre header ou autres éléments présents dans celui-ci.
Dans ce tutoriel vous n’utiliserez aucun plugin – hormis Elementor – et uniquement du CSS. Le JavaScript, nous n’en avons pas besoin non plus !
CSS – Exemple de code
Ci-dessous vous trouverez le CSS utilisé dans le tutoriel. A savoir que des ajustements sont nécessaires en fonction des widgets utilisés et de vos propres besoins.
1. Header – Arrière-plan et transition
/* Changer la couleur d'arrière plan */
.elementor-sticky--effects {
background: #fff!important;
border-bottom: 1px solid #e0e0e0;
}
/* Transition - Changer "600ms" pour définir une nouvelle durée */
.elementor-sticky--effects, .sticky-menu-items ul li a .logo-noir {
transition: 600ms all ease-in-out;
}
2. Menu – Elementor
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #001d29!important;
}
.elementor-sticky--effects .elementor-item:after {
background-color: #001d29!important;
}
/* Mobile et tablette uniquement */
@media screen and (max-width:1024px) {
.elementor-sticky--effects .elementor-menu-toggle {
background-color: white!important;
}
.elementor-sticky--effects .elementor-menu-toggle svg {
fill: #001d29!important;
}
.elementor-sticky--effects i.elementor-menu-toggle__icon--close.eicon-close {
color: #001d29!important;
}
}
3. Logo – Swipe au scroll
Logo 1
/* Adapter la classe .logo-white */
.elementor-sticky--effects .logo-white {
display: none;
}
Logo 2
/* Adapter la classe .logo-noir */
.logo-noir {
display: none;
}
/* Adapter la classe .logo-noir */
.elementor-sticky--effects .logo-noir {
display: inline-block;
}
4. Call To Action – CTA
.elementor-sticky--effects .elementor-button-link {
background-color: #08352F!important;
color: #ffffff!important;
}
Résumé
Vous savez à présent comment changer – sans plugin ni JavaScript – la couleur de votre header et de tout élément interne via Elementor.
