01
Comprendre Webflow
Positionner l'outil, lire son interface et comprendre la logique de boîtes avant de toucher au style.
FlowRise
Édition FlowRise · PDF buyer-ready
Module 1 · Fondations Webflow
Module 1Webflow Essentials · 2026
De zéro à votre premier site en ligne
Fondations
Webflow
Un module d'amorçage pour comprendre l'outil, structurer une page propre, installer un système visuel simple et publier une première version crédible.
02
Structure HTML visuelle
Construire une page comme un système de blocs, puis utiliser Flexbox, Grid et les espacements avec méthode.
03
Typographie et couleurs
Poser un système visuel réutilisable pour gagner en cohérence, en vitesse et en qualité perçue.
04
Votre premier site en ligne
Passer du projet local à une première version publiable avec domaine, réglages SEO et partage propre.
FlowRise
Cadre du module
Module 1 · Fondations Webflow
Comment utiliser ce module
Un support conçu pour apprendre en construisant.
Ouvrez Webflow dans un onglet voisin et traitez ce PDF comme un workbook. L'objectif n'est pas de consommer de la théorie, mais d'installer des réflexes: structure d'abord, style ensuite, publication à la fin.
4
chapitres progressifs
1
premier site mis en ligne
0
ligne de code requise
À la fin, vous saurez
- situer Webflow par rapport aux autres outils du marché;
- poser une hiérarchie propre avec sections, containers et blocs;
- styler textes, couleurs et boutons sans créer du chaos;
- préparer un site assez propre pour être publié et partagé.
Rythme conseillé
- Lire une double page maximum.
- Reproduire immédiatement la manipulation dans Webflow.
- Corriger la structure dans le Navigator avant de styliser.
- Tester mobile avant de considérer l'exercice terminé.
Tip
Travaillez avec une page simple, une seule intention et un seul bouton principal. Vous apprendrez plus vite qu'en essayant de tout faire dès le premier essai.
Exercice
Créez un nouveau projet vierge et gardez-le ouvert jusqu'à la fin du module. Il servira de terrain d'entraînement pour chaque chapitre.
FlowRise
Chapitre 1
Module 1 · Fondations Webflow
01
Chapitre 1
Comprendre Webflow
Webflow ne remplace pas la logique du web: il la rend visible. Chaque titre, chaque div, chaque marge et chaque grille existe réellement dans le HTML/CSS généré. C'est ce qui le rend plus puissant qu'un simple constructeur de blocs.
Webflow
Le plus précis visuellement. Vous manipulez une vraie logique web, sans empiler des plugins à l'aveugle.
WordPress
Très flexible, mais la qualité dépend vite du thème, du builder et des extensions retenues.
Wix
Rapide à prendre en main, mais plus limité dès qu'on veut un système de mise en page plus propre.
Squarespace
Très bon pour des sites simples et éditoriaux, mais moins fin pour construire un design sur mesure.
L'interface à retenir
Designer
Là où vous construisez la page: structure, classes, styles, responsive et interactions.
CMS
Là où vous gérez des contenus dynamiques comme des articles, projets, témoignages ou fiches produit.
Editor
L'espace simplifié pour modifier les textes et contenus sans toucher au système de design.
Dashboard
Le cockpit du projet: réglages, hébergement, domaine, publication et accès à l'équipe.
Logique de boîtes
- Une section pose un grand contexte de page.
- Un container garde la lecture confortable.
- Une div organise les éléments internes avec précision.
- Le Navigator doit raconter cette hiérarchie clairement.
Exercice
Créez un premier projet, ouvrez le Designer, puis identifiez sans hésiter le canvas, le Navigator et le panneau Style. Si vous ne savez pas où vous êtes, vous irez trop vite sur le style.
FlowRise
Chapitre 2
Module 1 · Fondations Webflow
02
Chapitre 2
Structure HTML visuelle
Sections
Les grands blocs verticaux de la page. Elles découpent le récit: hero, preuves, offre, FAQ, footer.
Containers
Ils limitent la largeur et évitent les lignes trop longues. Pensez lisibilité avant décoration.
Colonnes
Elles servent à distribuer le contenu. Deux colonnes pour expliquer, trois pour comparer, quatre avec prudence.
Flexbox vs Grid
Flexbox
Utilisez-le pour aligner une suite d'éléments dans un axe principal: colonne hero, rangée de cartes, bouton + texte.
Grid
Utilisez-le quand vous dessinez une vraie architecture en deux dimensions: colonnes et rangées contrôlées dès le départ.
Espacement propre
- Le padding crée l'air à l'intérieur d'un bloc.
- La margin gère la distance entre deux blocs.
- Un gap cohérent vaut mieux que des marges bricolées partout.
- Gardez des rythmes répétables: 8, 16, 24, 32, 48, 64 px.
Tip
Si un layout devient confus, revenez au parent. Dans Webflow, les bons réglages se trouvent souvent sur le conteneur, pas sur les enfants.
Exercice
Construisez une hero simple avec une section, un container, un titre, un paragraphe et un bouton. Testez-la ensuite en desktop, tablette puis mobile.
FlowRise
Chapitre 3
Module 1 · Fondations Webflow
03
Chapitre 3
Typographie et couleurs
Un bon site Webflow ne dépend pas de dizaines d'effets. Il repose sur une hiérarchie de texte claire, deux ou trois tailles bien choisies et une palette globale tenue du début à la fin.
Import de fontes
Google Fonts ou Adobe Fonts suffisent pour démarrer. L'important est de limiter le nombre de familles et de rôles.
Styles texte
Créez des rôles, pas des exceptions: titre hero, H2, body, meta, bouton. Vous irez plus vite sur tout le site.
Palette globale
Choisissez une couleur de fond, une couleur de texte, un accent et un neutre secondaire. Ensuite, tenez la ligne.
Système texte minimal
- Un titre hero fort pour capter l'attention.
- Un style H2 pour les sections.
- Un style body lisible pour les paragraphes.
- Un style meta pour labels, badges et menus.
Palette recommandée
#0A0A0A · fond principal
#F5EFE6 · texte / fond clair
#F2E03D · accent / CTA / repères
Exercice
Reproduisez une petite maquette: un titre, un sous-texte, un bouton, un fond et une couleur d'accent. L'objectif n'est pas l'effet wow, mais la cohérence.
FlowRise
Chapitre 4
Module 1 · Fondations Webflow
04
Chapitre 4
Votre premier site en ligne
Template ou page blanche
Template
Le meilleur choix pour aller vite si vous commencez par remplacer le système global avant les contenus.
Zéro
Le meilleur choix pour apprendre vraiment comment se construit une structure propre et réutilisable.
Pipeline de mise en ligne
- Choisir une base: template pour accélérer, page blanche pour apprendre plus en profondeur.
- Personnaliser le système global d'abord: couleurs, fontes, boutons, espacements, containers.
- Brancher le domaine, vérifier le SSL et relire les réglages SEO essentiels.
- Publier sur le sous-domaine de test, relire, puis partager la version finale.
SEO de base
- Nommer correctement la page et écrire une meta description claire.
- Vérifier la hiérarchie des titres: un H1, puis des H2/H3 logiques.
- Renseigner les textes alternatifs des images utiles.
- Optimiser les images avant import et tester le mobile avant publication.
Tip
Publiez d'abord une version propre, pas parfaite. Un site clair, rapide et lisible vaut plus qu'un projet jamais mis en ligne parce qu'il attend une finition infinie.
FlowRise
Clôture du module
Module 1 · Fondations Webflow
Synthèse
Ce que vous devez retenir
Pensez toujours dans cet ordre: structure, système, responsive, publication. Quand ce séquençage devient un réflexe, Webflow cesse d'être intimidant.
01
Comprendre l'outil avant de styliser.
02
Faire raconter la structure par le Navigator.
03
Réutiliser classes, rythmes et couleurs.
04
Tester le mobile avant chaque mise en ligne.
Exercice final
Refaites la même hero deux fois: une version alignée à gauche, puis une version centrée. Si la structure reste propre dans les deux cas, vous avez compris le coeur du module.
Checklist avant module 2
- Je sais distinguer Dashboard, Designer et Editor.
- Je sais quand utiliser section, container et div.
- Je sais régler padding, margin et gap sans bricoler.
- Je peux publier une première version sans bloquer.