Cómo añadir un encabezado adhesivo en Astra Theme

Muchos sitios web se diseñan ahora con una navegación superior fija, que es lacabecera adhesiva. Se trata de un enfoque de diseño común en el que la navegación superior siempre se muestra en la parte superior de la pantalla cuando la página se desplaza hacia abajo, lo que ayuda a volver rápidamente a la secciónmenúu otras zonas de enlace importantes.

¿Qué es una cabecera adhesiva?

Las cabeceras fijas son aquellas que permanecen fijas en la parte superior cuando la página se desplaza hacia abajo.pie de páginasección. Utilícela para mantener los menús de navegación visibles en todo momento, reduciendo los pasos de salto y mejorando el acceso.

Preparación para su uso

La función de cabecera adhesiva forma parte del Astra Pro Como parte del plugin, necesitas instalar primero el tema Astra con el plugin Astra Pro Addon. Una vez activado el plugin, ve al backend y abre el módulo correspondiente.

Pasos para activar las cabeceras adhesivas

• Instalar y activar el plug-in Astra Pro
• Vaya al backend y haga clic en Astra > Cuadro de mandos para abrir la ventana Cabecera adhesiva módulo (en software)

• Vaya a Apariencia > Personalizar > Constructor de encabezados >. Cabecera adhesivaPara entrar en la página de configuración

Ajustes disponibles para las cabeceras adhesivas

Cabecera principal fija
Cuando está activada, la navegación principal permanece fija en pantalla mientras se desplaza la página.

Zonas de cabecera superior e inferior fijas
Si se utiliza Sobre Cabecera o Bajo Cabecera, puede establecer si se fijan o no por separado.

• El encabezado superior suele utilizarse para añadir botones, menús, información de contacto, etc.
• Debajo de la cabecera se puede colocarbuscar algoRecuadros, menús secundarios o anuncios breves

Debe activar el módulo Secciones de cabecera para poder ver la configuración.

Ajuste del logotipo y el estilo

Configurar diferentes logotipos
Posibilidad de configurar diferentes opciones para las cabeceras adhesivas logotipoEl estilo del diseño es independiente del logotipo principal del sitio.

Añadir logotipo Retina
Admite la carga de versiones HD de logotipos para dispositivos de alta resolución.

Ajustar la anchura del logotipo
La anchura del logotipo puede controlarse con un deslizador para adaptarlo a distintos tamaños de dispositivo.

Definir el color de fondo y la transparencia
Si el módulo Colores y fondo está activado, se puede establecer un color de fondo para la cabecera adhesiva. También se puede ajustar la transparencia del fondo para jerarquizarlo visualmente.

Añadir un efecto de desenfoque de fondo (Desenfoque de fondo)

existe Astra En la versión 4.1.0 y superiores del tema, se ha añadido un nuevo efecto de desenfoque del fondo a la cabecera adhesiva, que añade un suave nivel de desenfoque a la barra de navegación y confiere a la página un aspecto más moderno. Esta función depende del ajuste de transparencia del color de fondo y debe activarse manualmente en el panel de diseño.

El procedimiento es el siguiente:

• Con el módulo Sticky Header activado, vaya a Apariencia > Personalizar > Cabecera > Sticky Header

• Haga clic en el bloque Cabecera principal y vaya a la pestaña Diseño.

• Busca la opción "Desenfoque de fondo" y actívala.

• Se recomienda establecer el color de fondo en semitransparente para que el efecto de desenfoque sea más evidente y natural.

Esta función sólo está disponible para los estados pegajosos con la cabecera principal activada y es una de las mejoras proporcionadas por el plugin Astra Pro.

Ajustes de mejora de la apariencia

Efecto encogimiento
Si está activada, la cabecera adhesiva se reducirá automáticamente en estado de desplazamiento para ahorrar espacio en la página.

efecto de animación
Se puede añadir una animación de entrada para que la cabecera adhesiva sea más dinámica.

Oculto al desplazarse hacia abajo
Cuando está activada, la cabecera adhesiva se oculta cuando la página se desplaza hacia abajo y reaparece cuando se desplaza hacia arriba. Esta opción debe utilizarse junto con la cabecera principal adhesiva.

Elija los dispositivos que desea visualizar
Puede configurarse para que sólo se active en el escritorio, en el móvil o en ambos.cabecera adhesiva.

Eliminar el estilo de sombra (opcional)

Si no desea el efecto de sombra predeterminado, añada lo siguiente CSS Código:

#ast-fixed-header .main-header-bar {
box-shadow: unset;
}

resúmenes

Astra Pro La función de cabecera adhesiva no sólo tiene una configuración sencilla, sino que también admite una gran variedad de ajustes de detalles visuales, como desenfoque de fondo, cambio de logotipo, animación, zoom y otros efectos. Mediante el uso racional de estas opciones, puede crear una barra de navegación hermosa, clara y fácil de manejar, para mejorar el sentido general de todo el sitio.

Artículos relacionados

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres