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

La estructura de su sitio —la barra superior y la barra inferior— aparece en todas las páginas públicas. ArtInStack divide el trabajo en dos lugares que funcionan conjuntamente:

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

El editor de Encabezado y pie de página es un constructor visual independiente (de la misma familia que el editor de páginas) pero limitado exclusivamente a <header> o <footer>. Tiene su propia biblioteca de bloques (no son los bloques de elementos principales, galerías o portafolios que utiliza en las páginas).

Resumen de capacidades

Pestaña Navegación — Organice listas de enlaces (páginas internas o URLs externas) a las que los bloques de menú pueden hacer referencia.
Pestaña Encabezado y pie de página — Cree o seleccione plantillas; Editar abre el editor de plantillas.
Editor de plantillas — Arrastre bloques de Preajustes, Diseño y Elementos de encabezado o Elementos de pie de página; configúrelos con Estilo, Attr y Eventos en la barra lateral derecha (interacciones: Eventos e interacciones del editor de páginas).
Diseño del sitio — Preajustes opcionales aplicados a todo el tema que afectan el estilo general del encabezado y pie de página.

Arquitectura de la interfaz

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

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

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

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

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

Pasos de implementación

Abra Configuración → Navegación.
Añada elementos que apunten a páginas publicadas o URLs externas.
Arrastre para reordenar.
Guarde.

Bloque de menú de navegación (en el editor de plantillas de encabezado)

Cuando coloca un bloque de Menú de navegación en una plantilla de encabezado, abra Attr y elija 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 a mano cada enlace dentro de la plantilla para ese bloque.

Los Preajustes del encabezado (Minimalista, Estándar, Centrado, Multifila) colocan un bloque de Menú de navegación con enlaces de marcador de posición en el lienzo para que pueda evaluar el espaciado.
Conecte el bloque a un menú real en Attr antes de depender del sitio activo; la salida publicada utiliza ese menú, no los marcadores de posición.

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

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

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

Abrir el editor

Configuración → Encabezado y pie de página.
Seleccione una plantilla de encabezado o pie de página (o cree una).
Haga clic en Editar.

Verá un lienzo compacto (banda de encabezado 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, seguido de Estilo, Attr y Eventos bajo Editar.

En qué se diferencia el lienzo de plantillas de las páginas

	Editor de páginas	Editor de plantillas de encabezado/pie de página
Raíz del lienzo	Página completa	Región única de `<header>` o `<footer>`
Biblioteca de bloques	Elementos principales, galerías, productos, …	Bloques exclusivos de encabezado o pie de página
Estructura	Varias secciones habituales	Habitualmente una sección → filas → columnas
Guardar	Por página	Por plantilla (se aplica donde sea que se use dicha plantilla)

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

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

Disponibles en Bloques → Diseño (la misma lógica que en las páginas: sección → fila → columna).

Bloque	Usar para
Sección	La banda del encabezado o pie de página; altura y relleno vertical en Attr
Fila	Diseño horizontal; ancho máximo, espacio entre elementos, diseño de columnas
Espaciador	Espacio vertical fijo entre filas

Utilice Capas cuando necesite seleccionar una fila o sección que se encuentre debajo de otro contenido.

Plantilla de encabezado — Preajustes

Inicios rápidos en Bloques → Preajustes (solo para el editor de encabezado):

Preajuste	Diseño típico
Minimalista	Logotipo a la izquierda; navegación + botón de menú móvil en una columna extensible
Estándar	Logotipo · navegación + botón hamburguesa · carrito (tres columnas)
Centrado	El mismo contenedor de tres columnas que el Estándar, con la navegación centrada en la columna del medio
Multifila	Fila superior: logotipo + título del sitio · navegación · carrito; segunda fila para enlaces secundarios

Los preajustes incluyen un botón de menú móvil junto con la navegación; los enlaces del panel deslizante móvil se rellenan en el momento de la publicación a partir del Menú de navegación que seleccionó en Attr.

Plantilla de encabezado — Elementos

En Bloques → Elementos de encabezado:

Bloque	Usar para
Logotipo	Imagen desde Multimedia o marcador de posición; URL del enlace (predeterminada `/`) y altura en Attr
Título del sitio	Nombre del estudio en texto al lado o en lugar del logotipo
Menú de navegación	Menú horizontal vinculado a un menú de Configuración → Navegación
Enlace de navegación	Enlace manual único (etiqueta personalizada + URL)
Botón CTA	Botón destacado (estilo/tamaño en Attr)
Iconos sociales	Fila de iconos con redes configuradas en Attr
Carrito	Icono del carrito de la tienda cuando el comercio está habilitado (color/tamaño en Attr)
Selector de idioma	Menú desplegable en forma de globo terráqueo para los idiomas publicados; consulte Idiomas multilingües del sitio

Configure la imagen del logotipo y la URL del enlace, la selección del menú, la URL del CTA y las URLs sociales en Attr después de seleccionar el bloque.

Plantilla de pie de página — Preajustes

En Bloques → Preajustes (solo para el editor de pie de página):

Preajuste	Diseño típico
Pie de página sencillo	Copyright a la izquierda, redes sociales a la derecha
Pie de página apilado	Logotipo centrado, enlaces, redes sociales, copyright
Pie de página multicolumna	Varias columnas para enlaces y texto
Pie de página con boletín	Diseño enfocado en suscripciones con columnas

Plantilla de pie de página — Elementos

En Bloques → Elementos de pie de página:

Bloque	Usar para
Columnas de pie de página	Contenedor multicolumna para grupos de enlaces
Columna de pie de página	Una columna dentro de la cuadrícula
Logotipo de pie de página	Logotipo más pequeño para el pie de página; URL del enlace (predeterminada `/`) y altura en Attr
Copyright	Patrón de texto de año automático (`© {year} …`) en Attr
Enlaces sociales	Fila de iconos sociales en el pie de página
Boletín informativo	Interfaz de captura de correos electrónicos (encabezado, webhook y texto en Attr)
Términos y condiciones	Enlace a los términos o a la página de privacidad
Selector de idioma	El mismo menú de globo terráqueo que en el encabezado — Idiomas multilingües del sitio

Diseño del sitio y anulación de páginas

Configuración → Diseño del sitio — Preajustes del tema que pueden afectar el ancho del encabezado o el tono del pie de página en todo el sitio.
Páginas → Editar → Configuración de página — Anulación de la plantilla de encabezado/pie de página por página: Configuración y anulaciones de página.
Lista de comprobación rápida: Administrador de plantillas · Análisis detallado: Trabajar con plantillas de página.

Solución de problemas y errores comunes

Problema	Qué comprobar
El menú se ve mal en el sitio activo	El orden en la pestaña Navegación y a qué menú hace referencia el bloque de Menú de navegación en Attr
El encabezado cambió en todas partes tras una sola edición	Comportamiento esperado: la plantilla de encabezado predeterminada es compartida; use la anulación de página para una página de aterrizaje específica
El panel de bloques no muestra elementos principales ni galerías	Se encuentra en el editor de plantillas; esos bloques solo están disponibles en el editor de páginas
El menú móvil está vacío	Guarde la plantilla de encabezado; confirme que Navegación tiene elementos y que el menú está seleccionado en el bloque de Menú de navegación; vuelva a publicar una página
El logotipo no redirige al inicio	Seleccione el Logotipo (o Logotipo de pie de página) → Attr → configure la URL del enlace (predeterminada `/`) → Guarde la plantilla

Siguientes pasos y validación

Añada al menos tres elementos en Configuración → Navegación.
Edite el encabezado predeterminado → aplique el preajuste Minimalista → configure el Logotipo (imagen + URL del enlace) → conecte el Menú de navegación a su menú en Attr → Guarde.
Edite el pie de página predeterminado → aplique Pie de página sencillo → actualice el Copyright y los Enlaces sociales → Guarde.
Abra dos URLs públicas y confirme que aparece la misma estructura visual.