Tutorial de Kadence: Creación de un efecto de cabeceras adhesivas y transparentes (Sticky & Transparent Headers)

En el diseño de sitios web modernos, los adhesivospie de páginay las cabeceras transparentes se utilizan a menudo para mejorar los efectos visuales y la fluidez operativa. El uso de Kadence en el temaCabecera avanzadapuede aplicar ambos estilos de forma flexible o utilizarlos combinados para conseguir un diseño de página sofisticado.

Añadir módulo de cabecera avanzado

En primer lugar, añada el bloque Encabezado (Adv) a la página. Se le pedirá que cree un nuevo encabezado o que elija una plantilla existente.Kadence Se proporciona una variedad de plantillas preestablecidas, incluyendo:

• Cabecera de escritorio de una o varias líneas
• Diseño de cabecera optimizado para móviles

Después de seleccionar una plantilla, puede utilizar el editor visual para añadir módulos de contenido y organizar libremente las secciones.

Establecer una cabecera transparente

Las cabeceras transparentes suelen utilizarse en diseños con grandes imágenes o contenido de fondo en la parte superior de la página para darle un aspecto más jerárquico.

El procedimiento de configuración es el siguiente:

• Compruebe el bloque Cabecera (Adv)
• Vaya a la opción General de la columna Configuración de la derecha.
• Activar cabecera transparente

El ajuste Espaciado automático bajo aparece cuando está activado y se utiliza para añadir automáticamente un espaciado en la parte superior del primer contenedor de la página para evitar que se oscurezca el contenido.

Además, se añaden las siguientes opciones de estilo a los bloques Cabecera y Navegación:

• Fondo y bordes transparentes

• Estilo transparente del menú de navegación y estilo del enlace

Estos estilos pueden ajustarse según el esquema de color y las necesidades tipográficas de la página.

Configurar cabeceras adhesivas

La cabecera adhesiva se mantiene en la parte superior de la página al desplazarse para facilitar el accesonavegadoro entrada operativa.

Habilitar de la siguiente manera:

• Compruebe el bloque Cabecera (Adv)
• Activar la cabecera adhesiva en la configuración general

Tras la activación, se puede configurar lo siguiente:

• Sección fija: seleccione el área que desea fijar (toda la línea, arriba, en medio o abajo)

• Reveal On Scroll Up: mostrar cuando la página se desplaza hacia arriba, ocultar cuando la página se desplaza hacia abajo.

• Encoger fila central: Encoge la fila central en estado pegajoso y establece la altura de encogimiento.

En los módulos Cabecera y Navegación también aparecen los correspondientes ajustes de estilo adhesivo, incluidas opciones para el color de fondo, el borde y el color del texto.

Activar cabeceras transparentes y adhesivas

Para utilizar ambos efectos, transparente y adhesivo, basta con activar ambas opciones en la configuración General de la Cabecera (Adv).

Después, ve a Configuración de estilo y expande Configuración de fondo adhesivo para personalizar el color de fondo y la transparencia del estado adhesivo.

Esta combinación es adecuada para la zona superior de una página visualmente exigente, como mostrar una imagen grande, un eslogan de marca o un banner de página de inicio.

Establecer la cabecera adhesiva como transparente o translúcida

Puede hacer que la cabecera en estado pegajoso sea de estilo transparente o semitransparente aunque la cabecera transparente no esté activada.

Basta con ir a Ajustes de estilo en la cabecera (Adv), activar Ajustes de fondo adhesivo y utilizar el selector de color para ajustar el valor de transparencia al efecto visual deseado.

Configuración de una cabecera transparente semitransparente

Si no se desea transparenciapie de páginaTotalmente transparente, o puede ajustarse a un estilo semitransparente con un ligero color de fondo. Expanda Fondo transparente en la configuración de Estilo y utilice el selector de color para ajustar la opacidad del color para una representación visual más suave de la cabecera.

corto

Kadence La función de cabecera avanzada permite el uso independiente y la combinación de estilos adhesivos y transparentes para adaptarse a diversas necesidades de diseño de páginas. En combinación con el control de estilo personalizado, puede crear una zona de cabecera práctica y bonita para mejorar la calidad general de la página.

Para personalizar aún más el estilo, se puede utilizar una combinación de Bloques Kadence Consiga una tipografía más detallada.