Formation Créer un site web professionnel avec Webflow No Code

Introduction à Webflow et concepts du No Code

• —Comprendre le No Code et ses avantages
• —Présentation de Webflow : interface, philosophie, potentiel
• —Configuration initiale de l'environnement Webflow
• —Exercice pratique : Visiter l'interface et créer son premier projet vide

Maîtriser l'interface Designer de Webflow

• —Vue d'ensemble des panneaux : Styles, Éléments, Navigateur
• —Organisation des éléments : Div Blocks, Section, Container
• —Utilisation des raccourcis clavier essentiels
• —Exercice pratique : Structurer une page d'accueil simple

Les bases du HTML/CSS sans coder : Le Boxing Model

• —Comprendre le concept de Box Model (padding, margin, border)
• —Application des propriétés de taille et d'espacement
• —Gestion des unités (px, %, em, rem, vw, vh)
• —Exercice pratique : Créer des sections avec espacements cohérents

Typographie et couleurs pour un design impactant

• —Choix et importation de polices de caractères
• —Propriétés de texte : taille, poids, interlignage
• —Gestion des couleurs via les variables et les styles globaux
• —Exercice pratique : Styliser le texte d'un site démo
• —=== MODULE_NUMBER: 5
• —MODULE_TITLE: Implémenter les images et médias dans Webflow
• —MODULE_CONTENT:
• —Optimisation des images pour le web (format, taille)
• —Insertion et gestion des images et icônes
• —Utilisation des backgrounds d'image et vidéo
• —Exercice pratique : Intégrer un portfolio d'images responsives

Layouts responsifs avec Flexbox

• —Comprendre Flexbox : conteneur, éléments, alignement
• —Application des propriétés Flexbox pour des mises en page complexes
• —Création de grids fluides et responsives
• —Exercice pratique : Concevoir une section Nos services avec Flexbox

Optimiser le design pour les mobiles (Responsive Design)

• —Configurer des points de rupture pour un design mobile fluide
• —Utiliser les unités réactives pour des mises en page adaptatives
• —Tester les performances sur différents appareils et navigateurs
• —Ajuster la typographie pour une lisibilité optimale sur mobile
• —Optimiser les images pour un chargement rapide sur les appareils mobiles

Créer des composants réutilisables et symboles

• —Comprendre l'intérêt des symboles (Headers, Footers)
• —Création et gestion des symboles
• —Mettre à jour et réutiliser les symboles
• —Exercice pratique : Créer un symbole de navigation (Header) global

Animations simples et interactions de base

• —Types d'animations : scroll, hover, clic
• —Création d'interactions simples (affichage/masquage d'éléments)
• —Animation d'éléments divers (boutons, images)
• —Exercice pratique : Animer un bouton Call to Action

Gérer le Contenu Dynamique avec le CMS Webflow

• —Introduction aux Collections CMS (Blog, Portfolio, Produits)
• —Création et structuration d'une collection
• —Affichage dynamique de contenu sur des pages CMS
• —Exercice pratique : Mettre en place un blog simple avec CMS

Formulaires et SEO pour un site professionnel

• —Conception et personnalisation des formulaires de contact
• —Envoi et gestion des soumissions de formulaires
• —Optimisation SEO on-page (titres, méta descriptions, alt tags)
• —Exercice pratique : Intégrer un formulaire de contact fonctionnel

Publication, Optimisation et Bonnes Pratiques

• —Publication du site sur un sous-domaine Webflow
• —Connexion d'un nom de domaine personnalisé
• —Bonnes pratiques de nettoyage et d'organisation du projet
• —Exercice pratique : Préparer et publier son premier site Webflow en ligne
• —--
• —## Compétences acquises
• —=== COMPETENCE ===
• —COMPETENCE_NUMBER: 1
• —COMPETENCE_NAME: Maîtrise de l'environnement Webflow Designer
• —COMPETENCE_CONTENT: Concevoir l'architecture visuelle et fonctionnelle de pages web en utilisant l'interface Designer de Webflow, en structurant les éléments via le Box Model et Flexbox pour un affichage précis et responsive sur toutes les tailles d'écran.
• —=== COMPETENCE ===
• —COMPETENCE_NUMBER: 2
• —COMPETENCE_NAME: Conception de layouts Responsifs multi-écrans
• —COMPETENCE_CONTENT: Adapter un design web pour garantir une expérience utilisateur optimale sur divers appareils (ordinateurs, tablettes, mobiles) en gérant les points de rupture et les propriétés CSS spécifiques à l'aide des outils de responsivité de Webflow.
• —=== COMPETENCE ===
• —COMPETENCE_NUMBER: 3
• —COMPETENCE_NAME: Gestion de Contenu Dynamique et Interactivité
• —COMPETENCE_CONTENT: Administrer et afficher du contenu via le CMS de Webflow (Collections) et intégrer des fonctionnalités interactives (animations, formulaires) pour doter le site de dynamisme et d'engager les utilisateurs de manière efficace.
• —=== COMPETENCE ===
• —COMPETENCE_NUMBER: 4
• —COMPETENCE_NAME: Publication & Optimisation SEO d'un site Webflow
• —COMPETENCE_CONTENT: Mettre en ligne un site Webflow, le connecter à un nom de domaine personnalisé, et appliquer les fondamentaux du référencement naturel (SEO on-page) pour améliorer sa visibilité sur les moteurs de recherche.

OPCO

Formations financées via votre opérateur de compétences

FAF

Aide à la formation pour les indépendants

France Travail

Des aides pour les demandeurs d'emploi

Employeur

Votre entreprise peut financer votre formation

FNE-Formation

Un soutien pour les entreprises en transformation

Aucun prérequis technique ou de compétence en code n'est nécessaire. Maîtrise basique de l'ordinateur et de la navigation internet. Connaissances en design ou expérience avec des outils de création graphique (ex: Figma, Sketch, Photoshop) sont un plus.

Un ordinateur (PC ou Mac) avec une connexion internet stable. Une souris et un clavier confortables. Un navigateur web moderne (Chrome, Firefox, Safari).

5 tests d'évaluation sont proposés à l'apprenant en fin de formation pour connaître son niveau sur chaque compétences visées.

Plateforme et contenus e-learning à disposition. Test de positionnement Quizz & Evaluations

Nous vous recevons lors d’un rendez-vous d’information préalable gratuit et confidentiel en visioconférence pour analyser vos besoins et co-construire votre parcours personnalisé. Chaque demande s’accompagne de la remise d’une convention ou d’un contrat précisant l’ensemble des informations relatives à la formation (Tarifs, calendrier, durée, lieu…). Ce contrat/convention sera transmis électroniquement par email.

A partir de l’accord de prise en charge par le financeur sollicité, le bénéficiaire peut démarrer sous un délai de 11 jours ouvrés. Si vous financez votre parcours de formation par vos propres moyens, alors le délai d'accès est immédiat. Vous pouvez entrer en formation tout au long de l’année.

♿️ Nous accueillons les personnes en situation de handicap. Les conditions d’accessibilité aux personnes handicapées sont inscrites sur le site imi-education.fr, rubrique Accessibilité.

Saskia Cazettes Pour tout renseignement : 07 80 91 06 14 / saskia.c@imi-executive-solutions.com

23 mars 2026

La formation alterne apports théoriques, mises en situation pratiques et échanges entre participants. Chaque concept est directement appliqué via des exercices concrets et des cas réels.

Oui, chaque participant reçoit un support de cours complet (format numérique et/ou papier) qu'il peut conserver à l'issue de la formation.

Certaines de nos formations sont éligibles au Compte Personnel de Formation (CPF). Consultez la fiche formation ou contactez-nous pour vérifier l'éligibilité.

Plusieurs dispositifs de financement existent : CPF, OPCO, plan de développement des compétences, financement individuel. Notre équipe peut vous accompagner dans vos démarches.

Oui, notre équipe reste disponible pour toute question post-formation. Vous bénéficiez également d'un accès à nos ressources en ligne pendant 6 mois après votre parcours.

Webflow No Code permet de créer des sites web professionnels sans connaître la programmation, ce qui facilite la création et la mise à jour de sites web.

Oui, avec Webflow Designer, vous pouvez concevoir des layouts personnalisés pour créer un site web qui correspond à votre image de marque.

Nous vous enseignons les étapes nécessaires pour publier et optimiser votre site Webflow pour une visibilité maximale sur les moteurs de recherche.

Notre organisme de formation s'engage à accueillir et accompagner les personnes en situation de handicap. Notre référente handicap, Mme Lorène Travaux est disponible pour étudier avec vous les adaptations pédagogiques, techniques ou logistiques nécessaires avant toute inscription. Contactez-nous à hello@imi-executive-solutions.com ou au 06 72 09 69 52.