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	Header, Footer, Container, Columns, Divider, Spacer, Custom Code
Hero & Media	Hero, Hero Carousel, Video Hero, Image, Video, Gallery, Masonry Grid, Portfolio Grid, Before/After
Texto & Contenido	Heading, Text, Button, Text Scramble, Marquee, Logos, Logo Carousel, Carousel
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	Animated Section, Scroll Reveal, Tilt Card

Widgets en el builder:

Ejemplo de página de servicios publicada:

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 <head>), o Body End (antes de </body>)

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 (<div> sin </div>).

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 [email protected].

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