Header

El header o cabecera solo lo encontraremos en un sitio web (los embudos no tienen header ni footer). Es la parte de la web donde encontramos el logo, el menú y otros elementos como redes sociales o un campo de búsqueda.

Los ajustes generales de la cabecera los encontramos colocando el ratón encima:

Importante: el header (y también el footer) lo podemos Ocultar o Mostrar individualmente en cada una de las páginas. Asegúrate siempre de que está activo.

Si vamos a Ajustes de cabecera veremos lo siguiente:

Con el menú desplegable Diseño de la cabecera definimos el formato, en la parte superior o en un lateral:

• Parte superior - Tamaño normal
• Parte superior - Ancho completo
• Parte superior - Compacto
• Vertical - a la izquierda
• Vertical - a la derecha

Experimenta con los formatos para ver cuál se ajusta más a tu diseño.

Cuando el header está en la parte superior veremos los siguientes ajustes:

• Color de fondo de la cabecera: a veces lo mejor es que sea transparente.
• Añadir border inferior: se añade una línea con el color que elijamos.
• Colocar cabecera encima del contenido: el header quedará justo encima del primer bloque de cada página y se integrará en el contenido (mejor en color transparente).
• Aplicar cabecera fija al hacer scroll: en este caso podemos diseñar dos headers (uno para cuando se carga la página y otro que quedará fijo mientras hacemos scroll) o bien dejar el mismo header. Para diseñar el segundo header simplemente tenemos que hacer scroll y bajar un poco para modificar el diseño y que quede guardado.

Si el header está en un lateral, la configuración es más simple: solo cambiamos el color del fondo y le añadimos una sombra.

El header tiene áreas donde podemos insertar widgets de contenido a derecha, izquierda o centrados.

También podemos añadir una fila en la parte superior e inferior de la cabecera principal. Cada una de estas filas también está dividida en tres áreas.

Los widgets de la cabecera están limitados a 11, y algunos de ellos son los mismos que encontramos en el menú lateral izquierdo del editor:

• Botón
• Código
• Icono
• Menú
• Búsqueda
• Separador
• Texto
• Redes sociales

Los widgets específicos del header son:

• Logo: que debe estar siempre presente (aunque esté vacío) para mantener el diseño de la web. Para el logo podemos escribir un texto o cargar una imagen cuya altura podremos ajustar.
• Iniciar sesión/perfil: que enlaza con la página del sistema llamada Inicio de sesión/Registro de miembros, en el caso de que hayamos creado una membresía en nuestra web. Es el enlace de acceso al contenido solo accesible a miembros. Aquí simplemente elegimos si queremos solo el icono, o con texto, y el tamaño del icono y los colores del widget, como puedes ver en la imagen de abajo.
• Carrito: enlaza con el carrito donde los usuarios pueden ver los productos pendientes de compra. Los ajustes son los mismos que los del widget anterior.