Ce que vous allez construire

À la fin de ce guide, vous aurez une landing page complète avec : — Section hero avec titre, sous-titre et bouton CTA — Rangée de preuves sociales (logos ou témoignage) — Section fonctionnalités (grille en 3 colonnes) — Section tarification — Accordéon FAQ — Formulaire de capture de leads (connecté à Supabase ou un webhook Make) — Publiée sur un domaine personnalisé avec HTTPS

Temps de construction total : 4 à 6 heures pour une première construction, 1 à 2 heures une fois que vous l'avez déjà fait. Avec un peu de pratique, une landing page WeWeb complète devient une journée de travail — bien moins que les 2 à 3 semaines d'un développement sur mesure.

Étape 1 : configurer votre projet

Créez un nouveau projet WeWeb. Choisissez "Vide" — n'utilisez pas de template si vous voulez un contrôle total de la structure.

Premières étapes de configuration : 1. Définissez votre police par défaut dans Paramètres du projet → Polices. Importez une police Google (Inter ou Plus Jakarta Sans fonctionnent bien pour les SaaS). 2. Définissez vos couleurs de marque comme tokens de design dans le panneau Styles : primaire, secondaire, texte, arrière-plan, bordure. 3. Définissez la largeur de la page : max-width 1280px, centré, avec 24px de padding horizontal sur mobile.

Investissez 20 minutes ici. Bien configurer les tokens maintenant économise des heures d'incohérence plus tard. C'est l'étape que les débutants sautent et qu'ils regrettent toujours — un système de design cohérent est la différence entre une landing page qui ressemble à du no-code et une qui ressemble à un vrai produit.

Étapes 2 et 3 : hero et preuve sociale

Hero (étape 2) : c'est la section la plus importante — construisez-la en premier. Structure : Section (hauteur plein viewport, contenu centré), badge optionnel, H1 (titre principal — le résultat), paragraphe (sous-titre), div (boutons CTA), div (image hero ou screenshot produit).

Conseils WeWeb pour le hero : — Utilisez un élément Section, pas un Container, pour que l'arrière-plan s'étende sur toute la largeur — Réglez la taille de police du H1 à une variable de breakpoint WeWeb : 56px bureau, 40px tablette, 32px mobile — Ajoutez un dégradé ou une texture subtile à l'arrière-plan — les heros purement noirs/blancs paraissent plats

Preuve sociale (étape 3) : placez-la directement sous le hero. Utilisez une rangée Flexbox avec justify-content: center, gap: 32px. Ajoutez des logos d'entreprises (SVG ou WebP, gris/opacité 60%). Puis la section fonctionnalités : grille CSS à 3 colonnes, chaque carte avec icône 24px, H3 (nom de la fonctionnalité), P (description en une phrase).

Étapes 4 et 5 : tarification et FAQ

Tarification (étape 4) : un layout de tarification en trois colonnes est le standard SaaS. Construisez-le avec une CSS Grid : trois colonnes égales, colonne centrale mise en évidence (arrière-plan différent, badge "Plus populaire").

Chaque carte de tarification a besoin de : nom du plan (H3), prix + période de facturation, 4 à 6 bullet points de fonctionnalités, bouton CTA.

Astuce WeWeb : liez le contenu de la carte de tarification à une variable WeWeb (tableau d'objets). Cela vous permet de changer les prix et les fonctionnalités depuis un objet de données sans éditer chaque carte individuellement. Quand votre tarification change, mettez à jour un tableau — les trois cartes se mettent à jour automatiquement.

FAQ accordéon (étape 5) : créez une variable WeWeb openFaqIndex (type : Nombre, défaut : -1). Sur chaque clic de question, définissez openFaqIndex = index de cet élément (ou -1 s'il est déjà ouvert). Affichez/masquez chaque div de réponse : ajoutez une condition "openFaqIndex === thisIndex". Zéro JavaScript écrit.

Étape 6 : formulaire de capture de leads

Ajoutez un formulaire au-dessus du pied de page. Gardez-le minimal : Nom, Email professionnel, bouton CTA ("Réserver une démo" ou "Commencer l'essai gratuit").

Connexion du formulaire à Supabase : 1. Dans WeWeb, ajoutez un composant Form 2. Ajoutez une Action à la soumission : "Insérer une ligne" → votre table Supabase "leads" 3. Ajoutez une deuxième Action : afficher un message de succès (basculer la visibilité d'un div de remerciement)

Connexion à Make à la place : 1. Créez un scénario webhook Make 2. Dans WeWeb, utilisez l'action "Requête HTTP" à la soumission du formulaire → POST vers votre URL de webhook Make 3. Dans Make : ajoutez notification email + création de ligne HubSpot/Notion/Airtable

Ajoutez toujours un champ honeypot (input caché que les vrais utilisateurs ne remplissent jamais — les bots le font). Filtrez toute soumission où le champ honeypot n'est pas vide. Conforme RGPD : ajoutez également une case à cocher de consentement explicite liée à votre politique de confidentialité.

Étape 7 : publier sur votre domaine

Dans WeWeb, allez dans Hébergement → Domaine personnalisé. 1. Ajoutez votre domaine (ex. app.votresite.com ou votresite.com) 2. WeWeb vous donne un enregistrement CNAME à ajouter chez votre fournisseur DNS 3. Ajoutez le CNAME, attendez la propagation DNS (généralement 5 à 30 minutes) 4. WeWeb provisionne automatiquement un certificat SSL via Let's Encrypt

Avant de publier : — Vérifiez chaque section à 375px, 768px et 1280px — Lancez un audit Lighthouse (Chrome DevTools → onglet Lighthouse) — visez 90+ en performance — Vérifiez le titre de page et la meta description dans les paramètres SEO de WeWeb — Ajoutez votre extrait Google Analytics ou Plausible dans Paramètres du projet → Code personnalisé → <head> — Assurez-vous que votre bannière de cookies est conforme au RGPD (via Axeptio ou Cookiebot — les deux ont une intégration WeWeb)

Publiez et vous êtes en ligne. Temps total : une journée.