# 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 | Zona | Qué hace | |------|---------| | **Header bar** | Navegación entre páginas del proyecto, botón de guardar, publicar | | **Sidebar** | Lista de widgets disponibles. Arrastrá al canvas para agregarlos. | | **Canvas** | El área de edición. Acá ves tu página como quedará en vivo. | | **Footer bar** | Acciones globales: preview, publicar, configuración de SEO, AI assistant | > **Screenshot real:** `![Builder visual de PageGenius](/help/screenshots/builder-mockup.png)` --- ## 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 | Tipo | Qué hace | Ejemplo | |------|---------|---------| | **Text input** | Escribís texto libre | Título, subtítulo, CTA | | **Textarea** | Texto largo | Descripción, párrafo | | **Dropdown** | Elegís de una lista | Variante de estilo, alineación | | **Toggle** | On/off | Mostrar/ocultar un elemento | | **Number** | Valor numérico | Tamaño de fuente, espaciado | | **Color picker** | Elegís color | Color de fondo, color de texto | | **Image upload** | Subís o elegís imagen | Logo, background, foto | | **Link** | URL o tel/email | Botón, mapa, redes sociales | | **Array/List** | Lista de items | Servicios, testimonials, FAQs | --- ## 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: - **Página en blanco** - **Generar con IA** (la IA arma la página basada en tu proyecto) 4. 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 | Acción | Qué hace | Quién lo ve | Dónde queda | |--------|---------|------------|------------| | **Guardar** | Guarda los cambios en la base de datos | Solo vos (en el builder) | Draft | | **Publicar** | Genera HTML estático y lo pone en vivo | Todo el mundo | Live site | ### 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 | Campo | Qué hace | Ejemplo | |-------|---------|---------| | **Title** | Título que aparece en Google | "Taller Mecánico Miami | Frenos y Aire Acondicionado" | | **Meta Description** | Resumen en Google (155 chars max) | "Taller mecánico en Miami con 15 años de experiencia. Reparamos frenos, aires acondicionados y transmisiones. Presupuesto gratis." | | **Canonical URL** | URL oficial (evita contenido duplicado) | `https://mitaller.com/services` | | **OG Image** | Imagen que aparece al compartir en Facebook/LinkedIn | Subí una imagen 1200x630px | ### SEO Global (Business Info) Clic en **⚙️ Config** → **Business Info**. | Campo | Qué hace | Por qué importa | |-------|---------|-----------------| | **Business Name** | Nombre de tu negocio | Aparece en Schema.org y Google | | **Type** | LocalBusiness subtype | Google usa esto para mostrar "Dentista", "Taller", etc. | | **Phone** | Número de contacto | Click-to-call en móviles | | **Email** | Email de contacto | Form submissions van acá | | **Address** | Dirección completa | Aparece en Google Maps y Schema | | **Hours** | Horario de atención | Google muestra "Abierto ahora" | | **Services** | Lista de servicios | Google indexa cada servicio como palabra clave | **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 | Comando | Resultado | |---------|-----------| | "Regenerar esta sección" | La IA reescribe los textos del widget seleccionado | | "Hacer más persuasivo" | Mejora el copy de conversión | | "Agregar testimonios falsos" | Genera 3 testimonials realistas para tu industria | | "Traducir esta página" | Traduce todo el contenido de la página actual | ### 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 | Tarea | Cómo | Atajo | |-------|------|-------| | Agregar widget | Arrastrar del sidebar al canvas | — | | Editar widget | Clic en widget → panel derecho | — | | Mover widget | Agarrar handle ☰ y arrastrar | — | | Nueva página | Header → "+" | — | | Guardar | Botón o `Ctrl+S` | `Ctrl/Cmd+S` | | Publicar | Botón o `Ctrl+P` | `Ctrl/Cmd+P` | | SEO | ⚙️ Config → SEO | — | | AI Assistant | 🤖 en footer bar | — | | Copiar/pegar widget | `Ctrl+C` / `Ctrl+V` | `Ctrl/Cmd+C`, `Ctrl/Cmd+V` | --- **Próximo capítulo:** [Capítulo 5: Widgets Reference — Guía de Componentes](17e-widgets-reference.md)