Landing Page
Hablla — Página de destino
Para qué sirve: construir y publicar una landing page simple, usando bloques visuales o código (HTML/CSS).
Importante: antes de editar, tenga un HTML y un CSS listos (puede pedir a una IA que los genere).
1) Acceso y creación del proyecto
Vaya a Marketing → Landing Page.
Haga clic en Añadir proyecto (plantilla en blanco) y déle un nombre.
Resultado: entra en el Editor del proyecto.
2) Entendiendo la pantalla del Editor
Parte superior (derecha):
Crear plantilla → guarda el diseño actual como una plantilla para reutilizar después.
Editor de Código → abre un modal con dos pestañas para pegar HTML y CSS.
Guardar y Publicar → publica la página (el enlace quedará disponible en la lista de proyectos).
Parte superior (centro): selector Desktop/Mobile (para comprobar la responsividad).
Izquierda: Páginas y Capas (árbol de los elementos para facilitar la selección).
Centro: Canvas (donde ves y montas la página).
Derecha: Styles y Properties (ajustes visuales y atributos del elemento seleccionado).
3) Opción A — Montar con bloques (arrastrar y soltar)
En el panel de Blocks (paleta), tienes los componentes:
Section (crea una sección); 1 Column / 2 Columns / 3 Columns (estructura de columnas)
Heading (título), Text (texto)
Image (imagen), Link / Link Box (enlaces), Video, Map
Cómo usar (ejemplo rápido):
Arrastre una Section al Canvas.
Dentro de ella, arrastre 2 Columns.
A la izquierda: Heading + Text. A la derecha: Image (suba la imagen).
Seleccione cada elemento y ajuste en Styles (tipografía, color, espaciado, fondo).
4) Opción B — Montar con código (HTML/CSS)
Haga clic en Editor de Código.
En la pestaña HTML, pegue el HTML de su landing.
En la pestaña CSS, pegue los estilos.
Haga clic en Guardar para aplicar en el Canvas.
Observación: si desea usar el formulario nativo de la plataforma después (para lead/tag/webhook), no inserte <form> en el HTML — construya la estructura visual y, cuando exista el bloque de formulario, úselo en el editor.
5) Publicar y obtener el enlace
Haga clic en Guardar y Publicar.
Vuelva a la lista de proyectos; el proyecto publicado muestra Enlace activo.
Copie el enlace para difusión.
Checklist rápido
HTML y CSS pegados (o bloques añadidos) y guardados
Ajustes visuales en Styles/Properties
Desktop/Mobile comprobado
Guardar y Publicar realizado
Enlace con Enlace activo copiado
(Opcional) Crear plantilla para reutilizar
Consejo final (prerrequisito)
Si no tiene código, pida a una IA: “Generar HTML (sin frameworks) y CSS mobile-first para una landing con hero (título, subtítulo, CTA), 3 beneficios en tarjetas y CTA final.” Después, pegue en el Editor de Código (HTML/CSS) y ajuste en Styles.
Última actualización
¿Te fue útil?