> ## 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 configurar el componente Hero Generic en una página de tu sitio web en el Editor Web?

> Aprende paso a paso cómo agregar y configurar el componente Hero Generic en una página de tu sitio web en el Editor Web, personalizando imagen, título, texto y botón de llamada a la acción.

# ¿Qué es el componente Hero Generic?

El componente **Hero Generic** permite crear un banner principal destacado en la parte superior del sitio web.

Este componente:

* Solo puede utilizarse en la sección **Página**
* Permite agregar una imagen de fondo
* Incluye título y texto descriptivo
* Permite configurar un botón de llamada a la acción

Es ideal para generar una sección de bienvenida visualmente atractiva y estratégica.

***

## Requisito previo

El Hero Genérico solo puede insertarse dentro de\*\*\*\* una **Página**.
No está disponible para el Header ni para el Footer.

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

***

# Pasos para agregar el Hero Generic

## 1. Accede a la sección Página

Dentro del editor de la página, selecciona la pestaña **"Página"**.

Esto activará el área de componentes globales para páginas.

***

## 2. Abre el menú de componentes

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

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

***

## 3. Busca el componente Hero

En el buscador de componentes, escribe: "Hero"

Selecciona el módulo **"Hero / Genérico"**.

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

***

## 4. Arrastra el componente al Header

Mantén presionado el componente y arrástralo hacia el área del Header.

Suelta el módulo en la zona designada para insertarlo.

***

# Cómo editar el componente Hero

Una vez insertado, puedes personalizar su contenido.

## 5. Abre el panel de edición

Pasa el cursor sobre el componente y haz clic en el ícono de **Editar** (lápiz).

Se abrirá el panel de configuración lateral.

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

***

## 6. Configura el contenido

En la pestaña **"Contenido"**, podrás editar:

### Título

Texto principal que se mostrará sobre la imagen.

### Texto descriptivo

Mensaje secundario o frase complementaria.

Ambos campos permiten formato básico como negrita o cursiva.

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

***

## 7. Configura el botón de llamada a la acción

Activa el interruptor del botón y completa:

* URL de destino
* Texto del botón
* Color de texto
* Color de fondo

El botón puede dirigir a:

* Motor de reservas
* Página interna
* Enlace externo

***

## 8. Cambia la imagen de fondo

En la sección **"Imagen principal"**, haz clic en:

"Seleccionar desde biblioteca"

Podrás:

* Elegir una imagen existente
* Subir una nueva imagen

Recomendación: utiliza imágenes en alta resolución y optimizadas para web.

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

***

## 9. Configuración de traducción

Si tu sitio es multilingüe:

* Mantén desactivado el interruptor **"No traducir"** para permitir traducción automática.
* Actívalo solo si deseas gestionar manualmente los textos en cada idioma.

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

***

## 10. Guarda los cambios

Haz clic en **"Guardar cambios"** para almacenar las modificaciones del componente.

Esto no publica todavía la página.

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

***

## 11. Publica la Página

Para que los cambios sean visibles en el sitio público, haz clic en:

**"Publicar Página"**

Este paso es obligatorio para aplicar definitivamente las modificaciones.

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

***

## Recomendaciones importantes

* Utiliza imágenes horizontales de alta calidad.
* Evita textos demasiado largos.
* Asegúrate de que el botón tenga un llamado a la acción claro.
* Verifica contraste entre texto e imagen para buena legibilidad.
* Recuerda que el Hero impacta visualmente en todas las páginas si es global.

***

## Esta guía responde a estas preguntas

* ¿Qué es el componente Hero Genérico?
* ¿Dónde se puede insertar el Hero?
* ¿Cómo agregar un banner en el Hero?
* ¿Cómo configurar imagen, título y botón?
* ¿Cómo funciona la opción de traducción?
* ¿Por qué debo publicar la Página después de guardar?