Formation Webflow, création de sites professionnels sans code

Programme détaillé

8 modules, construits autour de vos cas réels.

Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.

1. 01Prendre en main Webflow et comprendre sa logique de production

   Chapitres

   • Découvrir l'interface Webflow, le Designer, le panneau Navigator et les zones de paramétrage du projet.
   • Comprendre l'articulation entre le canvas visuel, la structure HTML générée, les classes CSS et les interactions.
   • Identifier les différences concrètes entre pages statiques, composants, collections CMS et contenus dynamiques.
   • Repérer les réglages de projet, les options de publication et l'organisation générale du site dans les Project Settings.
   • Adopter une méthode de travail pour concevoir, prévisualiser, corriger et publier une page.
   • Situer Webflow dans une chaîne de production web sans code et low-code.
2. 02Structurer des pages professionnelles avec les éléments de mise en page

   Chapitres

   • Construire une page à partir de sections, conteneurs, divs, blocs et grilles.
   • Comprendre la hiérarchie des éléments dans le Navigator et organiser l'information de façon lisible.
   • Utiliser correctement les balises de base : titres, paragraphes, liens, images, listes et boutons.
   • Gérer les espacements, alignements, dimensions et comportements via le panneau Style.
   • Réaliser une mise en application encadrée sur une page vitrine ou institutionnelle.
3. 03Maîtriser les classes, styles et composants réutilisables

   Chapitres

   • Comprendre la logique des classes Webflow et leur impact sur la cohérence visuelle du site.
   • Créer et organiser des classes réutilisables pour textes, boutons, sections et cartes.
   • Exploiter les combo classes et les classes globales pour mutualiser le style sans casser la structure.
   • Structurer une base graphique homogène avec les Style Guide et les variables.
   • Convertir des éléments récurrents en composants et propager les mises à jour.
   • Définir des conventions de nommage simples pour préserver la maintenabilité du projet.
4. 04Concevoir des interfaces responsive sur tous les écrans

   Chapitres

   • Comprendre le fonctionnement des breakpoints Webflow et leur cascade descendante puis ascendante.
   • Ajuster mises en page, tailles, espacements et comportements pour desktop, tablette et mobile.
   • Prioriser contenus et actions selon le confort d'usage de chaque support.
   • Tester la cohérence visuelle et fonctionnelle des pages dans les différents contextes d'affichage.
   • Repérer et corriger les erreurs fréquentes de responsive design liées au box model et au flux.
5. 05Gérer les contenus dynamiques avec le CMS Webflow

   Chapitres

   • Comprendre le rôle des collections CMS dans la production de contenus structurés et réutilisables.
   • Créer des collections de type actualités, projets, équipes, services ou témoignages.
   • Définir les champs de collection adaptés à une publication claire et durable.
   • Concevoir des Collection Pages et des Collection Lists pour automatiser l'affichage.
   • Filtrer, trier et relier les contenus CMS aux composants et aux pages.
   • Réaliser une mise en application encadrée sur une structure de contenus dynamiques courante.
6. 06Intégrer médias, interactions et navigation

   Chapitres

   • Importer et organiser les médias en tenant compte de la qualité d'affichage et de la performance.
   • Construire menus, liens internes, appels à l'action et parcours de navigation clairs.
   • Configurer des interactions Webflow déclenchées au scroll, au survol ou au clic.
   • Animer des éléments de façon sobre et pertinente selon le contexte de communication.
   • Contrôler la cohérence entre intention graphique, usage réel et comportement du site.
7. 07Appliquer les bonnes pratiques SEO, accessibilité et qualité web

   Chapitres

   • Structurer les pages avec une hiérarchie de titres cohérente et des contenus lisibles.
   • Renseigner les éléments de référencement : balises title, meta description, slugs et Open Graph.
   • Améliorer l'accessibilité : contrastes, textes alternatifs, clarté des liens et structure des contenus.
   • Optimiser les médias et le poids des pages pour limiter les impacts sur les performances.
   • Repérer les erreurs courantes qui nuisent à l'indexation ou à l'expérience utilisateur.
   • Mettre en place une routine de contrôle qualité avant chaque publication.
8. 08Publier, administrer et faire évoluer un site Webflow

   Chapitres

   • Maîtriser les options de prévisualisation, de mise en ligne et de gestion de domaine personnalisé.
   • Gérer les mises à jour de contenus, de composants et de structures dans la continuité.
   • Identifier les points de vigilance liés à la maintenance et à la gouvernance éditoriale.
   • Prévenir les erreurs liées aux modifications de classes, de structure ou de contenus dynamiques.
   • Inscrire l'usage de Webflow dans une démarche durable d'autonomie et d'amélioration continue.