Cómo cambiar el color del encabezado fijo al desplazarse en Elementor

Los encabezados fijos son una excelente manera de mantener visible el menú de navegación de su sitio web en todo momento, lo que garantiza un fácil acceso a enlaces e información importantes. Sin embargo, un encabezado estático puede volverse monótono con el tiempo y es posible que desees cambiar su color en el desplazamiento para crear una experiencia de usuario más dinámica y atractiva. En esta guía, le mostraremos cómo cambiar el color de un encabezado fijo al desplazarse en Elementor , mediante pasos simples y fáciles de seguir. Ya sea que sea principiante o un usuario experimentado de Elementor, puede implementar fácilmente este efecto y darle a su sitio web un aspecto fresco y moderno.

Método de diseño

Si aún no lo ha hecho, deberá utilizar el creador de temas para crear una plantilla de encabezado personalizada. Comience colocando su logotipo en un widget de imagen y un widget de navegación en una sección de encabezado de dos columnas.

La pestaña Avanzado

La pestaña Avanzado en la sección Controles se utilizará para los siguientes pasos.

Configuración de márgenes

La forma más común de hacer un encabezado transparente es darle a la sección un margen negativo igual a su altura. Desbloquee los controles de margen en la pestaña Avanzado y establezca la parte inferior en un valor negativo (ejemplo: -125px). Esto moverá la sección debajo del encabezado a la parte superior de la página.

El índice Z

También deberá aumentar el índice Z de la sección para asegurarse de que esté siempre en la parte superior del contenido. Puede ingresar cualquier número que sea mayor que el resto del contenido de su sitio web, pero muchos diseñadores usan 1000.

Configuración fija

Seleccione la opción Sticky del acordeón Motion Effects y configúrela en Top.

Añadiendo efecto

Ahora que hemos creado una sección de encabezado transparente básica, agregaremos el efecto de desplazamiento.

Pestaña Estilo

La pestaña Estilo en los Controles de sección se utilizará para los siguientes pasos.

Color final

Establece el color del fondo o degradado final en el selector de color.

Efecto de desplazamiento

Alterna el selector de efectos de desplazamiento en el panel de controles.

Establecer los valores

Ahora necesitamos ajustar los valores en los controles deslizantes de la ventana gráfica para lograr el efecto deseado. Desplácese hasta la ubicación de su página donde desea la opacidad total y reduzca el valor Superior hasta que el encabezado sea completamente opaco (ejemplo: 25%). Ahora puede aumentar el valor de Bottom. En el ejemplo anterior, queremos que el efecto se produzca rápidamente, por lo que configuramos los valores muy juntos (ejemplo: 22%). Esto dará como resultado que el efecto se produzca con un desplazamiento de página del 3%.

Terminando

En conclusión, cambiar el color del encabezado adhesivo en el desplazamiento en Elementor puede mejorar el atractivo visual y la experiencia del usuario de su sitio web. Es una forma sencilla y eficaz de hacer que su sitio web se destaque y cree una impresión memorable en sus visitantes. Sin embargo, tenga en cuenta que deberá ajustar o tener en cuenta los dispositivos móviles y tabletas, ya que el comportamiento del encabezado puede variar en diferentes tamaños de pantalla. Encontrar ese punto óptimo requerirá algunas pruebas y ajustes, pero el resultado final valdrá la pena el esfuerzo. Así que adelante y prueba esta técnica para darle a tu sitio web un aspecto fresco y moderno.