Header Builder

El Header Builder (Constructor de Encabezados) facilita la creación de encabezados responsive, sticky y de varias filas.

Añade un Header Builder a tu página desde +Add > Helpers > Header Builder.

ELEMENTOS DE POSICIONAMIENTO
Cada elemento del Header Builder se compone de múltiples elementos de Header Row (Fila de Encabezado). Cada elemento Header Row está dividido en tres sub-secciones:  izquierda, centro y derecha.

Puedes posicionar los elementos dentro de cada fila de encabezado arrastrándolos con el ratón. También puedes utilizar el panel de estructura para el posicionamiento.

VARIAS FILAS
Para añadir otra fila de cabecera, activa el Header Builder  y luego haces click en Primary > Add Another Row en la configuración.

STICKY HEADERS (Encabezados pegajosos)
Para pegar un encabezado a la parte superior de la página de modo que permanezca en la parte superior de la ventana del navegador cuando el usuario se desplace hacia abajo, sigue estos pasos:

1. Selecciona Header Builder en el panel  Structure de la derecha.
2. Hacer click en Sticky en el panel de la izquierda.
3. Marca la casilla Sticky.

Opciones de configuración del Sticky Header

• Scroll Disntace (Distancia de desplazamiento) - hasta donde debe desplazarse el usuario antes de que se muestre el encabezado adhesivo.
• Sticky Background Color (Color de fondo) - un color de fondo que se aplicará al constructor de headers sólo cuando sea un sticky - útil para hacer que las cabeceras transparentes se superpongan a una Hero imagen de fondo.
• Sticky Above - la cabecera sólo será sticky por encima de este ancho de pantalla - se utiliza para ocultar el sticky  header en los dispositivos móviles.
• Sticky box shadow - código CSS para personalizar la sombra que se muestra debajo de la cabecera cuando es sticky.
• sticky header z-index - define un  z index para el sticky header - útil para evitar que otros elementos de la página aparezcan encima del sticky header mientras se desplaza.
• Fade in Sticky - Marca esta casilla para utilizar una animación de desvanecimiento.
• Fade in  speed - la velocidad de la animación de desvanecimiento.

Visibilidad de la fila de cabecera basada en el estado de adhesión
Cada fila de encabezado en un elemento del Header Builder puede configurarse para que se muestre o no dependiendo del estado de adhesión del Header Builder. Para cambiar esta configuración, selecciona una Fila del Encabezado en el panel de Estructura en el lado derecho. En el panel de propiedades de la izquierda, en la pestaña Principal, verás una sección llamada Sticky Display. Allí, puedes elegir mostrar sólo en Sticky u ocultar en Sticky.

SUPERPONER CABECERAS
Para hacer que la cabecera se superponga al contenido que hay debajo de ella en la página, sigue estos pasos:

1. Selecciona Header Builder en el panel Structure de la derecha.
2. Haz click en Overlay  en el panel de la izquierda.
3. Utiliza el menú desplegable Overlay Header para elegir el ancho de la ventana gráfica por encima del cual deseas que la cabecera se superponga al contenido de la página.

Esto dará lugar a una cabecera superpuesta en todas las páginas y publicaciones en las que esté presente esta cabecera. También puede determinar el estado de superposición del Header Builder por página yendo a Manage -> Settings -> Page Settings  mientras editas una página o publicación individual.

Visibilidad de la fila de encabezado basada en el estado de superposición
Cada fila de encabezado en un elemento del Header Builder puede configurarse para que se muestre o no dependiendo del estado de superposición del Header Builder. Para cambiar esta configuración, selecciona una fila de encabezado en el panel de estructura de la derecha. En el panel de propiedades de la izquierda, en la pestaña Principal, verás una sección llamada Overlay Display. Allí, puedes elegir entre mostrar sólo en superposición u ocultar en superposición.

CABECERAS RESPONSIVE
Los elementos de una cabecera se apilan horizontalmente por defecto. Los elementos de la izquierda, la derecha y el centro de la fila del encabezado aparecerán uno al lado del otro en una sola fila. Sin embargo, en las pantallas más pequeñas puedes querer que los elementos de la cabecera se apilen verticalmente en lugar de horizontalmente.

Para apilar todo el Header Builder o una Header Row (Fila de Cabecera) individual verticalmente, selecciona el Header Builder o la Header Row y vete a Primary. A continuación, elige un ancho de pantalla en el menú desplegable Stack Vertically Below dropdown. Cuando el ancho de la pantalla cae por debajo del valor elegido, los elementos dentro de la Fila de Encabezado o del Constructor de Encabezado se apilarán verticalmente.

Para ocultar una Fila de Encabezado específica por debajo de un determinado ancho de pantalla, sólo tienes que elegir el ancho en el desplegable  Hide Row Below .

Última modificación: 10 de junio de 2020