Necesidad de cambiar el encabezado en el desplazamiento de la página con Elementor ?
Hay muchos comportamientos de encabezado que puede lograr con Elementor Pro. Uno de ellos es cambiar un encabezado por otro al desplazarse por la página. Este artículo le mostrará cómo.
Elementor Pro como sabes viene con una característica Theme Builder para permitirle crear un encabezado personalizado en su sitio web WordPress. Gracias a esta característica, ya no necesita depender de lo que ofrece su tema de WordPress cuando se trata de personalizar encabezados, que suele ser limitado.
Puede agregar cualquier elemento que desee, usar cualquier configuración de tipografía que desee y establecer el comportamiento que desee.
Elementor Pro tiene una opción de ajuste incorporada para agregar un encabezado pegajoso. Usaremos esta funcionalidad para crear un encabezado que cambia a medida que se desplaza la página. También se necesitará CSS personalizado para este tipo de comportamiento de encabezado.
Lea también: Cómo crear un encabezado personalizado en WordPress con Elementor
A continuación, se muestra un ejemplo de un encabezado que cambia a medida que se desplaza la página.
Paso 1: crea el encabezado personalizado
Antes de comenzar, asegúrese de haber actualizado su Elementor a la versión pro, ya que Theme Builder solo está disponible en Elementor Pro. Puede obtener la versión pro de Elementor Pro en su sitio web oficial.
Una vez que esté listo, vaya a Plantillas -> Creador de temas en su panel principal de WordPress. En el panel del generador de temas, pase el puntero sobre la pestaña Encabezamiento y haga clic en el icono más para crear una nueva plantilla de encabezado.
En la biblioteca de plantillas que aparece, puede seleccionar una plantilla de encabezado predefinida que le guste. O, si desea crear el encabezado desde cero, puede simplemente cerrar la biblioteca de plantillas para abrir el editor de Elementor.
Descubre también: Cómo crear formas personalizadas en Elementor
En este artículo, crearemos la plantilla de encabezado desde cero.
Comience a crear su encabezado agregando una sección, luego agregue los elementos necesarios y cree los estilos en consecuencia.
Una vez que haya agregado los elementos necesarios y creado los estilos, vaya a la pestaña Avanzado. Bajo el bloque Avanzado, establezca el índice Z en 100 y agregue la clase CSS.header-1
Luego, duplique la sección de encabezado que acaba de crear arriba. La sección duplicada será su segundo encabezado, que aparecerá cuando la página se desplace hacia abajo.
Edite el encabezado duplicado. Puede agregar más elementos o eliminar elementos existentes. También puede cambiar el fondo. Todo lo que quieras. Una vez que se complete la edición, vaya a la pestaña Avanzado. Bajo el bloque Configuración avanzada, cambie el nombre de la clase CSS a header-2.
Entonces abre el bloque Efectos de movimiento. En la lista desplegable Pegajoso, ajustado a Notable . Puede definir el desplazamiento de los efectos en el campo. Compensación de efectos. El valor que establezca aquí determinará la profundidad de desplazamiento antes de que se produzca el efecto (pegajoso en este caso).
Cuando haya terminado de editar ambas secciones del encabezado, cambie el orden de ellas.
Edite la sección inferior y configure el margen negativo para que esté por encima de la sección superior. Para hacer esto, vaya a la pestaña Avanzado y establezca el margen superior en aproximadamente -65.
Publica tu encabezado haciendo clic en el botón PUBLICAR en la parte inferior del panel de configuración de Elementor. Agregue una condición de visualización haciendo clic en el botón AÑADIR UNA CONDICIÓN. Haga clic en el botón GUARDAR Y CERRAR una vez que haya terminado de configurar la condición de visualización.
Paso 2: agregar CSS personalizado
El CSS a continuación se utiliza para controlar el efecto de transición. Puede agregar el CSS en el Personalizador de temas. Ir Apariencia -> Personalizar en su panel principal de WordPress. En el panel del Personalizador de temas, abra el bloque CSS adicional y pegue el siguiente CSS.
El fragmento de CSS:
.header-2 {transform: translatey (-80px); -moz-transición: ¡todos los .3s facilitan! importante; -webkit-transición: ¡todos los .3s facilitan! importante; transición: ¡todos los .3s facilitan! importante; } .elementor-sticky - effects.header-2 {altura: auto! importante; transformar: translatey (0px); } .elementor-sticky - effects.header-1 {display: none! important; }
Haga clic en el botón PUBLICAR para aplicar el cambio.
En resumen
Elementor Pro viene con la función Theme Builder donde puede crear plantillas personalizadas para las partes de su tema, como el encabezado. Al crear un encabezado personalizado con Elementor Theme Builder, puede establecer el comportamiento que desee con la capacidad de agregar CSS personalizado. Incluso sin agregar CSS personalizado, puede configurar los efectos como pegajosos y transparentes.
Lea también: Cómo crear una página 404 en WordPress con Elementor
Cambiar el encabezado en la propia página de desplazamiento ofrece algunas ventajas.
Por ejemplo, puede usar el encabezado secundario (el encabezado que aparece después de que la página se desplaza hacia abajo) para aumentar las posibilidades de que su página se comparta mostrando solo los botones para compartir en las redes sociales.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este tutorial que le muestra cómo cambiar el encabezado de desplazamiento de página en Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber en el comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
