# Capítulo 5: Widgets Reference — Guía de Componentes > Documentación de los 48 widgets disponibles en PageGenius: qué hace cada uno, propiedades, tips de uso, y problemas comunes. --- ## Índice por Categoría | Categoría | Widgets | |-----------|---------| | [Layout & Estructura](#layout--estructura) | Header, Footer, Container, Columns, Divider, Spacer, Custom Code | | [Hero & Media](#hero--media) | Hero, Hero Carousel, Video Hero, Image, Video, Gallery, Masonry Grid, Portfolio Grid, Before/After | | [Texto & Contenido](#texto--contenido) | Heading, Text, Button, Text Scramble, Marquee, Logos, Logo Carousel, Carousel | | [Negocio & Conversión](#negocio--conversión) | Features, Services, Services Detailed, Pricing, Testimonials, Testimonial Carousel, Video Testimonial, FAQ, Team, Stats, CTA, Contact Form, Lead Magnet, Appointment Booking, Map, Social, Trust Badges, Emergency Banner, Chat Widget, Countdown | | [Animaciones & Efectos](#animaciones--efectos) | Animated Section, Scroll Reveal, Tilt Card | > **Widgets en el builder:** `![Builder con lista de widgets](/help/screenshots/builder-mockup.png)` > **Ejemplo de página de servicios publicada:** `![Página de servicios publicada](/help/screenshots/pagegenius-published-services.png)` --- ## Layout & Estructura ### Header **Qué hace:** Barra de navegación superior con logo, links de páginas, y botón CTA. **Props clave:** - **Logo:** Imagen o texto - **Links:** Array de links a páginas (se generan automáticamente desde las tabs de páginas) - **CTA Button:** Texto y link del botón principal - **Sticky:** Si se queda fijo al scrollear - **Background:** Color o transparente **Tips:** - El header se renderiza automáticamente en todos las páginas publicadas. No necesitás agregarlo manualmente a cada página. - Para cambiar el logo de todo el sitio: andá a **Configuración** → **Branding**. **Problema común:** "Mi header no aparece en el sitio publicado" - **Solución:** El header se inyecta automáticamente en publicación. No hace falta ponerlo en el canvas del builder. Si querés un header custom, usá el widget **Custom Code**. --- ### Footer **Qué hace:** Pie de página con links, copyright, redes sociales, y contacto. **Props clave:** - **Columns:** 1-4 columnas con links o texto - **Copyright:** Texto del copyright - **Social Links:** Iconos de redes sociales - **Logo:** Logo del footer (puede ser diferente al header) **Tips:** - Igual que el header, se renderiza automáticamente en todas las páginas publicadas. - Para editar el contenido del footer: **Configuración** → **Branding** → **Footer**. **Problema común:** "El footer tiene links rotos" - **Solución:** Revisá que las páginas existan. Los links se generan automáticamente desde las tabs de páginas. Si eliminaste una página, el link se queda roto hasta que republiques. --- ### Container **Qué hace:** Caja contenedora que puede tener otros widgets adentro (nesteables). **Props clave:** - **Background:** Color o imagen de fondo - **Padding:** Espaciado interno - **Border:** Radio de borde (rounded corners) - **Width:** Full, container, o custom - **Alignment:** Centrado, izquierda, derecha **Tips:** - Usalo para agrupar widgets relacionados y darles un fondo común. - Ideal para secciones de "features" o "servicios" con fondo gris claro. **Problema común:** "Los widgets dentro del container no se ven" - **Solución:** Asegurate de haber arrastrado widgets DENTRO del container (aparece un borde punteado cuando estás sobre él). --- ### Columns **Qué hace:** Divide el canvas en 2, 3 o 4 columnas. Cada columna es un DropZone independiente. **Props clave:** - **Column count:** 2, 3, 4 - **Gap:** Espacio entre columnas - **Responsive:** En móvil se apilan verticalmente automáticamente **Tips:** - Ideal para "features" (3 iconos + texto lado a lado). - En móvil, las columnas se apilan en orden de izquierda a derecha. **Problema común:** "En móvil las columnas quedan muy angostas" - **Solución:** Esto es normal. El diseño responsive apila las columnas. Si querés que se vean igual en móvil, usá el widget **Container** en vez de Columns. --- ### Divider **Qué hace:** Línea horizontal de separación. **Props clave:** - **Color:** Color de la línea - **Thickness:** Grosor (1px, 2px, 3px) - **Width:** Full, 50%, 25% - **Style:** Sólida, punteada, discontinua **Tips:** - Usalo entre secciones para dar "aire" visual. - Un divider sutil (1px, gris claro, 50% width) se ve más profesional que uno grueso y negro. --- ### Spacer **Qué hace:** Espacio vertical vacío. **Props clave:** - **Height:** En píxeles (20px, 40px, 80px, etc.) **Tips:** - Usalo para separar secciones sin agregar una línea visible. - En móvil, el espaciado se reduce automáticamente. --- ### Custom Code **Qué hace:** Permite inyectar HTML, CSS o JavaScript personalizado. **Props clave:** - **Code:** El código HTML/JS/CSS - **Position:** Inline (en el body), Head (dentro de ), o Body End (antes de ) **Tips:** - Úsalo con cuidado. Código mal escrito puede romper tu sitio. - Ideal para: scripts de tracking (Facebook Pixel, Google Tag Manager), widgets de terceros (chat), o estilos CSS muy específicos. **Problema común:** "Agregué código y el sitio se ve roto" - **Solución:** Eliminá el widget Custom Code, guardá, y publicá de nuevo. Revisá tu código buscando tags sin cerrar (`
` sin `
`). --- ## Hero & Media ### Hero **Qué hace:** Sección principal de la página. Título grande, subtítulo, botón, y fondo. **Props clave:** - **Title:** Headline principal - **Subtitle:** Descripción - **Button Text / Link:** CTA - **Variant:** Gradient Blue, Gradient Dark, Gradient Warm, Clean White, Image Overlay - **Background Image:** (solo para variantes que lo usan) - **Align:** Left, Center, Right **Tips:** - El título debe responder: "¿Qué hacés y para quién?" Ej: "Taller Mecánico en Miami Especializado en Frenos" - Usá Image Overlay si tenés una foto de tu negocio real. **Problema común:** "El texto del hero no se lee sobre la imagen" - **Solución:** Cambiá a la variante "Gradient Dark" o "Image Overlay" que agregan un overlay oscuro automáticamente. O subí una imagen con área clara en el centro. --- ### Hero Carousel **Qué hace:** Slider de heroes. Múltiples slides con imagen, título, subtítulo, y CTA. **Props clave:** - **Slides:** Array de slides (imagen, título, subtítulo, botón) - **Auto-play:** Si cambia automáticamente - **Interval:** Tiempo entre slides (segundos) - **Show Arrows/Dots:** Navegación visible **Tips:** - Ideal para negocios con múltiples servicios destacados (ej: "Servicio de Emergencia", "Mantenimiento Preventivo", "Garantía Extendida"). - No uses más de 3-4 slides. La gente no espera a ver el 5to. **Problema común:** "Las imágenes del carousel se ven distorsionadas" - **Solución:** Usá imágenes con la misma proporción (16:9 recomendado). Mínimo 1920x1080px. --- ### Video Hero **Qué hace:** Hero con video de fondo (autoplay, mute, loop). **Props clave:** - **Video URL:** Link de YouTube, Vimeo, o archivo MP4 - **Title / Subtitle:** Texto superpuesto - **Overlay Opacity:** Qué tan oscuro es el filtro sobre el video - **Button:** CTA **Tips:** - El video debe estar en mute obligatoriamente (política de navegadores). - Usalo solo si tenés un video profesional de 10-15 segundos. Videos largos ralentizan la carga. **Problema común:** "El video no se reproduce en móvil" - **Solución:** En iOS, los videos de fondo a veces no autoplayan. Asegurate de que el video esté hosteado en una CDN rápida (no en un servidor lento). --- ### Image **Qué hace:** Bloque de imagen simple. **Props clave:** - **Image:** Subí o elegí de Media - **Alt Text:** Texto alternativo (SEO y accesibilidad) - **Caption:** Leyenda debajo - **Link:** Si clickeable, a dónde lleva - **Border Radius:** Redondeado de esquinas - **Shadow:** Sombra **Tips:** - Siempre completá el **Alt Text**. Ayuda a Google y a personas con discapacidad visual. - Usá WebP siempre que puedas. PageGenius convierte automáticamente JPG/PNG a WebP. **Problema común:** "La imagen se ve pixelada" - **Solución:** Subí una imagen más grande. El builder la escala, pero no la mejora. Mínimo 1200px de ancho. --- ### Video **Qué hace:** Video embebido (YouTube, Vimeo, o archivo directo). **Props clave:** - **Video URL:** Link del video - **Autoplay:** Reproducir automáticamente - **Controls:** Mostrar barra de controles - **Mute:** Empezar sin sonido - **Width:** Full container o tamaño fijo **Tips:** - Para testimoniales en video, usá este widget en vez de subir archivos pesados. - YouTube es más liviano que archivos MP4 propios (usa su CDN global). --- ### Gallery **Qué hace:** Grilla de imágenes con lightbox (clic para agrandar). **Props clave:** - **Images:** Array de imágenes - **Columns:** 2, 3, 4, o masonry - **Gap:** Espacio entre imágenes - **Border Radius:** Redondeado - **Click to enlarge:** Si abre lightbox **Tips:** - Ideal para: portafolios de techados, antes/después de remodelaciones, galerías de restaurantes. - Subí todas las imágenes en la misma proporción para que la grilla se vea uniforme. **Problema común:** "La galería se ve desordenada" - **Solución:** Usá la opción **"Masonry"** para imágenes de distintas proporciones, o asegurate de que todas tengan la misma relación de aspecto. --- ### Masonry Grid **Qué hace:** Grilla tipo Pinterest. Imágenes de distintos tamaños encajan como ladrillos. **Props clave:** - **Images:** Array - **Columns:** 2, 3, 4 - **Gap:** Espaciado **Tips:** - Perfecto para galerías de Instagram o portafolios creativos. - Las imágenes se ordenan automáticamente para minimizar espacios vacíos. --- ### Portfolio Grid **Qué hace:** Grilla de proyectos/trabajos con título, descripción, e imagen. **Props clave:** - **Items:** Array de trabajos (título, descripción, imagen, link) - **Columns:** 2, 3, 4 - **Hover Effect:** Efecto al pasar el mouse (zoom, overlay, etc.) **Tips:** - Ideal para: portafolios de construcción, diseño, o fotografía. - Agregá un link a cada ítem para mostrar más detalles. --- ### Before/After **Qué hace:** Slider comparación antes/después. **Props clave:** - **Before Image:** Foto del "antes" - **After Image:** Foto del "después" - **Label Before/After:** Texto sobre cada foto - **Slider Position:** Dónde empieza el divisor (default: 50%) - **Direction:** Horizontal o vertical **Tips:** - Usalo para: remodelaciones, limpieza, resultados de tratamientos dentales, pintura de autos. - Las dos fotos DEBEN estar alineadas (mismo ángulo, misma distancia). **Problema común:** "Las imágenes no se alinean" - **Solución:** Tomá las fotos desde el mismo punto. Si no se alinean, el efecto se ve amateur. --- ## Texto & Contenido ### Heading **Qué hace:** Título H1, H2, o H3. **Props clave:** - **Text:** El título - **Level:** H1, H2, H3 - **Color:** Color del texto - **Size:** Tamaño de fuente - **Align:** Left, Center, Right **Tips:** - Usá **H1 solo una vez por página** (el hero generalmente ya tiene el H1). El resto debe ser H2/H3. - Google usa los headings para entender la estructura de tu contenido. --- ### Text **Qué hace:** Párrafo de texto rico. **Props clave:** - **Content:** El texto (soporta negrita, itálica, listas, links) - **Color:** Color del texto - **Size:** Tamaño de fuente - **Line Height:** Interlineado - **Max Width:** Ancho máximo del bloque de texto **Tips:** - No escribás paredes de texto. Los párrafos de 2-3 líneas se leen mejor. - Usá **negrita** para resaltar palabras clave (ayuda al SEO). --- ### Button **Qué hace:** Botón clickeable. **Props clave:** - **Text:** Qué dice el botón - **Link:** A dónde lleva (URL, `tel:+123`, `mailto:`, o página interna) - **Variant:** Primary, Secondary, Outline, Ghost - **Size:** Small, Medium, Large - **Width:** Auto o Full width - **Icon:** Icono opcional (flecha, teléfono, etc.) **Tips:** - El texto del botón debe ser una acción: "Llamar Ahora", "Agendar Cita", "Pedir Presupuesto". NO "Enviar" o "Click Here". - Para llamadas telefónicas, usá `tel:+1234567890` como link. **Problema común:** "El botón no lleva a ningún lado" - **Solución:** Revisá que el campo **Link** no esté vacío. Si querés que abra WhatsApp, usá `https://wa.me/1234567890`. --- ### Text Scramble **Qué hace:** Texto que aparece con efecto de "descifrado" (letras cambian hasta formar la palabra final). **Props clave:** - **Text:** Texto final - **Speed:** Velocidad del efecto - **Trigger:** On load, on scroll, on hover **Tips:** - Usalo para headlines llamativos en páginas de startups o creativos. - No lo uses en sitios de negocios locales tradicionales (puede parecer "demasiado moderno"). --- ### Marquee **Qué hace:** Texto o imágenes que se desplazan horizontalmente en loop. **Props clave:** - **Items:** Array de textos o imágenes - **Speed:** Velocidad de desplazamiento - **Direction:** Izquierda o derecha - **Pause on hover:** Se detiene al pasar el mouse **Tips:** - Ideal para: logos de clientes, certificaciones, o frases de confianza repetidas. - No pongás texto crítico acá (la gente no lo lee completo). --- ### Logos **Qué hace:** Grilla de logos de clientes/marcas. **Props clave:** - **Logos:** Array de imágenes (logo de clientes) - **Grayscale:** Si empiezan en gris y se colorean al hover - **Columns:** 2, 3, 4, 5, 6 **Tips:** - Usalo para mostrar "Empresas que confían en nosotros". - Los logos deben tener fondo transparente (PNG) para que se vean bien sobre cualquier fondo. --- ### Logo Carousel **Qué hace:** Carrusel automático de logos que desfilan. **Props clave:** - **Logos:** Array de imágenes - **Speed:** Velocidad - **Direction:** Izquierda o derecha - **Pause on hover:** Se detiene al pasar el mouse **Tips:** - Usalo si tenés muchos logos (más de 6). Si tenés pocos, usá el widget **Logos** estático. --- ### Carousel **Qué hace:** Carrusel genérico de imágenes o contenido. **Props clave:** - **Slides:** Array de slides (imagen, título, descripción) - **Auto-play:** Reproducción automática - **Arrows / Dots:** Navegación - **Effect:** Slide, fade, cube, coverflow **Tips:** - Usalo para: galerías de productos, proyectos destacados, o servicios con imagen. --- ## Negocio & Conversión ### Features **Qué hace:** Grilla de características/servicios con icono, título, y descripción. **Props clave:** - **Features:** Array (icono, título, descripción) - **Columns:** 2, 3, 4 - **Icon Style:** Outlined, filled, colored - **Background:** Color de fondo de la sección **Tips:** - Ideal para la sección "¿Por qué elegirnos?" - Usá iconos que hagan sentido (no genéricos). Ej: para un taller, usá iconos de herramientas, no de "cohetes". **Problema común:** "Los iconos no se ven" - **Solución:** Revisá que el icono no sea transparente sobre fondo transparente. Cambiá el fondo de la sección o el color del icono. --- ### Services **Qué hace:** Lista de servicios con título y descripción breve. **Props clave:** - **Services:** Array (título, descripción, icono, link) - **Layout:** Grid o list - **Show icons:** Sí/no **Tips:** - Mantené las descripciones cortas (1-2 oraciones). Si querés más detalle, usá **Services Detailed**. - Agregá un link a cada servicio si tenés una página dedicada. --- ### Services Detailed **Qué hace:** Servicios expandidos con imagen, descripción larga, precio, y CTA. **Props clave:** - **Services:** Array (título, descripción, imagen, precio, button) - **Layout:** Card o accordion **Tips:** - Ideal para páginas de "Servicios" donde cada servicio necesita explicación. - El precio es opcional. Si no querés mostrar precios, dejá el campo vacío. --- ### Pricing **Qué hace:** Tabla de precios/planes. **Props clave:** - **Plans:** Array (nombre, precio, periodo, features, button, destacado) - **Highlight:** Un plan puede estar marcado como "Recomendado" - **Currency:** $, €, £, etc. **Tips:** - Marcá como "Recomendado" el plan que más querés vender. - Usá números redondos: "$99/mes" se lee mejor que "$97.50/mes". **Problema común:** "La tabla de precios se ve mal en móvil" - **Solución:** En móvil, las columnas de precios se apilan verticalmente. Si tenés más de 3 planes, considerá mostrar solo 2. --- ### Testimonials **Qué hace:** Grilla de testimonios de clientes (texto, nombre, foto). **Props clave:** - **Testimonials:** Array (quote, name, role, photo, stars) - **Columns:** 1, 2, 3 - **Show stars:** Rating de 1-5 estrellas **Tips:** - Usá fotos reales de clientes (no stock photos). Aumenta la confianza un 300%. - Si no tenés fotos, usá iniciales con fondo de color (se genera automáticamente). --- ### Testimonial Carousel **Qué hace:** Slider de testimonios. **Props clave:** - **Testimonials:** Array - **Auto-play:** Cambia automáticamente - **Show dots/arrows:** Navegación **Tips:** - Ideal si tenés más de 4 testimonios. Si tenés pocos, usá **Testimonials** estático. --- ### Video Testimonial **Qué hace:** Testimonio con video embebido (YouTube/Vimeo). **Props clave:** - **Video URL:** Link del video - **Name / Role:** Quién da el testimonio - **Quote:** Texto destacado del video **Tips:** - El video debe ser corto (30-60 segundos). - Agregá el quote más impactante como texto, para que la gente que no vea el video igual lea algo. --- ### FAQ **Qué hace:** Lista de preguntas frecuentes con acordeón (clic para expandir). **Props clave:** - **Questions:** Array (pregunta, respuesta) - **Style:** Simple, card, or numbered - **Open first:** Si la primera pregunta empieza abierta **Tips:** - Agregá las 5-8 preguntas más comunes. No más. - Incluí precios, horarios, áreas de servicio, y garantías. - PageGenius genera **Schema.org FAQPage** automáticamente con estos datos (ayuda al SEO). --- ### Team **Qué hace:** Tarjetas de miembros del equipo (foto, nombre, cargo, bio). **Props clave:** - **Members:** Array (name, role, bio, photo, social links) - **Columns:** 2, 3, 4 - **Show social:** Iconos de LinkedIn, Twitter, etc. **Tips:** - Ideal para páginas "About" o "Equipo". - Las fotos deben ser profesionales y del mismo estilo (mismo fondo o iluminación). --- ### Stats **Qué hace:** Barra de números destacados (años de experiencia, clientes satisfechos, etc.). **Props clave:** - **Stats:** Array (number, label, suffix) - **Animation:** Contador animado al scrollear - **Columns:** 2, 3, 4 **Tips:** - Usá números concretos: "15 años", "2,340 clientes", "98% satisfacción". - El sufijo puede ser: +, %, k, M. --- ### CTA (Call to Action) **Qué hace:** Banner de conversión. Título, subtítulo, y botón grande. **Props clave:** - **Title:** Headline persuasivo - **Subtitle:** Descripción - **Button:** Texto y link - **Background:** Color o imagen - **Align:** Left, Center **Tips:** - Usalo al final de cada página (antes del footer). - El título debe ser una acción: "Agendá tu cita hoy", "Llamá para tu presupuesto gratis". --- ### Contact Form **Qué hace:** Formulario de contacto con validación. **Props clave:** - **Fields:** Array (nombre, email, teléfono, mensaje, servicio de interés) - **Submit Button:** Texto del botón - **Success Message:** Qué dice después de enviar - **Redirect URL:** A dónde lleva después de enviar (opcional) **Tips:** - No pidás demasiados campos. Cada campo extra reduce conversiones un 10%. - Mínimo recomendado: Nombre + Email + Mensaje. - El formulario se envía a tu email automáticamente. También queda guardado en **Leads**. **Problema común:** "No me llegan los emails del formulario" - **Solución:** Revisá spam/promociones. Si usás Gmail, buscá "PageGenius" en la barra de búsqueda. El remitente es `notifications@mypagegenius.com`. --- ### Lead Magnet **Qué hace:** Caja de captura de email a cambio de algo gratuito (ebook, descuento, checklist). **Props clave:** - **Title:** Qué ofrecés - **Description:** Beneficio - **Button:** "Descargar Gratis", "Enviarme el PDF" - **Success:** Mensaje post-envío - **File URL:** Link al archivo que se "regala" (opcional) **Tips:** - Usalo para construir una lista de emails de prospectos. - Ofrecé algo de valor real: "Guía: Cómo elegir un dentista en Miami" o "Checklist: 10 puntos antes de contratar un techador". --- ### Appointment Booking **Qué hace:** Widget de agendamiento con selector de fecha/hora. **Props clave:** - **Service:** Servicio a agendar - **Duration:** Duración de la cita - **Available Days/Hours:** Cuándo atendés - **Timezone:** Zona horaria **Tips:** - Ideal para: dentistas, mecánicos, consultorios, salones. - Si no usás un calendario externo (Calendly, Acuity), el widget envía un email con la solicitud y vos confirmás manualmente. **Problema común:** "Las fechas no coinciden con mi horario" - **Solución:** Revisá la configuración de **Available Hours** y **Timezone**. --- ### Map **Qué hace:** Mapa de Google Maps embebido. **Props clave:** - **Address:** Dirección completa - **Zoom:** Nivel de zoom - **Height:** Alto del mapa - **Marker Label:** Texto del pin (ej: "Nuestro Taller") **Tips:** - Usá una dirección real (no PO Box). Google necesita coordenadas exactas para el SEO local. - El mapa se carga lazy (solo cuando el usuario scrollea hasta ahí), así que no ralentiza la página. --- ### Social **Qué hace:** Barra de iconos de redes sociales. **Props clave:** - **Links:** Array (plataforma, URL) - **Platforms:** Facebook, Instagram, LinkedIn, Twitter/X, YouTube, TikTok, WhatsApp - **Size:** Small, Medium, Large - **Style:** Colored, monochrome, circle **Tips:** - Solo mostrá las redes que ACTUALMENTE actualizás. Un Instagram abandonado da mala impresión. - WhatsApp es la red social más importante para negocios locales. Asegurate de tenerla. --- ### Trust Badges **Qué hace:** Fila de íconos de confianza (SSL, Garantía, Asegurado, etc.). **Props clave:** - **Badges:** Array (icono, texto) - **Layout:** Horizontal o grid **Tips:** - Usalo cerca del formulario de contacto o del botón de compra/agendar. - Ejemplos: "Garantía de 1 año", "Asegurados", "Licenciados", "5 estrellas en Google". --- ### Emergency Banner **Qué hace:** Banner urgente en la parte superior de la página. **Props clave:** - **Text:** Mensaje de emergencia - **Link:** A dónde lleva - **Style:** Urgent Red, Dark Alert, Gradient, Minimal - **Dismissible:** Si el usuario puede cerrarlo **Tips:** - Usalo para: "Servicio de emergencia 24h — Llamá ahora", "Oferta limitada hasta viernes", "Cierre por remodelación — Abrimos el 15". - No lo dejes permanentemente. El banner pierde efectividad si siempre está ahí. --- ### Chat Widget **Qué hace:** Burbuja flotante de chat (WhatsApp, Messenger, o script custom). **Props clave:** - **Platform:** WhatsApp, Messenger, Custom - **Phone/ID:** Número de WhatsApp o ID de Messenger - **Message:** Texto pre-escrito al abrir - **Position:** Bottom-left o Bottom-right - **Color:** Color de la burbuja **Tips:** - WhatsApp es la opción más popular para negocios locales. - El número debe incluir código de país sin `+` ni `00`. Ej: `13051234567`. **Problema común:** "El chat no abre WhatsApp" - **Solución:** Revisá que el número no tenga `+`, espacios, ni `00`. Ej: `13051234567` (no `+1 305 123 4567` ni `0013051234567`). --- ### Countdown **Qué hace:** Cuenta regresiva animada. **Props clave:** - **Target Date:** Fecha y hora objetivo - **Labels:** Días, Horas, Minutos, Segundos - **Style:** Modern, Classic, Minimal - **Expired Message:** Qué dice cuando llega a cero **Tips:** - Ideal para: promociones limitadas, lanzamientos, eventos. - El countdown funciona en tiempo real (no necesita refrescar la página). --- ## Animaciones & Efectos ### Animated Section **Qué hace:** Contenedor que aplica animaciones a los widgets que tiene adentro. **Props clave:** - **Animation:** Fade, Slide Up, Slide Left, Zoom, Flip - **Trigger:** On scroll (cuando entra en pantalla) o On load - **Duration:** Velocidad de la animación - **Delay:** Retraso antes de empezar **Tips:** - Usalo moderadamente. Demasiadas animaciones distraen. - Ideal para: secciones de features, testimonials, stats. --- ### Scroll Reveal **Qué hace:** Aplica animaciones de revelación al scrollear (se aplica a otros widgets). **Props clave:** - **Effect:** Fade, Slide, Zoom - **Threshold:** Qué tan visible debe estar antes de animar **Tips:** - Es un wrapper. Arrastrá widgets adentro de él. --- ### Tilt Card **Qué hace:** Tarjeta con efecto 3D de inclinación al pasar el mouse. **Props clave:** - **Max Tilt:** Grados máximos de inclinación - **Scale:** Zoom al hover - **Glare:** Efecto de reflejo de luz **Tips:** - Usalo para: tarjetas de servicios, precios, o team members. - No lo uses en móvil (no tiene sentido sin mouse). --- ## Resumen del Capítulo 5 **Widget más importante:** **Hero** — es lo primero que ve el visitante. **Widget más olvidado:** **Schema.org** — no es un widget visible, pero PageGenius lo genera solo desde **Business Info**. **Widget más útil para conversiones:** **Contact Form** + **CTA** combinados. **Widget más problemático:** **Custom Code** — si se rompe, rompe todo el sitio. | Si querés... | Usá el widget... | |-------------|-----------------| | Mostrar servicios | Features o Services | | Capturar leads | Contact Form o Lead Magnet | | Mostrar fotos de trabajos | Gallery, Before/After, o Portfolio Grid | | Generar confianza | Testimonials, Trust Badges, Logos | | Llamar la atención | Hero, Emergency Banner, Countdown | | Navegación | Header (auto) + Map + Social | --- **Próximo capítulo:** [Capítulo 6: Publicar y Dominios Personalizados](17f-publicar-dominios.md)