No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

Cómo añadir una cabecera fija con Astra

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.

Select Animation

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.

¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form