> ## 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 funciona la estructura de página y la asignación de componentes en el Editor Web?

> Aprende cómo se organiza la estructura de una página en el Editor Web (Header, Página y Footer) y cómo asignar correctamente los componentes específicos en cada sección para lograr un diseño y funcionamiento óptimos.

# Estructura general del constructor

En el editor visual encontrarás tres pestañas principales:

* **Header (Encabezado)**: Componentes globales superiores.
* **Página (Contenido principal)**: Contenido específico de cada página.
* **Footer (Pie de página)**: Componentes globales inferiores.

Cada sección permite insertar componentes específicos según su función.
Asignar correctamente los módulos en cada área es clave para mantener coherencia visual y correcto funcionamiento del sitio.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/53197770932c075c6a5a63c6bea0b9b8ada4795f8d.png" alt="Imagen" />
</Frame>

***

# Componentes del Header (Encabezado)

El Header contiene elementos visibles en todas las páginas del sitio.

Aquí se configuran componentes como:

* Banner principal (Hero)
* Widget de búsqueda de reservas
* Elementos destacados superiores

***

## Pasos para configurar el Header

### 1. Selecciona la pestaña "Header"

Haz clic en la pestaña **"Header"**.
Se mostrará el área de trabajo correspondiente a los componentes globales superiores.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/15959331999f10a7c6958201bb827a7a75ba8bc928b.png" alt="Imagen" />
</Frame>

***

### 2. Abre el menú de componentes

Haz clic en el ícono **(+)** para abrir el panel de componentes disponibles.

Asegúrate de estar en la sección Header para visualizar los módulos correctos.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/24825635422ff20f30cd8c819a6f763ba97b6291889.png" alt="Imagen" />
</Frame>

***

### 3. Agrega los componentes específicos del Header

Busca y selecciona los siguientes módulos:

* **Hero generic**
* **Booking Search Widget**

Arrástralos al área de trabajo.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/159593381826c4828091a86747b1445081bbfb6c44f.png" alt="Imagen" />
</Frame>

<Warning>
  Estos componentes son exclusivos del Header y no pueden utilizarse en otras secciones.
</Warning>

***

# Componentes del Footer (Pie de página)

El Footer contiene información que se repite en todas las páginas en la parte inferior del sitio.

Ejemplos habituales:

* Información de contacto
* Redes sociales
* Enlaces legales
* Datos corporativos

***

## Pasos para configurar el Footer

### 1. Selecciona la pestaña "Footer"

Haz clic en la pestaña **"Footer"** para acceder al área de componentes globales inferiores.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/14186079224973cb2cbac0661fda79ac5d053843cbe.png" alt="Imagen" />
</Frame>

***

### 2. Abre el menú de componentes

Haz clic en el ícono **(+)** para abrir el panel de módulos.

***

### 3. Agrega el componente Footer

Busca y selecciona el módulo **"Footer"**.

Este componente está diseñado exclusivamente para utilizarse en esta sección.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/70930399083ec5c09ed98f8f805592acb2911b5031.png" alt="Imagen" />
</Frame>

***

# Componentes del cuerpo de la Página (Page)

La sección **"Página"** corresponde al contenido central y específico de cada página.

Aquí puedes agregar:

* Bloques de texto
* Galerías
* Secciones informativas
* Mapas
* Formularios
* Cualquier módulo disponible en el listado general

Excepto los módulos exclusivos de Header y Footer.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/2305238063707fc5b3eee0eabee62b6633cd2c75014.png" alt="Imagen" />
</Frame>

***

# Cómo agregar y publicar componentes

Para insertar cualquier componente, sigue este proceso:

### 1. Selecciona la sección correcta

Elige entre Header, Página o Footer según el tipo de contenido que deseas agregar.

***

### 2. Abre el listado de componentes

Haz clic en el ícono **(+)**.

***

### 3. Arrastra el componente al lienzo

Selecciona el módulo deseado y arrástralo hasta la ubicación donde quieras colocarlo dentro del área de trabajo.

***

### 4. Guarda y publica los cambios

Una vez configurados los componentes:

* Haz clic en **"Guardar"** si corresponde.
* Luego presiona **"Publicar página"** para que los cambios sean visibles en el sitio público.

<Frame>
  <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/177326026109fd9e228e22f8d35c50e2b4085454eec.png" alt="Imagen" />
</Frame>

***

## Recomendación importante

Antes de publicar, verifica:

* Que cada componente esté en la sección correcta.
* Que no estés utilizando módulos exclusivos en áreas incorrectas.
* Que el Header y Footer estén correctamente configurados, ya que afectan todo el sitio.

Una correcta estructura mejora la experiencia del usuario y evita errores visuales.

***

## Esta guía responde a estas preguntas

* ¿Cómo se organiza una página en FW4?
* ¿Cuál es la diferencia entre Header, Página y Footer?
* ¿Qué componentes puedo usar en cada sección?
* ¿Por qué algunos módulos solo funcionan en el Header o Footer?
* ¿Cómo agregar correctamente un componente?
* ¿Cómo publicar los cambios en el sitio?