> ## Documentation Index
> Fetch the complete documentation index at: https://ayuda.pxsol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ¿Cómo agregar y configurar un Header en el Editor Web?

> Aprende cómo agregar, editar y publicar el módulo de Header en tu sitio web desde el editor.

## 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**.

<Note>
  ### Antes de comenzar

  Antes de continuar, asegúrate de tener:

  * Acceso al **Editor Web**.
  * Permisos para **editar y publicar componentes del sitio**.
</Note>

## ¿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.

<Steps>
  <Step title="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**.

    <Frame caption="Pestaña Header seleccionada en el editor web.">
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/15963785073c9119ec75a7c08dd7c46cb15a53fa7f0.png" alt="Pestaña Header seleccionada en el editor web" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame caption="Búsqueda y arrastre del componente Header desde el panel.">
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/35475078124c43d07f43e0dff5e59cfd8b63ff9130.png" alt="Agregar el componente Header desde el panel de componentes" />
    </Frame>
  </Step>

  <Step title="Edita el Header">
    Una vez agregado el componente, haz clic en el botón **Editar** que aparece sobre él.

    <Frame caption="Botón para editar las propiedades del componente Header.">
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/70950167768f1b36a55aa60efddc4918ecc94e100c.png" alt="Botón para editar el componente Header" />
    </Frame>

    Se abrirá un panel de configuración donde podrás modificar los siguientes elementos:

    <AccordionGroup>
      <Accordion title="Identidad visual">
        * **Logo**: Sube la imagen de tu marca que se mostrará en el header.
      </Accordion>

      <Accordion title="Información de contacto">
        * **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.
      </Accordion>

      <Accordion title="Redes sociales">
        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.
      </Accordion>

      <Accordion title="Opciones de visualización">
        * **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).
      </Accordion>

      <Accordion title="Botón de acción (CTA)">
        * **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.
      </Accordion>

      <Accordion title="Navegación y estilo">
        * **Estilo visual**: Configura el gradiente de color de la barra superior.
        * **Navegación del sitio**: Define los enlaces personalizados del menú principal, como "Inicio", "Servicios" o "Contacto".
      </Accordion>
    </AccordionGroup>

    <Frame caption="Panel de configuración del Header con todas las opciones disponibles.">
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/26606315160dc232eb8cb101215c804b7b1441277c2.png" alt="Panel de configuración del Header con todas las opciones" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame caption="Botones para guardar y publicar los cambios del Header.">
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/1241628133227520b23d03dbf5136dc0b3159ac94c6.png" alt="Botones para guardar y publicar los cambios del Header" />
    </Frame>
  </Step>
</Steps>

<Check>
  ### 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.
</Check>

<Warning>
  ### 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.
</Warning>

<Info>
  ### 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?
</Info>