Saltar a contenido

El constructor visual

El paso "Contenido" del asistente de landings usa el mismo editor visual (basado en bloques) que las plantillas de email de otros módulos. Tiene dos modos, con un botón para alternar entre ellos arriba del lienzo:

  • Constructor visual — arrastrás bloques prearmados y los editás haciendo clic.
  • HTML — edición directa del código, con resaltado de sintaxis en colores (como un editor de código profesional) y formateo automático, para quien prefiera escribir o ajustar el HTML a mano.
    Crear contenido visual

Bloques disponibles (modo visual)

En el panel derecho encontrás bloques agrupados por categoría, listos para arrastrar al lienzo:

  • Secciones — bloques prearmados completos: Hero centrado, Hero con imagen, Características, Sobre nosotros, Estadísticas, Testimonios, Planes de precio, FAQ, Banner CTA, Contacto, Galería, Footer, Newsletter.
  • Layout — columnas (2, 3, 4 iguales, o 2/3 + 1/3) y filas con fondo de color.
  • Elementos — Imagen, Botón CTA, Tarjeta, Ícono + texto, Cita destacada, Lista de features, Badge, Aviso informativo, Video (YouTube/Vimeo), Separador, Espaciador.
  • Texto — Título H1, Título H2, Título con badge, Párrafo.
  • Formularios — un bloque por cada formulario activo que hayas creado en el módulo Formularios, con su nombre. Al soltarlo, el formulario queda embebido y funcionando dentro de la landing. El bloque "Contacto" además inserta automáticamente el formulario de tu organización con slug contacto, si existe.
  • Newsletter — una caja de suscripción ya conectada al módulo Newsletter: quien la complete queda agregado a tu lista de suscriptores.

Ejemplo de uso de constructor visual


Insertar imágenes

Al soltar el bloque "Imagen" o hacer doble clic sobre una imagen ya puesta, se abre un selector con las imágenes de stock de la app y las que ya subió tu organización, además de la opción de subir una nueva o pegar una URL. Ese mismo selector queda disponible aunque el editor esté en pantalla completa.


Modo HTML

Si preferís (o necesitás) editar el código directamente, el botón HTML cambia a un editor con:

  • Resaltado de sintaxis en colores, igual que un editor de código.
  • Formateo automático — el HTML y el CSS se indentan y ordenan solos al entrar a este modo, aunque el constructor visual los haya exportado todo en una sola línea.
  • Un botón Insertar imagen que abre el mismo selector de imágenes que el modo visual, para pegar la URL en el punto exacto donde tengas el cursor.

Podés alternar entre ambos modos sin perder cambios — lo que edites en uno se refleja en el otro al cambiar.
Puedes consultar más detalles para desarrollar landings con HTML usando las herramientas nativas de tracking aquí