Nota: La función Sticky Header forma parte del complemento Astra Pro. Para utilizar esta función, asegúrese de que tanto el tema Astra y Astra Pro Addon están instalados en su sitio de WordPress.
¿Qué es una cabecera adhesiva?
La función Sticky Header de Astra permite fijar la cabecera en la parte superior de la página web a medida que los usuarios se desplazan, proporcionando un acceso rápido al menú.
Es como tener el menú siempre al alcance de la mano, sin importar en qué parte de la página te encuentres.
Pasos rápidos para activar la cabecera adhesiva
Puede consultar el siguiente vídeo para iniciarse rápidamente en el uso de Sticky Header en Astra Pro.
- Instale y active el Complemento Astra Pro.
- Active el módulo Sticky Header desde las opciones de Astra en el panel de control de WordPress.
- Personalice la configuración del módulo Sticky Header en el Personalizador de WordPress en Apariencia > Personalice > Creador de cabeceras > Cabecera adhesiva.
Para más detalles al respecto, consulte los siguientes pasos.
Activación del módulo de cabecera adhesiva
- Active el módulo Sticky Header desde Astra > Cuadro de mandos.
- Configuración de acceso en Astra > Personalice > Creador de cabeceras > Cabecera adhesiva.
Configuración de la cabecera adhesiva
Estos son algunos de los ajustes de Sticky Header que puede probar.
Stick Primary Header
Esta es la configuración que fija el encabezado principal de su sitio web en la parte superior.
Pegar por encima y por debajo de las secciones de cabecera
En su configuración, hay dos áreas clave: la Cabecera superior y el Cabecera inferior.
En Cabecera superior es la sección superior por encima de la cabecera principal donde puede mostrar botones, menús y contenido adicional.
Cabecera inferiorque se encuentra justo debajo de la cabecera principal, proporciona un espacio para menús adicionales, barras de búsqueda y widgets.
Nota: Asegúrese de que ha activado el Módulo de secciones de cabecera del cuadro de mandos del Astra Pro para ver estas opciones.
Cambiar logotipo adhesivo y opciones de anchura
Logotipo diferente para cabeceras adhesivas
Esto le permite elegir un logotipo diferente para su cabecera adhesiva que el logotipo de su sitio. Déjelo vacío si desea utilizar el mismo logotipo que el de su sitio.
Añadir un logotipo Retina adhesivo
Puedes subir logotipos normales y retina para asegurarte de que se ven nítidos en pantallas de alta calidad.
Ancho del logotipo adhesivo
Puede ajustar fácilmente la anchura de estos logotipos con este control deslizante.
Si enciende el Módulo Colores y fondo en Astra Pro y elija un color de fondo para la cabecera en Astra > Personalice > Creador de cabeceras > Cabecera adhesivaese color se trasladará automáticamente a la cabecera adhesiva.
En este caso, puede utilizar la opción Opacidad del fondo adhesivo para gestionar la opacidad del color de fondo.
Añadir un efecto de contracción
Haga clic en el botón Activar el efecto de contracción para utilizar esta función. Esto reduce el tamaño de la cabecera adhesiva para una visualización más compacta mientras se desplaza hacia abajo.
Es útil cuando se tiene un encabezado primario bastante grande en altura y se desea que sea más pequeño al convertirlo al encabezado adhesivo.
Añadir efecto de animación
Aplica efectos de animación a la entrada de cabecera adhesiva.
Ocultar el encabezado adhesivo mientras se desplaza hacia abajo
Esta opción oculta la cabecera adhesiva sólo cuando el lector se desplaza hacia abajo. Mientras se desplaza hacia arriba, la cabecera adhesiva vuelve a aparecer.
Esta opción debe activarse junto con la opción Stick Primary Header opción.
Opciones de visualización
Visite la página Activar para mostrar la cabecera adhesiva en un ordenador de sobremesa, un móvil o ambos.
Personalización con CSS
Nota: Por defecto, aparecerá una sombra para una cabecera adhesiva. Para eliminar el efecto de sombra por defecto, añada este CSS personalizado:
#ast-fixed-header .main-header-bar {
box-shadow: unset;
}Ya está. Esperamos que esta guía te haya ayudado.
Si tienes más preguntas o algún problema, ponte en contacto con nosotros. Siempre estamos aquí para ayudarte.
