Capítulo 4: El Builder — Editor Visual

Cómo usar el editor Puck de PageGenius: agregar widgets, editar contenido, manejar páginas, guardar, publicar, SEO, y traducir.

---

4.1 Layout del Builder

+-------------------------------------------------------------------+
|  HEADER BAR                                                       |
|  [← Volver]  Mi Proyecto  [Home] [About] [+]  [💾 Guardar] [🚀] |
+-------------------------------------------------------------------+
|                                                                   |
|  +-- Sidebar (Widgets) ----+  +-- CANVAS (Edición) --------+   |
|  |                          |  |                             |   |
|  | BÚSQUEDA                 |  |  ┌─────────────────────┐   |   |
|  | [________________]       |  |  │   HERO              │   |   |
|  |                          |  |  │   Título grande     │   |   |
|  | WIDGETS                  |  |  │   [Botón]            │   |   |
|  | [Hero] [Texto] [Botón]   |  |  └─────────────────────┘   |   |
|  | [Mapa] [Form] [FAQ] ...  |  |  ┌─────────────────────┐   |   |
|  |                          |  |  │   SERVICIOS         │   |   |
|  |                          |  |  │   • Servicio 1       │   |   |
|  |                          |  |  │   • Servicio 2       │   |   |
|  |                          |  |  └─────────────────────┘   |   |
|  |                          |  |  ┌─────────────────────┐   |   |
|  |                          |  |  │   FORMULARIO        │   |   |
|  |                          |  |  │   [Nombre________] │   |   |
|  |                          |  |  │   [Email__________] │   |   |
|  |                          |  |  │   [Enviar]          │   |   |
|  |                          |  |  └─────────────────────┘   |   |
|  +--------------------------+  +----------------------------+   |
|                                                                   |
|  FOOTER BAR                                                       |
|  [Ver Preview]  [Publicar]  ⚙️ Config  🤖 AI Assistant            |
+-------------------------------------------------------------------+

Zonas explicadas

Screenshot real:

---

4.2 Agregar Widgets al Canvas

Método 1: Arrastrar y Soltar (Drag & Drop)

1. En el sidebar, agarrá un widget (ej: "Hero")
2. Arrastralo al canvas
3. Soltalo donde querés que vaya (arriba, abajo, o entre otros widgets)

Método 2: Clic para Agregar

1. Clic en un widget del sidebar
2. Se agrega automáticamente al final del canvas
3. Después lo movés arrastrándolo

Ordenar widgets

En el canvas, cada widget tiene un handle (dos líneas horizontales ☰) en la parte superior izquierda. Agarrá ese handle y arrastrá el widget arriba o abajo.

---

4.3 Editar un Widget

Clic en cualquier widget del canvas. Se abre un panel lateral derecho con las propiedades de ese widget.

Estructura típica de propiedades

+-- Panel de Propiedades --------+
|  HERO                          |
|                                |
|  Content                       |
|  Title: [Título del negocio]   |
|  Subtitle: [Subtítulo]         |
|  Button text: [Llamar Ahora]   |
|  Button link: [tel:+1234]      |
|                                |
|  Style                         |
|  Variant: [Gradient Blue ▼]    |
|  Align: [Center ▼]             |
|  Background: [Image ▼]         |
|                                |
|  Actions                       |
|  [🗑 Eliminar] [📋 Duplicar]     |
+--------------------------------+

Tipos de campos de propiedades

---

4.4 Páginas Múltiples

PageGenius soporta sitios multi-página reales.

Crear una página nueva

1. En el header bar, clic en el "+" al lado de las tabs
2. Escribí el nombre de la página: "About", "Services", "Contact"
3. Elegí si querés:
4. Página en blanco
5. Generar con IA (la IA arma la página basada en tu proyecto)
6. Clic en "Crear"

Cambiar entre páginas

Clic en la tab de la página que querés editar. El canvas se actualiza instantáneamente.

Reordenar páginas

Arrastrá las tabs izquierda/derecha para cambiar el orden. Esto afecta:

• El orden en la navegación del sitio publicado
• El orden en el sitemap.xml

Renombrar una página

1. Clic derecho en la tab → "Renombrar"
2. O: clic en ⚙️ Config → Páginas → editá el nombre

Eliminar una página

1. Clic derecho en la tab → "Eliminar"
2. Confirmación: "¿Eliminar 'About' y todo su contenido?"

Nota: No podés eliminar la página Home. Es obligatoria.

Slug / Path de la página

Cada página tiene una URL dentro de tu proyecto:

• Home → / (raíz)
• About → /about
• Services → /services
• Contact → /contact

Para cambiarlo: ⚙️ Config → Páginas → editá el campo "Path".

---

4.5 Guardar vs. Publicar

Guardar (Ctrl/Cmd + S)

• Guarda automáticamente cada 3 segundos si estás editando
• También guarda manual con Ctrl/Cmd + S
• Un toast verde dice "Guardado" cuando se completa

Publicar (Ctrl/Cmd + P)

1. Clic en "Publicar" (o Ctrl/Cmd + P)
2. Seleccioná qué páginas publicar (por defecto: todas)
3. Clic en "Confirmar"
4. Esperá 5-15 segundos mientras se genera el HTML
5. Te muestra la URL en vivo: https://slug.mypagegenius.com

Qué incluye la publicación:

• HTML estático optimizado
• CSS inline (no depende de CDN)
• JavaScript mínimo (menú mobile, formularios, analytics)
• Schema.org JSON-LD
• Sitemap.xml y robots.txt automáticos

---

4.6 SEO Settings

Clic en ⚙️ Config → SEO.

Campos por página

SEO Global (Business Info)

Clic en ⚙️ Config → Business Info.

PageGenius genera Schema.org automáticamente con estos datos. No tenés que tocar código.

---

4.7 AI Assistant en el Builder

Clic en 🤖 AI Assistant en la footer bar.

Qué puede hacer

Limitaciones

• No puede cambiar la estructura de widgets (solo textos)
• No puede subir imágenes
• No puede modificar colores o estilos globales

---

4.8 Copy / Paste de Widgets

PageGenius permite copiar y pegar widgets entre páginas.

1. Clic en un widget → "Copiar" (o Ctrl/Cmd + C)
2. Andá a otra página (ej: de Home a About)
3. Clic en el canvas donde querés pegar → Ctrl/Cmd + V

Qué se copia:

• ✅ Todo el contenido del widget
• ✅ Configuración de estilos
• ❌ Imágenes subidas (se referencian, no se duplican)

---

4.9 Problemas y Soluciones del Builder

"No puedo agregar más widgets"

• Causa: Llegaste al límite de widgets por página (50 en Free, 100 en Pro/Agency).
• Solución: Eliminá widgets que no usás, o upgradéá de plan.

"El widget que agregué no se ve"

• Causa: El widget está "colapsado" (sin contenido) o tiene color de texto igual al fondo.
• Solución: Hacé clic en el widget y completá los campos obligatorios (título, texto, etc.).

"Guardé pero los cambios no aparecen"

• Causa: Guardaste pero NO publicaste. El sitio en vivo sigue con la versión anterior.
• Solución: Clic en "Publicar". Guardar ≠ Publicar.

"La publicación falló"

• Causa: Error de renderizado en algún widget, o timeout del servidor.
• Solución: Revisá que no haya widgets con campos vacíos obligatorios. Si persiste, contactá soporte.

"El builder se ve lento"

• Causa: Muchos widgets pesados (galerías con muchas imágenes, videos, carousels).
• Solución: Reducí la cantidad de imágenes por galería. Comprimí las imágenes antes de subirlas.

"No encuentro un widget"

• Causa: El widget está en la categoría equivocada o es "Premium" y tu plan es Free.
• Solución: Usá el buscador del sidebar. Si no aparece, es posible que requiera upgrade.

"Quiero deshacer un cambio"

• Solución: Ctrl/Cmd + Z. El builder tiene undo/redo ilimitado.

"Mi página se ve diferente en el builder vs. el sitio publicado"

• Causa: El builder usa un modo de previsualización. Algunos estilos se renderizan ligeramente distinto en vivo.
• Solución: Usá "Ver Preview" (botón en footer bar) para ver exactamente cómo quedará en vivo.

---

Resumen del Capítulo 4

---

Próximo capítulo: Capítulo 5: Widgets Reference — Guía de Componentes