El editor visual
Las landings y las páginas de tu sitio web se arman con un editor visual de arrastrar y soltar que se abre en pantalla completa, sin el menú de la plataforma, para que tengas todo el espacio para diseñar. Se abre con el botón Editar de una landing o de una página, o automáticamente al crear una nueva.
La barra superior
- Volver — regresa a la página de detalle. Si tienes cambios sin guardar, te avisa antes de salir.
- Indicador de estado — muestra si todo está guardado, si hay cambios sin guardar o si algo falló al guardar.
- Código — abre el CSS y el JavaScript propios de la página (ver Código propio).
- Vista previa — abre el borrador en una pestaña nueva, tal como se va a ver publicado. Si hay cambios pendientes, los guarda antes.
- Guardar borrador — guarda sin salir del editor. También funciona con Ctrl + S (o Cmd + S en Mac).
Guardar borrador nunca publica. Tus visitantes siguen viendo la versión publicada hasta que presiones Publicar cambios en la página de detalle de la landing o en el panel de tu sitio. Ver Borradores y publicación.
Si cerraste sin guardar
Mientras editas, el navegador guarda una copia de respaldo de tu trabajo. Si se cierra la pestaña o se corta la conexión antes de guardar, la próxima vez que abras el editor te avisa que hay cambios sin guardar y te deja elegir:
- Recuperar — sigue desde esa copia.
- Descartar — sigue con lo último que guardaste.
La copia vive solo en ese navegador: si abres el editor desde otro computador, no la vas a ver.
Bloques disponibles
En el panel derecho encuentras 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 página. 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.
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.
Código propio (CSS y JavaScript)
El botón Código abre dos campos, CSS y JavaScript, para estilos y scripts propios de la página que no pasan por los bloques del editor:
- El CSS se aplica en el lienzo apenas presionas Aplicar, así ves el resultado mientras diseñas.
- El JavaScript no se ejecuta dentro del editor: lo ves funcionando en Vista previa y en la página publicada. Escríbelo sin la etiqueta
<script>y evita escribir{{y{%, porque la plataforma los interpreta como variables.
Los cambios de este modal se guardan junto con el resto al presionar Guardar borrador, y se publican con Publicar cambios como cualquier otro cambio. Son los mismos campos CSS y JS que encuentras en Edición avanzada, dentro de Pixel, CSS y JS propios (avanzado): editarlos en un lugar los cambia en el otro.
Editar el código HTML
Si prefieres (o necesitas) escribir el HTML directamente, usa Más acciones → Editar código desde la página de detalle. Se abre un editor de código con:
- Resaltado de sintaxis en colores, igual que un editor de código profesional.
- Formateo automático — el HTML y el CSS se indentan y ordenan solos, aunque el editor visual los haya guardado en una sola línea.
- Un botón Insertar imagen que abre el mismo selector de imágenes que el editor visual, para pegar la URL en el punto exacto donde tengas el cursor.
Puedes alternar entre el editor visual y el de código sin perder cambios: lo que guardas en uno se ve en el otro. Si escribes HTML a mano y quieres que el mapa de clics y el reporte de scroll funcionen bien, revisa la guía de tracking en landings.