# Page d'atterrissage

## Hablla — Page d'atterrissage

À quoi ça sert : construire et publier une landing page simple, en utilisant des blocs visuels ou du code (HTML/CSS).

\
Important : avant d'éditer, ayez un HTML et un CSS prêts (vous pouvez demander à une IA de les générer).

<br>

<figure><img src="https://2835740493-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) Accès et création du projet

1. Allez dans Marketing → Landing Page.\ <br>
2. Cliquez sur Ajouter un projet (modèle vierge) et donnez-lui un nom.\ <br>

Résultat : vous entrez dans l'Éditeur du projet.

<figure><img src="https://2835740493-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) Comprendre l'écran de l'Éditeur

* Haut (droite) :\ <br>
* Créer un modèle → enregistre la mise en page actuelle comme template à réutiliser plus tard.\ <br>
* Éditeur de Code → ouvre une modal avec deux onglets pour coller le HTML et le CSS.\ <br>
* Enregistrer et Publier → publie la page (le lien sera disponible dans la liste des projets).\ <br>
* Haut (centre) : sélecteur Desktop/Mobile (pour vérifier le responsive).\ <br>
* Gauche : Pages et Layers (arborescence des éléments pour faciliter la sélection).\ <br>
* Centre : Canvas (où vous voyez et construisez la page).\ <br>
* Droite : Styles et Propriétés (réglages visuels et attributs de l'élément sélectionné).

<figure><img src="https://2835740493-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 — Monter avec des blocs (glisser-déposer)

Dans le panneau Blocks (palette), vous avez les composants :

* Section (crée une section) ; 1 Colonne / 2 Colonnes / 3 Colonnes (structure de colonnes)\ <br>
* Heading (titre), Text (texte)\ <br>
* Image (image), Link / Link Box (liens), Vidéo, Carte\ <br>

Comment utiliser (exemple rapide) :

1. Faites glisser une Section sur le Canvas.\ <br>
2. À l'intérieur, faites glisser 2 Colonnes.\ <br>
3. À gauche : Heading + Text. À droite : Image (téléversez-la).\ <br>
4. Sélectionnez chaque élément et ajustez dans Styles (typographie, couleur, espacement, fond).\ <br>

***

<br>

### 4) Option B — Monter avec du code (HTML/CSS)

1. Cliquez sur Éditeur de Code.\ <br>
2. Dans l'onglet HTML, collez le HTML de votre landing.\ <br>
3. Dans l'onglet CSS, collez les styles.\ <br>
4. Cliquez sur Enregistrer pour appliquer sur le Canvas.\ <br>

Remarque : si vous souhaitez utiliser le formulaire natif de la plateforme ensuite (pour lead/tag/webhook), n'insérez pas de \<form> dans le HTML — construisez la structure visuelle et, lorsqu'il y aura le bloc de formulaire, utilisez-le dans l'éditeur.

<figure><img src="https://2835740493-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\) Publier et obtenir le lien

1. Cliquez sur Enregistrer et Publier.\ <br>
2. Retournez à la liste des projets ; le projet publié affiche Lien actif.\ <br>
3. Copiez le lien pour diffusion.\
   \ <br>

***

\ <br>

### &#x20;Checklist rapide

* HTML et CSS collés (ou blocs ajoutés) et enregistrés\ <br>
* Ajustements visuels dans Styles/Properties\ <br>
* Desktop/Mobile vérifié\ <br>
* Enregistrer et Publier effectué\ <br>
* Lien avec Lien actif copié\ <br>
* (Optionnel) Créer un modèle pour réutiliser\ <br>

***

#### Conseil final (pré-requis)

Si vous n'avez pas de code, demandez à une IA : « Générer HTML (sans frameworks) et CSS mobile-first pour une landing avec hero (titre, sous-titre, CTA), 3 bénéfices en cartes et CTA final. »\
Ensuite, collez dans l'Éditeur de Code (HTML/CSS) et ajustez dans Styles.

<br>

***

###

<br>