Saltar al contenido
Explorar categorías y guías

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.

9 min de lectura Actualizado el 28 de agosto de 2026

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.
Texto es QUÉ dice; Diseño es CÓMO se ve
Haz click directamente sobre un título, texto o botón para abrir sus controles exactos. La pestaña se llama "Texto" (antes decía "Contenido"): ahí cambias las palabras, las imágenes y los destinos. Usa "Diseño" para el elemento o bloque seleccionado y "Tema" para cambiar toda la página.

Agregar bloques

  1. 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.
  2. Click inserta al final; arrastrar lo suelta en una posición exacta
    En "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.
  3. 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).
Publicar actúa sobre la página ABIERTA
No sobre el sitio entero. Si editaste cinco páginas, ábrelas y publícalas una por una: el selector de páginas marca con un punto ámbar las que tienen cambios sin publicar, y al lado de "Publicar" verás el recuento de las otras que quedan pendientes.

Crear una squeeze page

  1. Al crear un sitio, abre Desde plantilla → Captación de leads → Squeeze Page · Captura rápida.
  2. Cambia la promesa, el texto de apoyo y el botón en "Texto".
  3. En ¿Qué quieres captar?, elige Squeeze para pedir sólo el correo, Captura para nombre + correo o Contacto para añadir mensaje.
  4. 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.
  5. Revisa la vista móvil y publica.
También dentro de una página existente
Ve a Diseños → Landing y añade “Squeeze · Captura rápida”. Es una sola sección responsive con correo + botón y guarda el lead realmente; no es una maqueta.

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.
"Cómo se acomodan los campos"
Encima de los controles sueltos hay cuatro estructuras completas que se aplican de un clic: Vertical, Dos columnas, En línea y Superpuesto (una tarjeta elevada que se monta sobre la sección anterior). Ajustan distribución, densidad, ancho y botón a la vez.
Email o teléfono obligatorio
Todo formulario debe tener al menos un email o teléfono obligatorio para identificar y guardar el contacto. La revisión previa a publicar te avisa si falta.

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.

El espacio interior (padding) nunca baja de cero para evitar composiciones rotas. Arriba y abajo se ajustan directo; izquierda y derecha están justo debajo, en “Laterales (opcional)”, y se pueden plegar si no los necesitas.

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.
El botón del teclado en la barra superior (o Shift + /) abre la guía completa de atajos sin salir del editor.

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