Encabezado, pie de página y navegación - ArtInStack Documentation

El diseño de tu sitio web —la barra superior y la barra inferior— aparece en todas las páginas públicas. ArtInStack divide la configuración en dos secciones que funcionan conjuntamente:

Lo que configuras	Dónde	Qué controla
Enlaces del menú (URL y orden)	Configuración → Navegación	Qué páginas aparecen en los menús de todo el sitio
Diseño del encabezado y el pie de página	Configuración → Encabezado y pie de página → Editar	Logotipo, diseño, columnas, redes sociales, derechos de autor, boletín informativo, icono del carrito

El editor de encabezado y pie de página es un creador visual independiente (de la misma familia que el editor de páginas), pero su ámbito de aplicación se limita a <header> o <footer> únicamente. Cuenta con su propia biblioteca de bloques, distinta de los bloques de cabecera, galería o portafolio que se utilizan en las páginas.

Resumen de funciones

Pestaña «Navegación»: crea listas de enlaces (páginas internas o URL externas) a las que pueden hacer referencia los bloques de menú.
Pestaña «Encabezado y pie de página»: crea o selecciona plantillas; Editar abre el editor de plantillas.
Editor de plantillas: arrastra los bloques Ajustes predefinidos, Diseño y Elementos de cabecera o Elementos de pie de página; configúralos con Estilo, Atributos y Eventos en la barra lateral derecha (interacciones: Eventos e interacciones del editor de páginas).
Diseño del sitio: ajustes preestablecidos opcionales para todo el tema que afectan al estilo general del encabezado y el pie de página.

Arquitectura de la interfaz

[Configuración → Navegación]
        → elementos del menú (datos para los bloques del menú de navegación)

[Configuración → Encabezado y pie de página → Editar encabezado o pie de página]
        → Área de trabajo del editor de plantillas (región del encabezado O del pie de página)
        → Barra lateral derecha: Editar | Capas | Bloques
              Panel de bloques: Configuraciones predeterminadas, Diseño, Elementos de encabezado/pie de página
        → Guardar plantilla → se aplica a todas las páginas que utilicen esa configuración predeterminada

El contenido del cuerpo de la página sigue procediendo de Páginas → Editar — consulta Referencia de bloques y diseño del editor.

Parte 1 — Menú de navegación (Configuración → Navegación)

Utiliza esta opción cuando necesites añadir, eliminar o reordenar enlaces que aparecen en los bloques de navegación.

Pasos de implementación

Abre Configuración → Navegación.
Añade elementos que apunten a páginas publicadas o a URL externas.
Arrastra para reordenarlos.
Guarda.

Bloque «Menú de navegación» (en el editor de plantillas de cabecera)

Cuando coloques un bloque Menú de navegación en una plantilla de cabecera, abre Attr y elige qué menú guardado utiliza este bloque (Seleccionar un menú). En el momento de la publicación, ArtInStack inserta los enlaces activos desde Configuración → Navegación; no es necesario escribir manualmente cada enlace dentro de la plantilla de ese bloque.

Los ajustes predefinidos del encabezado (Mínimo, Estándar, Centrado, Varias filas) colocan un bloque de Menú de navegación con enlaces de marcador de posición en el lienzo para que puedas evaluar el espaciado. Conecta el bloque a un menú real en Attr antes de basarte en la página web activa: el resultado publicado utiliza ese menú, no los marcadores de posición.

Si un enlace del menú devuelve un error 404 a los visitantes

Enlaza únicamente a páginas publicadas. Las páginas en borrador no son accesibles para los visitantes que no hayan iniciado sesión.

Parte 2 — Editor de plantillas de encabezado y pie de página

Abre el editor

Configuración → Encabezado y pie de página.
Selecciona una plantilla de encabezado o pie de página (o crea una).
Haz clic en Editar.

Verás un lienzo compacto (banda de cabecera o banda de pie de página) y el mismo flujo de trabajo de la barra lateral derecha que en las páginas: Editar / Capas / Bloques, luego Estilo, Atributos, Eventos en Editar.

En qué se diferencia el lienzo de la plantilla del de las páginas

	Editor de páginas	Editor de plantillas de cabecera y pie de página
Raíz del lienzo	Página completa	Una sola `<header>` o `<footer>`
Biblioteca de bloques	Destacados, galerías, productos, …	Bloques solo para cabecera o solo para pie de página
Estructura	Varias secciones comunes	Normalmente una sección → filas → columnas
Guardar	Por página	Por plantilla (se aplica dondequiera que se utilice esa plantilla)

Los cambios en un encabezado o pie de página predeterminado compartido afectan a todas las páginas que lo utilicen; previsualiza en la página de inicio y en una página interior antes de realizar modificaciones importantes.

Bloques de diseño (tanto de cabecera como de pie de página)

Disponibles en Bloques → Diseño (mismo concepto que en las páginas: sección → fila → columna).

Bloque	Se utiliza para
Sección	La franja del encabezado o pie de página; altura y relleno vertical en Atributos
Fila	Diseño horizontal; ancho máximo, separación, diseño de columnas
Separador	Separación vertical fija entre filas

Utiliza Capas cuando necesites seleccionar una fila o sección situada debajo de otro contenido.

Plantilla de encabezado — Preajustes

Guías rápidas en Bloques → Ajustes predefinidos (solo en el editor de cabeceras):

Ajuste predefinido	Diseño típico
Mínimo	Logotipo a la izquierda; barra de navegación + botón de menú móvil en una columna expandible
Estándar	Logotipo · barra de navegación + menú tipo «hamburguesa» · carrito (tres columnas)
Centrado	La misma estructura de tres columnas que la del Estándar, con la barra de navegación centrada en la columna del medio
Varias filas	Fila superior: logotipo + título del sitio · barra de navegación · carrito; segunda fila para enlaces secundarios

Los ajustes preestablecidos incluyen un botón de menú móvil junto a la barra de navegación; los enlaces del menú deslizante para móvil se rellenan al publicar a partir del Menú de navegación que hayas seleccionado en Atributos.

Plantilla de cabecera — Elementos

En Bloques → Elementos de cabecera:

Bloque	Se utiliza para
Logotipo	Imagen de Multimedia o marcador de posición; URL del enlace (por defecto `/`) y altura en Attr
Título del sitio	Texto con el nombre del estudio junto al logotipo o en su lugar
Menú de navegación	Menú horizontal vinculado a un menú de Configuración → Navegación
Enlace de navegación	Enlace único manual (etiqueta personalizada + URL)
Botón CTA	Botón destacado (estilo/tamaño en Atributos)
Iconos sociales	Fila de iconos con redes configuradas en Atributos
Carrito	Icono del carrito de la tienda cuando el comercio está habilitado (color/tamaño en Atributos)

Configura la imagen del logotipo y la URL del enlace, la selección del menú, la URL de la llamada a la acción y las URL de redes sociales en Atributos tras seleccionar el bloque.

Plantilla de pie de página — Plantillas predefinidas

En Bloques → Plantillas predefinidas (solo en el editor de pie de página):

Plantilla predefinida	Diseño típico
Pie de página sencillo	Aviso de derechos de autor a la izquierda, redes sociales a la derecha
Pie de página apilado	Logotipo centrado, enlaces, redes sociales, copyright
Pie de página de varias columnas	Varias columnas para enlaces y texto
Pie de página para boletín	Diseño centrado en la suscripción con columnas

Plantilla de pie de página — Elementos

En Bloques → Elementos del pie de página:

Bloque	Se utiliza para
Columnas del pie de página	Estructura de varias columnas para grupos de enlaces
Columna del pie de página	Una columna dentro de la cuadrícula
Logotipo del pie de página	Logotipo más pequeño para el pie de página; URL del enlace (por defecto `/`) y altura en Attr
Copyright	Patrón de texto con año automático (`© {año} …`) en Attr
Enlaces a redes sociales	Fila de iconos de redes sociales en el pie de página
Boletín informativo	Interfaz de usuario para la captura de direcciones de correo electrónico (encabezado, webhook y texto en Atributos)
Términos y condiciones	Enlace a la página de términos o de privacidad

Diseño del sitio y personalizaciones de página

Configuración → Diseño del sitio — Ajustes predefinidos del tema que pueden afectar al ancho del encabezado o al color del pie de página en todo el sitio.
Páginas → Editar → Configuración de la página — Modificación de la plantilla de cabecera/pie de página por página: Configuración y modificaciones de las páginas.
Lista de comprobación rápida: Gestor de plantillas · Información detallada: Trabajar con plantillas de página.

Solución de problemas y errores habituales

Problema	Qué comprobar
El menú no se ve bien en el sitio web en producción	Orden de la pestaña Navegación + a qué menú hace referencia el bloque Menú de navegación en Atributos
El encabezado ha cambiado en todas partes tras una edición	Es lo esperado: la plantilla de encabezado predeterminada es compartida; utiliza la sustitución de página para una página de destino
Faltan los bloques «Hero» y «Galerías» en el panel de bloques	Estás en el editor de plantillas; esos bloques solo se encuentran en el editor de páginas
El menú móvil está vacío	Guarda la plantilla de cabecera; comprueba que Navegación tenga elementos y que el menú esté seleccionado en el bloque Menú de navegación; vuelve a publicar la página
El logotipo no lleva a la página de inicio	Selecciona el Logotipo (o Logotipo del pie de página) → Attr → configura la URL del enlace (por defecto `/`) → Guarda la plantilla

Próximos pasos y validación

Añade al menos tres elementos en Configuración → Navegación.
Edita el encabezado predeterminado → aplica el preajuste Minimal → configura el Logotipo (imagen + URL del enlace) → vincula el Menú de navegación a tu menú en Atributos → Guarda.
Edita el pie de página predeterminado → aplica Pie de página sencillo → actualiza el Copyright y los Enlaces a redes sociales → Guarda.
Abre dos URL públicas y comprueba que se muestra el mismo diseño.</footer></header></footer></header>