Headers

El header es la parte de tu sitio que contiene el logo y la navegación. Tienes muchas formas de controlar su estilo para crear un header atractivo.

En el Editor 2.0, el header predeterminado ofrece diseños ya montados, lo que reduce el riesgo de cambios accidentales. Puedes elegir diseños con acciones limitadas, para trabajar de forma centrada y eficiente. También hay una opción de edición avanzada para quien quiera personalizar más: añadir widgets o elementos adicionales, añadir secciones vacías o prediseñadas y guardar secciones de header para reutilizarlas. Para saber más, consulta «Advanced Header Editing».

Ocultar o mostrar el header (Classic Editor)

Para ocultar un header:

1. Pasa el ratón por la parte inferior del header y haz clic en Encabezado.
2. Haz clic en Ocultar cabecera de página y elige el dispositivo en el que quieres ocultar el header.

Para volver a mostrar el header:

1. En el panel lateral, haz clic en el icono Mostrar elementos.
2. Haz clic en el icono Ocultar del footer y elige Sí para volver a mostrar el header.

Ocultar o mostrar el header (Editor 2.0)

Puedes ocultar el header en todas las páginas o solo en algunas.

Para ocultar el header:

1. Haz clic con el botón derecho en el header para abrir el menú contextual.
2. Elige Hide on this device y luego From this Page Only o From All Pages.

Para volver a mostrar el header:

1. En el panel lateral, haz clic en Capas.
2. Localiza tu header en el panel y haz clic en el icono del ojo tachado que hay junto a él.

Header reducido (Classic Editor)

El header reducido es una versión más pequeña del header del sitio. Te permite mantener fija la información de navegación importante sin distraer a los usuarios cuando bajan por la página y sin ocupar demasiado espacio. Funciona como un header fijo, pero reduce el tamaño de los logos y del header en general. Resulta especialmente útil en sitios con headers grandes y en sitios pensados para desplazamientos largos.

Nota: el header reducido está disponible en escritorio y, en tablet, solo cuando se usa el diseño de header de barra superior.

Para activar un header reducido:

1. Pasa el ratón por el header, haz clic en Encabezado y luego en Editar diseño.
2. En la pestaña Shrinking Header, haz clic en la opción Enable shrinking header. Tienes estas opciones:
   • Mostrar solo la sección de navegación en el desplazamiento. Muestra solo la fila con la navegación cuando el header se reduce. Esta función solo se aplica si el header tiene más de una fila.
   • Fondo durante el desplazamiento. Cambia el color de fondo del header reducido. Ten en cuenta que el color de fondo de la fila prevalece sobre el del header reducido.
   • More header colors on scroll. Define colores para el texto, el enlace seleccionado y el estado hover, los iconos, el texto de los botones, y más.
   • Tamaño del logotipo. Cambia el tamaño al que se reduce el logo o la imagen cuando el header se reduce (por defecto, 66%).
   • Cambiar logotipo al desplazarse la página. Elige un logo para mostrar al desplazarte.
   • Espaciado en el desplazamiento. Ajusta el espaciado superior e inferior del header reducido. Puedes cambiar el espaciado del header por dispositivo.

Una vez activado el header reducido, ocurre lo siguiente:

• El espaciado del header cambia el padding superior e inferior y el margen a 0. Esto no se aplica a las filas dentro del header.
• Las imágenes del header se reducen al porcentaje de la barra de tamaño del logo (por defecto, 66%).
• Para las plantillas con un valor de altura mínima en el header, la altura mínima del header se ajusta a auto.
• Si hay filas vacías con columnas, las columnas ocupan todo el espacio de la fila.
• Las propiedades de diseño prevalecen sobre las del header reducido. Por ejemplo, si defines un fondo de fila en el header, ese fondo se muestra por encima del fondo del header reducido.
• Las filas vacías se muestran en el header reducido.
• Si no ves tu header reducido, puede que no tengas suficientes filas en tu sitio como para desplazarte hacia abajo y activarlo. Si la página solo tiene una fila, el sitio no se desplaza.

Widgets compatibles con los headers reducidos

No todos los widgets son compatibles y aparecen en el header reducido. Si tienes en el header un widget que no es compatible con el header reducido, en su lugar aparece una columna vacía. No puedes editar los widgets mientras el header está reducido.

Los siguientes widgets son compatibles y se muestran en un header reducido:

• Navigation
• Social Icons
• Botón Click to Call
• Botón Click to Email
• vCita
• Imágenes y logos
• Widget de párrafo
• Widget de título
• Botones

Headers fijos

Un header fijo se queda estático y permanece en su sitio cuando te desplazas por las páginas de tu sitio.

Nota: en móvil, los headers son siempre fijos de forma predeterminada.

Para activar un header fijo:

1. Pasa el ratón por el header, haz clic en Encabezado y luego en Editar diseño.
2. En la pestaña Contenido, elige Establecer como encabezado permanente. Si la opción de header fijo no está disponible, primero tienes que desactivar la opción Shrinking Header en la pestaña Shrinking Header.

Diseños de header

Puedes elegir entre varios diseños de header flexibles y prediseñados. Si cambias a uno de ellos, ya no podrás volver a un header fijo: solo podrás cambiar entre otros diseños de header flexibles. Además, al cambiar de diseño se elimina el contenido que hubiera en la sección del header. Te recomendamos crear una copia de seguridad antes de cambiar de diseño.

Para cambiar el diseño del header:

1. Pasa el ratón por el header y haz clic en Encabezado.
2. En la pestaña Diseño, elige un nuevo diseño de header. Si vas a cambiar a un header fijo, primero tienes que desactivar la opción Shrinking Header en la pestaña Shrinking Header.

Diseño del header

Para abrir el menú de diseño del header, pasa el ratón por el header, haz clic en Encabezado y luego en la pestaña Diseño.

• Diseño: explora opciones de diseño que combinan de forma coherente los estilos de navegación superior y de hamburguesa en todos los tamaños de pantalla. Los diseños predeterminados tienen funciones limitadas, pero la opción de edición avanzada añade flexibilidad.
• Espaciado: ajusta márgenes y espaciado interior; los cambios en escritorio afectan a los demás tamaños de pantalla si su espaciado no se ha modificado.
• Background: elige color o imagen de fondo, añade bordes o sombras y ve cómo los cambios se reflejan sin problemas en todos los tamaños de pantalla.
• Position: activa un header fijo con cambios según el desplazamiento. Activar el header fijo en cualquier tamaño de pantalla influye en el comportamiento en los demás.

Logo del header

Si el header contiene una sola imagen, el logo del sitio se conserva al cambiar de diseño de header. Si hay más de una imagen, o si el logo es de texto, la imagen del logo se mantiene tal como esté en el diseño.

Ten en cuenta que los headers de los distintos dispositivos no están conectados: si añades un logo en escritorio, no se añade automáticamente a los demás tipos de dispositivo. La única excepción es que, si en tablet se usa el diseño de header de barra superior, este hereda los cambios de logo que hagas en escritorio.

Si eliminas el logo, vuelve a añadir la imagen arrastrando el elemento de imagen de nuevo al header y configura el enlace para que lleve a la página de inicio.

Header y menú desplegable

Puedes añadir un menú desplegable en tus sitios de escritorio y tablet, lo que facilita crear sitios modernos con mucha libertad de diseño. Elige entre varios diseños de menú desplegable y personalízalos a tu gusto añadiendo widgets, filas y columnas.

El diseño de menú desplegable para móvil ofrece más personalización y una forma de mostrar widgets en el header y un menú siempre visible.

Puedes cambiar el diseño del header a uno predefinido que incluya botones, clic para llamar, iconos sociales y más. Puedes añadir cualquier widget al menú desplegable desde el panel de widgets.

Header y menú desplegable en escritorio y tablet

Para seleccionar y configurar un diseño de header y menú desplegable para escritorio y tablet:

1. En el panel lateral, haz clic en Capas.
2. Haz clic en Diseño del sitio.
3. En la sección Desktop, elige el diseño Menú ampliable.
4. En la sección Tablet, elige el diseño Menú ampliable.
5. Después de elegir el diseño de menú desplegable, aparece un icono de hamburguesa en el header de tu sitio. Haz clic en él para ver el menú desplegable.
6. En la pestaña Diseño, haz clic en el diseño existente para elegir un diseño de menú.
7. En la pestaña Estilo tienes estas opciones:
   • Entrar desde. Elige Arriba o Lateral.
   • Efecto de entrada. Elige Cover o Push.
   • Ancho. Mueve el control deslizante para ajustar el ancho del menú desplegable cuando está abierto. El ancho se define en porcentajes para adaptarse a todos los tamaños de pantalla.
   • Background. Configura el color o la imagen de fondo.
   • Color del icono de cerrar. Elige un color para el icono de cerrar y el color de fondo de ese icono.
8. En la pestaña Espaciado, cambia el espaciado interior.

El menú desplegable puede tener hasta 3 filas, y cada una se personaliza por completo. Si escritorio y tablet tienen el mismo diseño de sitio (ambos desplegables o ambos de barra superior), todas las personalizaciones son iguales para los dos. Si son distintos, hay que definir cada dispositivo por separado.

Para editar la ubicación del menú desplegable en el header:

1. Pasa el ratón por el header, haz clic en Encabezado y luego elige Editar diseño.
2. En la sección Diseño, haz clic en Izquierda o Derecha.

Header y menú desplegable en móvil

Para seleccionar y configurar un diseño de header y menú desplegable para móvil:

1. Pasa el ratón por el header, haz clic en la etiqueta Encabezado y luego elige Editar diseño.
2. En la pestaña Diseño, haz clic en el diseño existente para elegir un diseño de menú. El header móvil ofrece diseños que muestran widgets como enlaces sociales, números de teléfono y más. Los diseños de header son fijos, así que no puedes añadir widgets nuevos, pero sí editarlos o quitarlos.
3. Haz clic en Izquierda o Derecha para la posición del icono de menú.
4. Si aún no lo has hecho, abre el menú en la vista móvil. Así se abre el editor de menús y puedes editar el menú desplegable.
5. En la pestaña Diseño, haz clic en el diseño existente para elegir un diseño de menú. El menú desplegable ofrece varios diseños que pueden mostrar los enlaces sociales, la información de contacto y más. Puedes añadir cualquier widget al menú desplegable, añadir columnas y ordenarlas una al lado de otra o una encima de otra. Ahora bien, al cambiar de un diseño a otro se elimina todo el contenido que hayas añadido al menú y se conservan solo los widgets del diseño elegido.
6. En la pestaña Estilo tienes estas opciones:
   • Entrar desde. Elige Arriba o Lateral. Con Arriba, mueve el control deslizante de altura. Con Lateral, mueve el de ancho.
   • Efecto de entrada. Elige Cover o Push.

Nota: no se pueden añadir widgets adicionales al header móvil.

Mostrar los elementos del header sobre la imagen principal

Para mostrar los elementos del header por encima de las imágenes principales, pasa el ratón por el header, haz clic en Encabezado, haz clic en la pestaña Diseño y luego en Superposición con la sección superior. Así tus imágenes principales ganan visibilidad y te resulta más fácil diseñar sitios atractivos y modernos.

Ten en cuenta lo siguiente:

• En el header. Pon el color de fondo en transparente o en un color con opacidad.
• En la primera fila. Usa un espaciado superior igual o parecido a la altura del header.

Nota: para dar más flexibilidad, este ajuste solo se aplica a la página actual. Para activarlo en otras páginas, ve a cada una y sigue los pasos de arriba.