Saltar al contenido principal

Header y footer del sitio

El header es la franja de arriba que aparece en todas las páginas: tu marca, el menú. El footer es el pie: contacto, redes, el aviso de derechos. Son la parte más vista de tu sitio, porque están en cada página.

Ahora se editan igual que una página: arrastrando bloques, con los mismos ajustes de estilo y viéndolos en su lugar.

Editarlos​

Hay dos caminos, y llegan al mismo lugar:

  1. Desde una página que estés editando. En el lienzo, pasa el mouse por el header (o el footer) y pulsa Editar header. El header pasa a ser lo editable y la página queda de fondo, como contexto: así ajustas el menú viéndolo sobre contenido real.
  2. Desde arriba de Páginas Web. Los botones Header y Footer abren el editor directamente en ese documento.

Para volver, el botón de guardar dice Guardar y volver: guarda el header y te devuelve a la página, con los cambios que tenías sin guardar intactos.

Mientras lo editas, el header y el footer se dibujan donde van de verdad: a todo el ancho y sobre el contenido de la página, no dentro de la hoja blanca en que se edita una página. Es lo que hace falta para ajustar un menú que flota encima de una foto grande: si se editara sobre blanco, unos enlaces blancos serían invisibles justo donde hay que moverlos.

Un header se ve en muchas páginas

Guardar un header o un footer cambia todas las páginas donde se muestra, no sólo la que tienes abierta. El editor te lo recuerda antes de guardar y te dice en cuáles se va a aplicar.

La primera vez​

Si nunca los habías editado visualmente, al abrirlos el editor te ofrece crear uno visual: parte de una base con bloques ya armados (tu marca y un menú en el header; el aviso de derechos en el footer) que puedes cambiar de inmediato.

Si tu sitio traía un header escrito en código de una versión anterior, la primera vez que se abre una página pública se convierte solo en un documento visual publicado para todo el sitio, con el nombre Header importado. Se ve exactamente igual que antes y ya puedes editarlo con bloques. Nada se pierde en la transición.

Dónde se muestra cada uno​

Puedes tener más de un header y más de un footer: un menú completo para el sitio y otro más limpio para las páginas de campaña, por ejemplo.

Cada documento responde una pregunta: ¿dónde se muestra?

OpciónQué significa
Todo el sitioEn todas las páginas publicadas
Todo el sitio, con excepcionesEn todas, menos las que marques
Solo en páginas específicasÚnicamente en las que elijas

Se elige con el botón ¿Dónde se muestra? mientras lo editas, o con el icono de ubicación en la lista de headers y footers.

Cuál gana cuando hay dos​

Siempre gana el más específico. Si tienes un header para todo el sitio y otro sólo para productos, la página de productos muestra el segundo y todas las demás el primero. No hay que excluir nada a mano.

Si dos documentos reclaman exactamente el mismo lugar, el editor te lo avisa mientras eliges y te dice cuál gana (el guardado más recientemente), para que lo resuelvas ahí y no descubras el choque en el sitio publicado.

No se puede publicar sin responder

El primer header del sitio se aplica a todo el sitio, que es lo único que tendría sentido. Desde el segundo en adelante, el editor te pide decir dónde va antes de publicarlo: dos headers compitiendo en silencio es la forma más rápida de que una página muestre el menú equivocado.

La lista de headers y footers​

El botón de lista, junto a Header y Footer, abre todos los documentos del sitio. Cada uno aparece como una tarjeta con su nombre, en palabras dónde se aplica —"Todo el sitio", "Solo: productos"— y cuatro acciones: Editar el contenido, cambiar dónde se muestra, dejarlo en blanco y eliminarlo.

Si todavía no tienes ninguno, esa sección te ofrece crearlo ahí mismo en vez de dejarte buscando el botón.

Dejar uno en blanco​

La goma de borrar de cada tarjeta borra todo su contenido y deja el documento vacío. El header sigue existiendo —con su nombre y con las páginas donde se muestra—, pero no dibuja nada: esas páginas quedan sin header.

Vaciar y eliminar no son lo mismo, y la diferencia es toda:

Qué pasa con las páginas donde se mostraba
Dejarlo en blancoQuedan sin header (o sin footer). No se ve nada arriba.
EliminarloVuelven al siguiente que corresponda: otro documento tuyo, o el que trae el sistema.
Quiero un sitio sin header

Entonces es dejarlo en blanco, no eliminarlo. Si lo eliminas vuelve el menú oscuro que trae el sistema.

Y si todavía no tienes ningún header, la lista te ofrece Dejar en blanco igual: crea uno vacío para todo el sitio, que es lo que hace desaparecer el del sistema.

Eliminar uno​

Antes de borrar, el editor dice qué va a pasar con las páginas afectadas: pasarán al siguiente que corresponda —otro documento visual, o el que trae el sistema—. Una página nunca queda sin header ni sin footer por eliminar uno; para eso está dejarlo en blanco.

Dónde comprobar que quedó guardado​

Apenas guardas, la vista previa de Páginas Web —la banda de abajo— vuelve a dibujarse con el header y el footer que de verdad se están publicando. Si ahí sigue apareciendo el anterior, es que el guardado no llegó a pasar: no hace falta abrir el sitio para saberlo.

El aviso verde del guardado aparece debajo de la barra de herramientas, de modo que puedes seguir guardando cambios seguidos sin esperar a que se vaya.

Un solo lugar donde se editan​

Hasta hace poco la lista de páginas mostraba además un Header y un Footer fijos, escritos en código, heredados de antes de que existiera este editor. Ya no están: había dos entradas llamadas igual, se tapaban entre sí y editar la equivocada no cambiaba nada en el sitio.

Ahora el único lugar donde se hacen y se editan es con los botones Header y Footer de la barra de arriba. Si tenías uno escrito en código, ya está convertido —lo explica La primera vez— y lo abres desde ahí como cualquier otro.

¿Y si el tuyo tenía código PHP?

Un header visual se publica tal cual, así que no admite PHP. Si el tuyo lo usaba —por ejemplo para imprimir el nombre del sitio—, no se convierte ni se borra: queda apartado como header.php.bak en el servidor y el sitio pasa a mostrar el header que trae el sistema. Vuelve a armarlo con bloques y usa el bloque HTML libre para lo que necesites escribir a mano.

Para quien arma sitios completos

Un header o un footer se puede crear también desde la línea de comandos, con tools/make-theme-doc.php, y llega al panel igual de editable que uno hecho acá: mismos bloques, misma lista, mismas condiciones. El detalle está en la guía para desarrolladores.

¿Qué sigue?​