Constructor de Encabezado y Pie de Página
El chrome del sitio está construido a partir de bloques, de la misma manera que las páginas, y se previsualiza contra los componentes de la tienda. — así que lo que ves en el constructor es literalmente lo que se envía.
Ábrelos desde Contenido → Menús → Constructor de Encabezado / Constructor de Pie de Página.
Cómo funciona
Cada constructor muestra tres cosas: una lista de bloques a la izquierda, una vista previa en vivo en el medio, y los ajustes del bloque seleccionado debajo. Los bloques se pueden reordenar arrastrando, ocultar sin perder sus configuraciones, y eliminar completamente.
La vista previa se renderiza en escritorio, tablet y móvil dentro de un iframe real, así que los puntos de ruptura de Tailwind se comportan exactamente como lo hacen en el sitio en vivo — un contenedor reducido no lo haría.
Los cambios se hacen visibles solo cuando presionas Publicar, y la publicación es visible en la siguiente carga de página.
Bloques de Encabezado
| Bloque | Configuraciones |
|---|---|
| Barra de Anuncio | Mensaje, enlaces de utilidad, enlaces sociales, diseño (expandido / centrado / dividido), estilo (sólido / silencioso / contorno) |
| Logo | Posición y posición móvil, modo de visualización (imagen + texto / imagen / texto), ancho y ancho móvil, retina, URL de logo personalizado y modo oscuro |
| Navegación | Qué menú lo controla, modo (mega / menú desplegable clásico / centro editorial / dividido / riel de desplazamiento / condensado pegajoso), orientación, alineación, abrir al pasar el mouse o al hacer clic, columnas mega, posición, alcance pegajoso, comportamiento de desplazamiento, espaciado, íconos, diseño móvil, migas de pan |
| Búsqueda | Visibilidad (siempre / escritorio / móvil / oculto), posición, posición móvil |
| Cuenta, lista de deseos y carrito | Mostrar u ocultar los íconos de acción |
Comportamiento pegajoso y movimiento de desplazamiento
Dos controles separados, a menudo confundidos:
- Alcance pegajoso — qué se adhiere: nada, solo la fila de la barra superior, solo la fila del menú, o el encabezado completo.
- Al desplazarse — cómo reacciona: mantener como está, ocultar y revelar al desplazarse hacia arriba, o reducir a compacto.
Logos
Establece una URL de logo personalizada por encabezado, y un logo de modo oscuro separado que cambia automáticamente con el tema. Déjalos vacíos para usar el logo de marca de Configuración. El servicio Retina está activado por defecto y se omite automáticamente cuando se establece una URL personalizada, por lo que un par 1x/2x nunca puede desincronizarse.
Bloques de pie de página
Marca y contacto, columnas de menú, boletín, línea legal, texto, imagen, botón, enlaces sociales y divisores. Cada bloque puede ser eliminado y re-agregado, por lo que un pie de página puede ser un mega pie de página de cuatro columnas, una sola línea legal, o cualquier cosa intermedia.
Controles de diseño: composición (dividido / apilado / centrado), ancho de contenido (área de contenido / ancho / completo desbordamiento), relleno y espacio entre secciones.
Los encabezados de las columnas del menú provienen del título configurado de cada menú, y pueden ser sobrescritos por bloque.
Ancho de contenido y alineación
Encabezado, migas de pan, lienzo de página y pie de página leen el mismo marco guardado — área de contenido, ancho, o desbordamiento completo, más un margen lateral opcional. Configúralo una vez en el encabezado y cada superficie pública se alinea con ello.
Diseños preconstruidos
Presiona Plantillas en cualquiera de los constructores. Ocho diseños de encabezado y ocho diseños de pie de página se envían como plantillas del sistema incluyendo Demostración de Consola de Tienda (el pie de página de demo.storeconsole.com de cuatro columnas, que es también el predeterminado en una instalación nueva) y Producción de Consola de Tienda (el aspecto de marca + boletín + letra pequeña). Aplicar uno copia sus bloques en el diseño activo; también puedes guardar tu diseño actual como una plantilla reutilizable.