> For the complete documentation index, see [llms.txt](https://docs.hablla.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hablla.com/hablla-docs-es/hablla/marketing/landing-page.md).

# 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="/files/8e71c3b451241db1e707561a6a3339d07135a6be" 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="/files/88a30d10ae854bdbab004fe0eb20cf67ddb5f47f" 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="/files/e954161fe5a3b1d1931f2ec95565506c35c09829" 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="/files/b4a790fd7e63ceee65b0f35f7e91f8df9580e717" 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hablla.com/hablla-docs-es/hablla/marketing/landing-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.