Header o Encabezado
Estilos y ajustes suaves disponibles dentro del tema Astra. Tanto para el header como los menús internos
Espaciados del header – Escritorio
Espaciados ajustables dentro del header y del menú superior
Secciones y adaptabilidad de medidas
*En Astra, el header cuenta con hasta 3 secciones: 2 laterales y Una Central. Cuando se usan las 3, Las Secciones latereles siempre medirán lo mismo, la sección central no necesariamente será más pequeña que las laterales, pero su crecimiento está limitado por la condición de que las secciones laterales deben mantenerse del mismo tamaño.
*El espacio entre secciones (Morado), sin contar relleno interno, siempre es de 20px. No es ajustable. Nótese que el menú cuenta con relleno interno, por ello no toca el borde de las secciones (Caso contrario del nombre del sitio)
**Si sólo se utilizan 2 secciones, estas pueden tener cualquier medida (Caso Eventos Fuzion)
Crecimiento y espaciado de Secciones
Como se observa, la secciones laterales mantienen el mismo ancho, mientras que la sección central crece, de ser necesario, en la medida de lo que permitan los elementos laterales
Espaciados del Menú – Escritorio
Espaciados entre elementos del menú dentro de las secciones.
Separación entre elementos del menú
El relleno interno para los elementos en el menú corresponde a 16px laterales, dando un total de 32px entre cada elemento o página del menú y 16px para los elementos que se encuentran en los bordes.
Ojo: Si contamos el espaciado (20px) entre secciones, habrían 36px entre el icono del sitio y el enlace a la página de Home en el menú
Mucho Ojo: Cambiar estos espaciados rompe la estética de submenús y altera la altura general del header, produce mucho trabajo extra, no se recomienda modificarlos a menos que sea estrictamente necesario, o no hayan elementos anidados en submenús.
Submenú
Los elementos en submenús, utilizan relleno (Padding) de 16px para los laterales y 14px para arriba y abajo, como se muestra en la zona verde, tratar de cambiar estos valores altera las medidas del menú superior, por lo que no se recomienda a menos que sea muy necesario.
*Se puede fijar el ancho del submenú sin ningún problema, independientemente de la longitud del texto de los elementos. El ancho predeterminado es de 240px (Aquí se fijó a 340) Si el texto desborda, va a la siguiente línea.
**El alto de cada elemento en el submenú se determina por el alto de línea del texto y los 28px de relleno vertical (aquí da 52), es decir: Alto de línea + 28px.
Iconos en Header
Estilos y opciones disponibles para el los widgets usuales del header
Diseño del botón de carrito
Colores y botones personalizables | Posibilidad de añadir borde o relleno, ambos con radio
Etiqueta del botón carrito
Posibilidad de colocar el total, número de productos o alguna etiqueta personalizada. | Permite Colocar la etiqueta a Izq, Der, y Debajo
Lupa o Icono de búsqueda
*Se puede utilizar cualquier icono o imagen para la lupa, ya sea propia o del sistema
*También nos permite establecer un ancho específico para el buscador. La medida predeterminada cambia de acuerdo al estilo de la barra
Estilos de barra de búsqueda
Se puede ajustar el comportamiento de la barra de búsqueda además del ancho del buscador, los estilos disponibles van en orden de acuerdo a las capturas de la izquierda:
Slide Search: El espacio de la barra permanece oculto hasta que hacemos click en el icono de búsqueda. La barra desplegada puede tapar algunos elementos del menú, ya que es flotante. Ideal cuando hay poco espacio en el header. La barra de búsqueda extendida mide 235 x 42px de manera predeterminada.
Full Screen Search: La barra de búsqueda permanece oculta, y aparece al hacer click en el icono de la lupa, en una capa translúcida que cubre el sitio web en su totalidad. Sólo ocupa el espacio del icono de búsqueda en el header.
Header Cover Search: La barra de búsqueda permanece oculta y aparece al dar click en el icono de búsqueda, cubriendo el header en su totalidad.
Search Box: La barra de búsqueda y el icono permanecen visibles y ocupando espacio, miden 201x40px de manera predeterminada
