En este corto tutorial se explica la realización de un efecto visual donde veremos que el Header cambiar de color al igual que el logo de la web al moverse con el Scroll que este implementado en Elementor.
Luego de haber seleccionado una plantilla para la web procedemos a escoger un logo o imagen que represente nuestro negocio. Añadimos los ajustes correspondientes de tamaño, para luego duplicar los mismos ajustes y colocar nuestra otra imagen.
Para el ejemplo se anexa la imagen 1 que se le asigna un nombre como: “original-logo” donde su texto está en color blanco, luego esta se duplica para mantener los mismos ajustes solo que para esta imagen 2 le asignamos el nombre de: “scroll-logo” e insertamos la misma imagen solo que su fuente de color contrario a la original para el ejemplo se aplica en negro.
Finalmente, después de hacer estos ajustes anexamos esta parte del código que ya iremos explicando paso por paso.
CODIGO CSS:
Este código se anexara en en la misma sección de Avanzado pero al final habrá una ventana que dice CUSTOM CSS donde podremos copiar y pegar el siguiente código:
/* Esta parte de código establece una regla donde el fondo será blanco y al colocar la etiqueta important sobreescribira cualquier otro estilo */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* Escondemos el Logo 2, Imagen 2 o en este caso el Logo que tiene color de fuente negra.*/
.scroll-logo {
display: none;
}
/* En esta regla pondremos nuestra imagen 2, el logo con fuente negra dentro de la clase de .elementor-sticky--effects con la finalidad de mostrarse.*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
/*Y para cumplir la regla anterior uno de los dos logos tiene que salir asi que en este caso el original o la imagen 1 la ocultaremos*/
.elementor-sticky--effects .original-logo {
display: none;
}
/* Y por último, cambiamos de color los elementos del menú que acompañe el logo para que este tenga el mismo efecto*/
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}
RESULTADOS:
IMAGEN 1
IMAGEN 2
