# 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="https://1592162275-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) 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="https://1592162275-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) 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="https://1592162275-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) 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="https://1592162275-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\) 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>