El constructor visual — añadir, diseñar y convertir
Biblioteca visual, diseños listos, embudo de captación, vista desktop/tablet/móvil y edición contextual sin perder controles avanzados.
Las tres zonas del editor
- Panel izquierdo — cuatro pestañas: "Añadir" (bloques y catálogo completo), "Diseños" (composiciones listas), "Embudo" (captura + formulario + confirmación) y "Capas", que muestra el árbol de la página y está SIEMPRE disponible.
- Lienzo central — la página en vivo. Click selecciona un bloque (borde azul); arriba tienes los botones de vista Escritorio / Tablet / Móvil.
- Panel derecho — "Texto" edita textos, imágenes, enlaces e items; "Diseño" controla espaciado, fondo, borde, tipografía y la visibilidad por dispositivo; "Tema" define la identidad global; "Versiones" guarda el historial de la página.
Agregar bloques
- Abre "Añadir" y usa el buscador ("Buscar bloque…")O navega por categorías: Secciones estilizadas, Estructura, Media, Texto, Interactivo, Social, Comercial, Avanzado y Pie de página.
- Click inserta al final; arrastrar lo suelta en una posición exactaEn "Distribuir contenido" puedes elegir de 1 a 6 columnas, una fila con barra lateral (a la izquierda o a la derecha), o un "Contenedor" vacío para componer libremente dentro. Todas se reorganizan automáticamente en móvil.
- Selecciona el bloque y edítalo en el panel "Texto"Cada bloque trae contenido de ejemplo bien diseñado que reemplazas por el tuyo.
El catálogo incluye decenas de variantes para estructura, media, contenido interactivo, prueba social, comercial y pie de página. Puedes empezar por Recomendados y abrir "Todos" solo cuando necesites más control.
Barra superior
- Selector de sitio y de página + botones de "Ajustes de la página" (título, dirección y SEO de la página, y el ícono de la pestaña de todo el sitio), "Cabecera del sitio" y "Nueva página" (sitios multipágina).
- "Píxeles y seguimiento (Meta y Google Ads)" (ícono de diana) — el píxel de Meta y la etiqueta de Google de TODO el sitio.
- "Asistente IA" — abre el panel de generación/edición con IA.
- "Revisar" — la revisión previa a publicar, con su puntaje sobre 100.
- "Vista previa" (ícono de ojo) — apaga los paneles y te enseña el BORRADOR limpio dentro del mismo editor; el botón pasa a decir "Volver a editar". No abre nada en otra pestaña y no pierde la selección.
- "Abrir página publicada" (ícono de globo) — ése sí abre en otra pestaña lo que ven tus visitantes. Sólo aparece cuando la página ya está publicada.
- Deshacer / Rehacer — historial de hasta 100 pasos.
- "Descartar" (aparece si hay cambios) · "Guardar" (borrador) · "Publicar" (en vivo).
Crear una squeeze page
- Al crear un sitio, abre Desde plantilla → Captación de leads → Squeeze Page · Captura rápida.
- Cambia la promesa, el texto de apoyo y el botón en "Texto".
- En ¿Qué quieres captar?, elige Squeeze para pedir sólo el correo, Captura para nombre + correo o Contacto para añadir mensaje.
- Abre Apariencia y después del envío sólo si necesitas cambiar el mensaje de éxito o enviar al lead a una página de confirmación.
- Revisa la vista móvil y publica.
Formularios claros y compactos
Con el bloque de formulario seleccionado, "Distribución" tiene tres opciones y es lo primero que conviene decidir:
- "Vertical" — una columna a todo lo ancho, ideal para contacto o varios campos.
- "2 columnas" — reparte campos cortos y deja mensajes, opciones y botón a todo lo ancho.
- "En línea" — campos y botón en una sola fila cuando hay espacio; se apila automáticamente en móvil.
- "Contenedor" es aparte: "Sin tarjeta" integra el formulario con el fondo de la sección, "Tarjeta" y "Tarjeta elevada" lo separan.
- Campos aparece resumido; ábrelo sólo para cambiar etiquetas, tipos, orden u obligatoriedad.
Pegar y superponer bloques
Selecciona la imagen o sección, abre Diseño → Espaciado y usa Espacio exterior. El margen superior acepta valores negativos: −16px pega suavemente, −32px superpone y valores mayores crean una superposición más marcada. Puedes escribir el número o usar el deslizador.
Atajos de teclado
- Cmd/Ctrl + Z — Deshacer.
- Cmd/Ctrl + Shift + Z (o Ctrl + Y) — Rehacer.
- Cmd/Ctrl + S — Guardar ahora.
- Cmd/Ctrl + P — Entrar o salir de la vista previa del borrador.
- Cmd/Ctrl + D — Duplicar el bloque seleccionado.
- Supr / Backspace — Eliminar el bloque seleccionado.
- 1 / 2 / 3 — Vista escritorio, tablet y móvil.
- Esc — Deseleccionar / cerrar el panel de IA.
Capas y selección precisa
En páginas con contenedores anidados, la pestaña "Capas" muestra el árbol completo y te deja seleccionar cualquier nodo. Al seleccionar un bloque también aparece un breadcrumb (Página → Container → …) en el panel "Texto" para subir o bajar de nivel con un click.
Y cuando quieras tocar UN título dentro de una sección —y no la sección entera—, usa el desplegable "¿Qué quieres editar?" que aparece arriba de "Texto" y "Diseño": lista los interiores del bloque seleccionado. "Módulo completo" te devuelve al bloque.
¿Pudiste resolverlo con esta guía?
Artículos relacionados
Generar una página web con IA
Describe tu negocio y un pipeline de 4 agentes (Arquitecto, Diseñador, Desarrollador, Auditor) construye una página completa con estilo propio según tu rubro.
Secciones estilizadas
Secciones profesionales para estructura, media, interacción, prueba social, comercial y pie de página, listas para personalizar.
Mostrar u ocultar secciones por dispositivo
Cada sección puede verse sólo en computador, sólo en celular o en los tres. Así armas una maqueta vertical y otra horizontal sin que arreglar una rompa la otra.
Bloque HTML/CSS personalizado
Cuando los bloques pre-armados no alcanzan: escribe (o pega) tu propio HTML y CSS con scoping automático y saneado de seguridad.