Skip to main content

​
Introducción

El Header es la sección superior de tu sitio web. Desde aquí, los visitantes pueden ver la identidad de tu marca y acceder a las principales secciones del sitio. Desde el editor web puedes:
  • Agregar un header a tu página.
  • Configurar el logo y los datos de contacto.
  • Activar los íconos de redes sociales.
  • Personalizar el menú de navegación.
  • Definir comportamientos visuales, como el header fijo al hacer scroll.

​
Antes de comenzar

Antes de continuar, asegúrate de tener:
  • Acceso al Editor Web.
  • Permisos para editar y publicar componentes del sitio.

​
¿Dónde se encuentra esta función?

Puedes acceder a esta función desde el Menú principal → Editor web → Página seleccionada → pestaña Header.

​
Cómo agregar y configurar el Header

Sigue estos pasos para añadir y personalizar el header de tu sitio.
1

Posiciónate en la pestaña Header

Dentro del editor web, al editar una página, asegúrate de estar en la pestaña Header.
Pestaña Header seleccionada en el editor web
2

Agrega el componente

En la parte superior izquierda, haz clic en el botón “+” para abrir el panel de componentes. Luego:
  1. Escribe header en el buscador.
  2. Ubica el módulo Header.
  3. Arrástralo hacia la página para agregarlo.
Agregar el componente Header desde el panel de componentes
3

Edita el Header

Una vez agregado el componente, haz clic en el botón Editar que aparece sobre él.
Botón para editar el componente Header
Se abrirá un panel de configuración donde podrás modificar los siguientes elementos:
  • Logo: Sube la imagen de tu marca que se mostrará en el header.
  • Teléfono: Ingresa el número de contacto principal.
  • Email: Ingresa la dirección de correo electrónico de contacto.
  • Mostrar/Ocultar: Activa o desactiva la visibilidad de estos datos.
Agrega los enlaces a tus perfiles de Instagram, Twitter, Facebook, LinkedIn y YouTube. También puedes definir si se muestran o no en el header.
  • Mostrar búsqueda: Habilita una barra de búsqueda en el header.
  • Mostrar menú móvil: Activa el menú de navegación para dispositivos móviles.
  • Header fijo al hacer scroll: Fija el header en la parte superior de la pantalla mientras el usuario se desplaza (sticky header).
  • Texto del botón: Define el texto del botón de llamada a la acción.
  • Enlace del botón: Asigna la URL de destino.
  • Mostrar/Ocultar: Controla la visibilidad del botón.
Panel de configuración del Header con todas las opciones
4

Guarda y publica los cambios

Una vez completada la configuración del header:
  1. Haz clic en Guardar cambios para salvar tu trabajo.
  2. Luego haz clic en Publicar header para aplicar las modificaciones en todo el sitio web.
Botones para guardar y publicar los cambios del Header

​
Resultado esperado

Al completar estos pasos, el header estará visible y configurado en tu sitio. Verificarás que:
  • El header aparece correctamente en todas las páginas.
  • Se muestra el logo y la información de contacto configurada.
  • El menú de navegación y los enlaces a redes sociales funcionan como se espera.
  • Las opciones visuales, como el header fijo, se aplican correctamente.

​
Consideraciones importantes

  • El header es un componente global. Cualquier cambio se reflejará en todas las páginas de tu sitio web.
  • Debes hacer clic en Guardar cambios y luego en Publicar header para que tus modificaciones sean visibles para los visitantes.
  • Si desactivas un elemento como el botón de acción o las redes sociales, no se mostrarán en el header publicado.

​
Preguntas que responde esta guía

  • ¿Cómo agregar un header en una página?
  • ¿Dónde se configura el logo y los datos de contacto del header?
  • ¿Cómo activar las redes sociales o el menú móvil?
  • ¿Cómo publicar los cambios del header en todo el sitio?