Cambio de encabezados en desplazamiento con encabezados fijos de Elementor

https://youtu.be/77BUOsY9kwA

Cómo cambiar los encabezados en el desplazamiento con Elementor

¿Qué hay de nuevo creadores de sitios web yElementorentusiastas! Este tutorial le mostrará cómo cambiar o cambiar los encabezados al desplazarse usandode ElementorFunción pegajosa.

Hay dos estilos que te mostraré.

Un estilo de revelación en el que el encabezado se anima hacia arriba y hacia abajo al desplazarse
Y un desvanecimiento en estilo

Haremos esto paso a paso para que incluso los principiantes en Elementor y WordPress puedan agregar este efecto a su sitio web al final del video.

¿Qué es un encabezado cambiante?

Un encabezado cambiante es un método para cambiar los encabezados mediante el uso de dos encabezados. Habrá un encabezado inicial que es su encabezado principal y comienza como el primer encabezado. Luego, cuando el usuario se desplaza por la página web, aparece un segundo encabezado.

Este método es una alternativa a un solo encabezado con estilos que cambian al desplazarse. Personalmente, esta es mi técnica favorita y tiene algunos beneficios adicionales a un encabezado fijo.

Adición de múltiples efectos de encabezado fijo de Elementor

Uno de los mayores beneficios es que puede hacer 2 menús totalmente diferentes y no limitarse al mismo diseño. Esto es particularmente útil con los sitios de WooCommerce donde más elementos como carritos y cuentas pueden ser útiles en el menú.

Esto también facilita agregar diferentes efectos, todo en uno, como un logotipo que cambia o se reduce al desplazarse, colores de fondo para un encabezado que cambia al desplazarse y un encabezado que se reduce por completo y que es mucho más delgado al desplazarse. Y todo esto se puede hacer a la vez usando estas técnicas de cambio de encabezados al desplazarse usando los efectos pegajosos de Elementor.

Lo que necesitas para seguir este tutorial

Para usar el efecto y el método con Elementor, necesitaráElementor Pro. Si aún no lo tienes, aquí tienes un enlace para que empieces.No se requieren otros complementos.

También deberá agregar algo de CSS, pero no se preocupe, lo tengo cubierto. A continuación, agregué el CSS, y todo lo que tendrá que hacer es copiar y pegar. Le mostraré dónde colocarlo y haré que este tutorial sea tan simple que incluso los que no son expertos en tecnología puedan seguirlo y hacer que funcione.

Cómo funcionan los encabezados fijos de Elementor

Los encabezados adhesivos de Elementor funcionan debido a la función adhesiva de Elementor. Hay una opción 'Sticky' en la pestaña Avanzado en 'Efectos de movimiento' en casi cualquier elemento.

Cuando esta opción está activada y se le da un valor a la 'compensación de efectos', se le da una clase especial al elemento. Con esa clase, podemos usar CSS para apuntar y diseñar ese elemento.

Compensación de efectos

Lo que hace Effects Offset es que esto determina cuánto desplazar la página web para que ocurra el efecto pegajoso. Por ejemplo, si coloca 100 para el valor de Compensación de efectos, cuando la página se desplaza 100 píxeles, se produce el efecto.

Cuál es el efecto, es la clase CSS especial, 'elementor-sticky-active'. La clase aparece en el código cuando se desplaza al nivel de compensación de efectos. Y el CSS que apunta a esa clase entra en vigor.

Entonces, al cambiar los encabezados, lo que realmente hacemos es hacer que la sección del encabezado secundario sea pegajosa, ocultar el encabezado secundario sobre la página web o simplemente hacerlo desaparecer (según el estilo que prefiera). Luego, escribimos CSS que apunta a la clase. en la ocultación del encabezado secundario para que aparezca cuando el usuario se desplace hasta donde lo tenemos configurado en 'desplazamiento de efectos'.

Cambiar encabezados en desplazamiento con Elementor Tutorial

Paso 1: Crear plantillas de encabezado

Haremos nuestros encabezados en Theme Builder de Elementor. Desde su tablero, navegue hasta la barra de herramientas izquierda y en Elementor > Plantillas > Generador de temas. Agregue una nueva plantilla de encabezado.

Si tiene experiencia con Elementor, es posible que ya sepa cómo crear un encabezado. De lo contrario, vea el video tutorial al final de este artículo.

Paso 2: crea ambos menús

En su plantilla de encabezado, agregue ambos menús y ajústelos como desee. Para su encabezado principal, agregue un 100 en el índice z. Esto asegurará que esté en la parte superior de su banner.

Paso 3: agregue funciones adhesivas y clases CSS

En su encabezado principal, seleccione la sección en la que se encuentra, navegue a la pestaña Avanzado y en Clases de CSS, agregue 'encabezado-1', y esa será la clase para la sección de su encabezado principal.

Para su encabezado secundario, este es el encabezado que aparecerá en el desplazamiento, navegue a la sección en la que se encuentra (igual que el otro encabezado), vaya a Avanzar en el editor de Elementor y baje a las clases de CSS. Agregue 'header-2' allí, y esta será la clase para la sección de su encabezado secundario.

Paso 4: corrección de Safari

En las pruebas, descubrí que los menús no cambiaban con fluidez en Safari, y tener una transición fluida tuvo un gran impacto. Esta es la solución que usé para asegurarme de que sus menús cambien sin problemas en Safari, Chrome y Firefox.

Es simple. Mueva su encabezado secundario hacia la parte superior y asegúrese de que esté encima de su encabezado principal. Entonces, el encabezado 2 en realidad estará encima del encabezado 1.

Paso 5: Agregar efectos pegajosos

Solo agregaremos el efecto adhesivo al encabezado secundario. En el encabezado secundario, navegue a la Sección para editar > a la pestaña Avanzar > a Efectos de movimiento > en Sticky, seleccione 'Superior'.

Elija si desea una computadora de escritorio, una tableta y un dispositivo móvil. Personalmente, solo uso computadoras de escritorio y tabletas, y mantengo mis menús móviles más simples. Creo que es mejor para la interfaz de usuario, pero eso se lo dejo a usted.

En el 'Offset', no tocar y dejar en 0.

En 'Effects Offset', aquí es donde ocurre la magia. El número que pones aquí es el número de píxeles que la página web se desplazará hasta que se produzca el efecto en el cuadro de valor. Puedes jugar con este número y ver qué funciona mejor para ti.

Solo tenga en cuenta que si lo deja en 0, esto no funcionará.

Paso 6: Agregar CSS

Recomiendo agregar CSS en la carpeta style.css de su tema secundario. Puede encontrar esto navegando en su tablero a Apariencia> Editor de temas. Desde su editor de temas, asegúrese de tener seleccionado su tema secundario marcando 'Seleccionar tema para editar' en la barra de herramientas derecha.

Si no tiene un tema secundario, puede agregar su CSS en el personalizador de WordPress. Puede encontrar esto navegando a Apariencia > Personalizar > CSS adicional.

Trato de evitar agregar CSS en el editor de Elementor porque puede desorganizarse y perderse. Se convierte en un dolor de cabeza más adelante en el futuro. Siempre es una buena práctica mantener todo el código limpio, centralizado y organizado.

Aquí está el CSS

Dado que hay 2 estilos, el estilo deslizante hacia abajo y el estilo de aparición gradual, agregará solo uno de los fragmentos de CSS a continuación. No agregue ambos.

Opción 1: el encabezado revelador o deslizable hacia abajo

/* Slide In From The Top Option */

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}


.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}

.elementor-sticky--effects.header-1 {
 display: none!important;
}

/* End Of Slide In From The Top Option */

Opción 2: el encabezado Fade In

/* Fade In Option */

.header-2 {
 opacity: 0;
 -moz-transition: opacity .25s ease-out!important;
  -webkit-transition: opacity .25s ease-out!important;
  transition: opacity .25s ease-out!important;
}


.elementor-sticky--effects.header-2  {
 opacity: 1!important;
}

/* End Of Fade In Option */

Paso 7: arreglo de Safari parte 2

Después de agregar el CSS, su encabezado secundario debería estar oculto y todo funciona bien.

Pero... debido a la corrección de Safari, hay espacio extra encima del menú principal. Es una solución simple. En la sección del menú principal, asigne un valor negativo al margen superior. Debería verse como -80px en el margen superior. Más o menos unos pocos píxeles.

Paso 8: Estilo para móvil

Para dispositivos móviles, hay un par de opciones. Deje los menús de cambio para móviles activos. O bien, puede ocultar ambos menús para dispositivos móviles y crear un tercer menú solo para dispositivos móviles. Tomará un poco de trabajo, pero afortunadamente Elementor es genial y facilita el estilo.

Cambio de encabezados en desplazamiento con Elementor – Video Tutorial

Si siguió todos los pasos anteriores y algo no funcionó, o se quedó atascado en algún lugar del camino, ¡no hay problema! Te tengo cubierto. También creé un video tutorial paso a paso para ayudar a simplificar.

Si tiene alguna pregunta, déjela en los comentarios a continuación y me pondré en contacto con usted. ¡Salud!