Page de destination
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).
1) Accès et création du projet
Allez dans Marketing → Landing Page.
Cliquez sur Ajouter un projet (modèle vierge) et donnez-lui un nom.
Résultat : vous entrez dans l'Éditeur du projet.
2) Comprendre l'écran de l'Éditeur
Haut (droite) :
Créer un modèle → enregistre la mise en page actuelle comme template à réutiliser plus tard.
Éditeur de Code → ouvre une modal avec deux onglets pour coller le HTML et le CSS.
Enregistrer et Publier → publie la page (le lien sera disponible dans la liste des projets).
Haut (centre) : sélecteur Desktop/Mobile (pour vérifier le responsive).
Gauche : Pages et Layers (arborescence des éléments pour faciliter la sélection).
Centre : Canvas (où vous voyez et construisez la page).
Droite : Styles et Propriétés (réglages visuels et attributs de l'élément sélectionné).
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)
Heading (titre), Text (texte)
Image (image), Link / Link Box (liens), Vidéo, Carte
Comment utiliser (exemple rapide) :
Faites glisser une Section sur le Canvas.
À l'intérieur, faites glisser 2 Colonnes.
À gauche : Heading + Text. À droite : Image (téléversez-la).
Sélectionnez chaque élément et ajustez dans Styles (typographie, couleur, espacement, fond).
4) Option B — Monter avec du code (HTML/CSS)
Cliquez sur Éditeur de Code.
Dans l'onglet HTML, collez le HTML de votre landing.
Dans l'onglet CSS, collez les styles.
Cliquez sur Enregistrer pour appliquer sur le Canvas.
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.
5) Publier et obtenir le lien
Cliquez sur Enregistrer et Publier.
Retournez à la liste des projets ; le projet publié affiche Lien actif.
Copiez le lien pour diffusion.
Checklist rapide
HTML et CSS collés (ou blocs ajoutés) et enregistrés
Ajustements visuels dans Styles/Properties
Desktop/Mobile vérifié
Enregistrer et Publier effectué
Lien avec Lien actif copié
(Optionnel) Créer un modèle pour réutiliser
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.
Mis à jour
Ce contenu vous a-t-il été utile ?