# Page Builder

El Page Builder es un editor visual donde diseñas las páginas de tu tienda. Funciona como un lienzo de arrastrar y soltar: agregas bloques de contenido (llamados **secciones**), personalizas la apariencia de tu barra de navegación y los colores del tema, y ves una vista previa en vivo del resultado antes de publicar.

Cada tienda comienza con una página de **Inicio**. También puedes crear páginas personalizadas (por ejemplo, Sobre Nosotros, Contacto, Promociones) que obtienen su propia URL en tu tienda.

## Gestión de páginas

Abre **Pages** en la barra lateral del admin para ver todas las páginas de tu tienda. La página de Inicio siempre aparece primero.

![Pages list](/features/page-builder/pages-list.png)

| Columna    | Descripción                                      |
| ---------- | ------------------------------------------------ |
| Name       | El título de la página mostrado en el admin      |
| Slug       | La ruta URL en tu tienda (por ejemplo, `/about`) |
| Status     | **Active** (visible en la tienda) o **Inactive** |
| Created At | Fecha de creación de la página                   |

Desde esta pantalla puedes:

- **Crear una página** — haz clic en **New Page** en la esquina superior derecha. Esto abre el builder con una página en blanco.
- **Editar una página** — haz clic en el nombre de la página o elige **Edit** en el menú de acciones. Esto abre el builder con esa página cargada.
- **Activar / Desactivar** — cambia la visibilidad desde el menú de acciones o usa las casillas de selección masiva.
- **Eliminar** — elimina una página desde el menú de acciones o de forma masiva.

> **Importante:** La página de Inicio no se puede eliminar ni renombrar desde esta pantalla. Sus metadatos se gestionan en la configuración de la tienda.

## Abrir el builder

Cuando haces clic en **New Page** o **Edit**, el Page Builder se abre en un diseño de pantalla completa:

![Builder overview](/features/page-builder/builder-overview.png)

El builder tiene tres áreas principales:

| Área                     | Descripción                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| Barra lateral primaria   | Una barra estrecha de iconos en el extremo izquierdo con cuatro botones de panel (de arriba a abajo): Metadata, Sections, Navbar, Theme |
| Barra lateral secundaria | Los controles del panel activo, donde editas contenido, configuración o estilos                                                         |
| Vista previa en vivo     | Un iframe que muestra tu página exactamente como la verán los clientes. Se actualiza en tiempo real a medida que haces cambios          |

La **barra superior** contiene:

| Control            | Descripción                                                             |
| ------------------ | ----------------------------------------------------------------------- |
| Back               | Regresa a la lista de páginas (advierte si tienes cambios sin guardar)  |
| Selector de página | Desplegable para cambiar entre páginas sin salir del builder            |
| Cambio de viewport | Alterna entre tamaños de vista previa Desktop, Tablet y Mobile          |
| Discard            | Revierte todos los cambios no guardados al instante                     |
| Save               | Abre un diálogo de confirmación y luego guarda todo en la base de datos |

## Metadatos de la página

Haz clic en el **icono de documento** (primer icono en la barra lateral primaria) para abrir el panel de metadatos. Para páginas nuevas, este panel se abre automáticamente.

![Metadata panel](/features/page-builder/metadata-panel.png)

| Campo       | Descripción                                                                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Name        | El título de la página (obligatorio). Al crear una nueva página, cambiar el nombre genera automáticamente un slug                          |
| Slug        | La ruta URL de la página (obligatorio). Solo se permiten letras minúsculas, números y guiones                                              |
| Description | Una descripción opcional para propósitos de SEO. También puedes usar el botón **AI Generate** si las integraciones de IA están habilitadas |
| Published   | Activa o desactiva para hacer la página visible en la tienda                                                                               |

> **Consejo:** La vista previa del slug debajo del campo muestra la ruta URL completa (por ejemplo, `/about-us`). Una vez que editas manualmente el slug, deja de generarse automáticamente a partir del nombre.

Para la **página de Inicio**, el panel de metadatos muestra un aviso de solo lectura: el nombre y la descripción de la página de inicio se gestionan desde la configuración general de la tienda.

## Trabajar con secciones

Haz clic en el **icono de capas** (segundo icono en la barra lateral primaria) para abrir el panel de secciones. Aquí es donde agregas y organizas los bloques de contenido.

![Sections panel](/features/page-builder/sections-panel.png)

Cada sección en la lista muestra su icono de tipo y etiqueta. Puedes:

- **Agregar una sección** — haz clic en **Add Section** y elige del menú desplegable
- **Reordenar** — arrastra las secciones hacia arriba o abajo usando el control de agarre a la izquierda
- **Expandir / Contraer** — haz clic en el nombre de una sección para revelar su configuración
- **Alternar visibilidad** — usa el interruptor para mostrar u ocultar una sección sin eliminarla
- **Eliminar** — haz clic en el icono de papelera (requiere confirmación)

![Add section menu](/features/page-builder/add-section-menu.png)

Hay seis tipos de sección disponibles:

| Tipo            | Ideal para                                            |
| --------------- | ----------------------------------------------------- |
| Slideshow       | Banners principales, promociones, contenido destacado |
| Product List    | Mostrar productos específicos                         |
| Collection      | Destacar una colección de productos                   |
| Image with Text | Narrativa, mensajes de marca, características         |
| Text            | Anuncios, descripciones, políticas                    |
| Space           | Espacio visual entre secciones                        |

## Personalizar la barra de navegación

Haz clic en el **icono de panel superior** (tercer icono en la barra lateral primaria) para abrir el panel de personalización de la barra de navegación.

![Navbar panel](/features/page-builder/navbar-panel.png)

> **Importante:** Los cambios en la barra de navegación se aplican globalmente a **todas** las páginas, no solo a la que estás editando actualmente.

| Configuración   | Descripción                                                                          |
| --------------- | ------------------------------------------------------------------------------------ |
| Show Logo       | Activa o desactiva el logo de la tienda en la barra de navegación                    |
| Show Store Name | Activa o desactiva el texto del nombre de la tienda junto al logo                    |
| Logo Size       | Elige entre sm, md, lg, xl o 2xl                                                     |
| Text Style      | Configura el tamaño de fuente del nombre de la tienda, negrita y cursiva             |
| Position        | Alinea el logo y el nombre de la tienda a la **izquierda**, **centro** o **derecha** |

## Personalizar el tema

Haz clic en el **icono de paleta** (cuarto icono en la barra lateral primaria) para abrir el panel de personalización del tema.

![Theme panel](/features/page-builder/theme-panel.png)

> **Importante:** Los cambios del tema se aplican globalmente a **todas** las páginas, no solo a la que estás editando actualmente.

**Controles de modo:**

| Configuración | Descripción                                         |
| ------------- | --------------------------------------------------- |
| Light Mode    | Habilitar o deshabilitar el esquema de color claro  |
| Dark Mode     | Habilitar o deshabilitar el esquema de color oscuro |

Al menos un modo debe permanecer habilitado en todo momento.

**Campos de color (10 por modo):**

| Color               | Qué controla                            |
| ------------------- | --------------------------------------- |
| Primary Color       | Botones, enlaces y elementos de acento  |
| Secondary Color     | Elementos secundarios de la interfaz    |
| Tertiary Color      | Color de acento adicional               |
| Background Color    | Fondo de la página                      |
| Menu Bar Color      | Fondo de la barra de navegación         |
| Menu Bar Text Color | Texto de la barra de navegación         |
| Input Background    | Campos de entrada de formularios        |
| Text Color          | Texto principal del cuerpo              |
| Banner Background   | Fondo de la barra de banner promocional |
| Banner Text Color   | Texto de la barra de banner promocional |

**Fuente:**

| Configuración | Descripción                                                                   |
| ------------- | ----------------------------------------------------------------------------- |
| Font Family   | Elige una fuente global de las fuentes del sistema y Google Fonts disponibles |

## Guardar y publicar

Cuando estés satisfecho con tus cambios, haz clic en **Save** en la esquina superior derecha. Aparece un diálogo de confirmación:

![Save dialog](/features/page-builder/save-dialog.png)

- Si la página está **publicada** (activa), el diálogo confirma que estás publicando cambios en vivo.
- Si la página es un **borrador** (inactiva), el diálogo confirma que estás guardando sin hacer la página pública.

El proceso de guardado sube todas las imágenes pendientes, crea la página (si es nueva) y guarda las secciones, la configuración de la barra de navegación, la configuración del tema y los metadatos de la página, todo de una vez.

Haz clic en **Discard** en cualquier momento para revertir todos los cambios no guardados al último estado guardado.

## Cómo aparecen las páginas en la tienda

### Página de Inicio

La página de inicio es lo primero que ven los visitantes. Renderiza todas las secciones activas en el orden que definiste en el builder.

![Storefront home page](/features/page-builder/storefront-home.png)

### Páginas personalizadas

Las páginas personalizadas son accesibles en su URL de slug (por ejemplo, `tutienda.com/about`). Se renderizan de la misma manera que la página de inicio: cada sección activa aparece en orden.

![Storefront custom page](/features/page-builder/storefront-custom-page.png)

Solo las páginas **activas** con el interruptor **Published** habilitado son visibles en la tienda. Las páginas inactivas devuelven un error 404.

Las páginas personalizadas también aparecen en el menú de navegación móvil y en el pie de página de la tienda, haciéndolas fáciles de encontrar para los clientes.