# Landing Page

## Hablla — Landing Page

Purpose: to build and publish a simple landing page using visual blocks or code (HTML/CSS).

\
Important: before editing, have HTML and CSS ready (you can ask an AI to generate them).

<br>

<figure><img src="/files/10ae999d19d5b66235f9a5d80e9001c05fad3a64" alt=""><figcaption></figcaption></figure>

***

### 1) Access and create the project

1. Go to Marketing → Landing Page.\ <br>
2. Click Add project (blank template) and give it a name.\ <br>

Result: you enter the Project Editor.

<figure><img src="/files/ddb5b1f33c6d3199882e9df7098a70eb8e2e30ff" alt=""><figcaption></figcaption></figure>

***

### 2) Understanding the Editor screen

* Top (right):\ <br>
* Create template → saves the current layout as a template to reuse later.\ <br>
* Code Editor → opens a modal with two tabs to paste HTML and CSS.\ <br>
* Save and Publish → publishes the page (the link will be available in the project list).\ <br>
* Top (center): Desktop/Mobile selector (to check responsiveness).\ <br>
* Left: Pages and Layers (element tree to ease selection).\ <br>
* Center: Canvas (where you view and build the page).\ <br>
* Right: Styles and Properties (visual adjustments and attributes of the selected item).

<figure><img src="/files/54560215e6680b471673c3aadfca7d02865c1059" alt=""><figcaption></figcaption></figure>

\ <br>

***

### 3) Option A — Build with blocks (drag & drop)

In the Blocks panel (palette), you have the components:

* Section (creates a section); 1 Column / 2 Columns / 3 Columns (column structure)\ <br>
* Heading (title), Text (text)\ <br>
* Image (image), Link / Link Box (links), Video, Map\ <br>

How to use (quick example):

1. Drag a Section to the Canvas.\ <br>
2. Inside it, drag 2 Columns.\ <br>
3. On the left: Heading + Text. On the right: Image (upload it).\ <br>
4. Select each item and adjust in Styles (typography, color, spacing, background).\ <br>

***

<br>

### 4) Option B — Build with code (HTML/CSS)

1. Click Code Editor.\ <br>
2. In the HTML tab, paste your landing's HTML.\ <br>
3. In the CSS tab, paste the styles.\ <br>
4. Click Save to apply to the Canvas.\ <br>

Note: if you want to use the platform's native form later (for lead/tag/webhook), do not insert \<form> in the HTML — build the visual structure and, when there is the form block, use it in the editor.

<figure><img src="/files/3839d2c6d75e9fbf3e1bb611555f09f73a2a658f" alt=""><figcaption></figcaption></figure>

***

5\) Publish and get the link

1. Click Save and Publish.\ <br>
2. Return to the project list; the published project shows Active Link.\ <br>
3. Copy the link for distribution.\
   \ <br>

***

\ <br>

### &#x20;Quick checklist

* HTML and CSS pasted (or blocks added) and saved\ <br>
* Visual adjustments in Styles/Properties\ <br>
* Desktop/Mobile checked\ <br>
* Save and Publish done\ <br>
* Link with Active Link copied\ <br>
* (Optional) Create template to reuse\ <br>

***

#### Final tip (prerequisite)

If you don't have code, ask an AI: “Generate HTML (no frameworks) and mobile-first CSS for a landing with a hero (title, subtitle, CTA), 3 benefits in cards and a final CTA.”\
Then paste into the Code Editor (HTML/CSS) and adjust in Styles.

<br>

***

###

<br>


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.