Webflow – création de sites professionnels sans code

Cette formation permet de concevoir, structurer et publier des sites professionnels avec Webflow dans une logique de production sans code.

Durée : 

21 à 35 heures
Présentiel ou classe virtuelle

Intra-Entreprise : Tarif identique de 1 à 12 participants

Objectifs Pédagogiques & Opérationnels

• Comprendre l’environnement Webflow et son positionnement dans une chaîne de production web sans code.
• Concevoir des pages et des gabarits professionnels en structurant correctement les sections, composants et styles.
• Créer des interfaces web cohérentes, responsives et maintenables dans le respect des bonnes pratiques de design et d’ergonomie.
• Gagner en autonomie dans la gestion des contenus, des collections CMS, des composants réutilisables et des paramètres de publication.
• Intégrer les bonnes pratiques de qualité visuelle, d’accessibilité, de performance, de référencement naturel et de maintenance courante.
• Faire évoluer un site Webflow de manière durable en articulant design, contenu, structure et logique de production.

Description

Module 1 — Prendre en main Webflow et comprendre sa logique de production
  1. Découvrir l’interface Webflow, ses espaces de travail et les principales zones de paramétrage.
  2. Comprendre la logique du designer visuel et son articulation avec la structure HTML, les classes CSS et les interactions.
  3. Identifier les différences entre pages statiques, composants, collections CMS et contenus dynamiques.
  4. Repérer les réglages essentiels liés au projet, à la publication et à l’organisation générale du site.
  5. Adopter une méthode de travail claire pour concevoir, tester, corriger et publier des pages.
  6. Situer Webflow dans un écosystème de production web sans code ou low-code.
Module 2 — Structurer des pages professionnelles dans Webflow
  1. Construire une page à partir de sections, conteneurs, blocs, grilles et éléments de contenu.
  2. Comprendre les principes de hiérarchie, de composition visuelle et d’organisation de l’information.
  3. Utiliser correctement les balises de base : titres, paragraphes, liens, images, listes, boutons et éléments d’interface.
  4. Créer des mises en page lisibles, cohérentes et adaptées aux usages web actuels.
  5. Gérer les espacements, alignements, dimensions et comportements des éléments dans la page.
  6. Réaliser de courtes mises en application encadrées autour de pages vitrines ou institutionnelles.
Module 3 — Maîtriser les styles, classes et composants réutilisables
  1. Comprendre la logique des classes dans Webflow et leur impact sur la cohérence visuelle du site.
  2. Créer et organiser des styles réutilisables pour les textes, boutons, sections, cartes et composants fréquents.
  3. Structurer une base graphique homogène dans une logique de design system simplifié.
  4. Utiliser les composants pour mutualiser des éléments récurrents et faciliter les mises à jour.
  5. Éviter les dérives de structure ou de nommage qui fragilisent la maintenance du projet.
  6. Mettre en place des conventions simples pour gagner en lisibilité et en efficacité de production.
Module 4 — Concevoir des interfaces responsive et adaptées aux différents écrans
  1. Comprendre le fonctionnement des breakpoints dans Webflow et leur rôle dans l’adaptation responsive.
  2. Ajuster les mises en page, tailles, espacements et comportements selon les écrans desktop, tablette et mobile.
  3. Prioriser les contenus et les actions dans une logique de confort d’usage sur tous les supports.
  4. Repérer les erreurs fréquentes de responsive design et les corriger méthodiquement.
  5. Tester la cohérence visuelle et fonctionnelle des pages sur différents contextes d’affichage.
  6. Intégrer les bonnes pratiques de lisibilité, de navigation et de hiérarchisation mobile.
Module 5 — Gérer les contenus dynamiques avec le CMS Webflow
  1. Comprendre le rôle des collections CMS dans la production de contenus structurés et réutilisables.
  2. Créer des collections adaptées à des besoins de type actualités, projets, équipes, services, témoignages ou ressources.
  3. Définir les champs nécessaires à une publication claire, cohérente et durable.
  4. Concevoir des templates de collections pour automatiser l’affichage des contenus dynamiques.
  5. Relier les contenus CMS aux composants et aux pages dans une logique éditoriale maîtrisée.
  6. Réaliser de courtes mises en application encadrées autour de structures de contenus dynamiques courantes.
Module 6 — Intégrer les médias, les interactions et les éléments de navigation
  1. Importer et organiser les médias en tenant compte de la qualité d’affichage et des contraintes de performance.
  2. Créer des menus, liens internes, appels à l’action et parcours de navigation clairs.
  3. Utiliser les interactions Webflow pour enrichir l’expérience sans nuire à la lisibilité ni à l’efficacité du site.
  4. Animer des éléments de manière sobre et pertinente selon le contexte de communication.
  5. Prendre en compte les principes d’ergonomie et de confort utilisateur dans les effets visuels et les transitions.
  6. Contrôler la cohérence entre intention graphique, usage réel et comportement du site.
Module 7 — Appliquer les bonnes pratiques SEO, accessibilité et qualité web
  1. Structurer les pages avec une hiérarchie de titres cohérente et des contenus lisibles pour le web.
  2. Renseigner les éléments utiles au référencement naturel : titres de pages, descriptions, URL, balises et contenus pertinents.
  3. Améliorer l’accessibilité des interfaces : contrastes, textes alternatifs, clarté des liens, structure des contenus.
  4. Optimiser les médias et les pages pour limiter les impacts sur les performances.
  5. Repérer les erreurs courantes qui nuisent à la compréhension, à l’indexation ou à l’expérience utilisateur.
  6. Mettre en place une routine simple de contrôle qualité avant publication.
Module 8 — Publier, administrer et faire évoluer un site Webflow
  1. Comprendre les options de publication, de prévisualisation, de mise en ligne et de gestion de domaine.
  2. Gérer les mises à jour de contenus, de composants et de structures dans une logique de continuité.
  3. Identifier les points de vigilance liés à l’organisation du projet, à la maintenance et à la gouvernance éditoriale.
  4. Collaborer plus efficacement avec des équipes contenu, design, SEO ou des intervenants techniques.
  5. Prévenir les erreurs fréquentes liées aux modifications de structure, aux classes ou aux contenus dynamiques.
  6. Inscrire l’usage de Webflow dans une démarche durable de qualité, d’autonomie et d’amélioration continue.

Évaluation & Suivi des Acquis

Feuille de Présence

Émargement des stagiaires en présentiel ou à distance, via support papier ou signature électronique.

Émargement sécurisé

Signatures électroniques collectées en ligne et conservées dans un coffre-fort numérique sécurisé par Dendreo.

Auto-positionnement

Évaluation du niveau des stagiaires en début et en fin de formation pour mesurer la progression.

Évaluations pédagogiques

Validation des acquis par des questions orales ou écrites tout au long de la formation.

Mises en situation

Exercices pratiques et cas concrets pour ancrer les compétences dans la réalité métier.

Attestation de fin de formation

Remise d’une attestation officielle à l’issue de la formation.

William

William

Répond généralement en moins de 5 minutes

I will be back soon

William
C’est William, votre conseiller pédagogique chez Mill-Forma.
Comment puis-je vous aider ?
WhatsApp Mill Forma