# 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).

<br>

<figure><img src="https://4006966930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F7KePmGfybX6XU1VCmshp%2Funknown.png?alt=media&#x26;token=d9ec388a-8eb8-4203-8146-bdd4eb01c8a2" alt=""><figcaption></figcaption></figure>

***

### 1) Acceso y creación del proyecto

1. Vaya a Marketing → Landing Page.\ <br>
2. Haga clic en Añadir proyecto (plantilla en blanco) y déle un nombre.\ <br>

Resultado: entra en el Editor del proyecto.

<figure><img src="https://4006966930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2Fcwo5gsB40v7P4r50k4E4%2Funknown.png?alt=media&#x26;token=9643d627-eae8-4521-8ca4-10684471a866" alt=""><figcaption></figcaption></figure>

***

### 2) Entendiendo la pantalla del Editor

* Parte superior (derecha):\ <br>
* Crear plantilla → guarda el diseño actual como una plantilla para reutilizar después.\ <br>
* Editor de Código → abre un modal con dos pestañas para pegar HTML y CSS.\ <br>
* Guardar y Publicar → publica la página (el enlace quedará disponible en la lista de proyectos).\ <br>
* Parte superior (centro): selector Desktop/Mobile (para comprobar la responsividad).\ <br>
* Izquierda: Páginas y Capas (árbol de los elementos para facilitar la selección).\ <br>
* Centro: Canvas (donde ves y montas la página).\ <br>
* Derecha: Styles y Properties (ajustes visuales y atributos del elemento seleccionado).

<figure><img src="https://4006966930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F8hjuro0b4Bur3fPX3Ssq%2Funknown.png?alt=media&#x26;token=7dc520d4-56cc-4c45-9a5a-abef9a5d19ae" alt=""><figcaption></figcaption></figure>

\ <br>

***

### 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)\ <br>
* Heading (título), Text (texto)\ <br>
* Image (imagen), Link / Link Box (enlaces), Video, Map\ <br>

Cómo usar (ejemplo rápido):

1. Arrastre una Section al Canvas.\ <br>
2. Dentro de ella, arrastre 2 Columns.\ <br>
3. A la izquierda: Heading + Text. A la derecha: Image (suba la imagen).\ <br>
4. Seleccione cada elemento y ajuste en Styles (tipografía, color, espaciado, fondo).\ <br>

***

<br>

### 4) Opción B — Montar con código (HTML/CSS)

1. Haga clic en Editor de Código.\ <br>
2. En la pestaña HTML, pegue el HTML de su landing.\ <br>
3. En la pestaña CSS, pegue los estilos.\ <br>
4. Haga clic en Guardar para aplicar en el Canvas.\ <br>

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.

<figure><img src="https://4006966930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FXzTVA7VbLe2FgPMfcbV4%2Funknown.png?alt=media&#x26;token=a62f3df0-dccc-448d-b457-4f01c9d94c9f" alt=""><figcaption></figcaption></figure>

***

5\) Publicar y obtener el enlace

1. Haga clic en Guardar y Publicar.\ <br>
2. Vuelva a la lista de proyectos; el proyecto publicado muestra Enlace activo.\ <br>
3. Copie el enlace para difusión.\
   \ <br>

***

\ <br>

### &#x20;Checklist rápido

* HTML y CSS pegados (o bloques añadidos) y guardados\ <br>
* Ajustes visuales en Styles/Properties\ <br>
* Desktop/Mobile comprobado\ <br>
* Guardar y Publicar realizado\ <br>
* Enlace con Enlace activo copiado\ <br>
* (Opcional) Crear plantilla para reutilizar\ <br>

***

#### 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.

<br>

***

###

<br>