WEBFLOW Créer un site vitrine et un blog Mixte : présentiel / à distance

• Connaissance de base en informatique : savoir utiliser un ordinateur, naviguer sur Internet, gérer des fichiers.
• Notions en conception webdesign : être familier avec les concepts de pages, sections, navigation, responsive design.
• Notions en communication visuelle : avoir déjà travaillé avec des maquettes (Figma, Photoshop, Illustrator) est un plus.
• Connaissance de base du HTML/CSS (optionnel) : pas obligatoire, mais cela facilite la compréhension de la logique de Webflow.

Pré-requis organisationnels

•  Venir avec un projet concret (site vitrine, portfolio, landing page, blog, site client…) pour mettre en pratique directement.
• Avoir une connexion Internet et un compte Webflow actif (gratuit ou payant).
• Avoir préparé quelques contenus (textes, images, logo) si le projet est personnel ou professionnel.

• Développer son autonomie et sa productivité : apprendre à concevoir des sites web professionnels plus rapidement grâce à la maîtrise de Webflow
• Acquérir des bases solides et durables : maîtriser les fondamentaux de Webflow pour être capable de concevoir, gérer et livrer tous types de projets web en autonomie.

Apprendre à construire un site complet avec Webflow, intégrant un blog dynamique grâce au CMS. 

De la structure des pages à la gestion des contenus,  créer un site professionnel, évolutif et optimisé pour le référencement, sans écrire une ligne de code.

Créer la structure du site : 

• Créer les pages clés d'un site vitrine : Accueil, À propos, Services, Contact, Mentions légales… 
• Structurer la navigation, 
• Organiser les contenus, 
• Bâtir une architecture claire et intuitive pour les visiteurs.

Appliquer un design cohérent et professionnel : 

• Appliquer une charte graphique homogène sur l'ensemble de votre site.
• Utiliser les classes, les symboles et les styles globaux pour garantir une identité visuelle forte, facilement maintenable sur le long terme.

Créer une navigation optimisée

• Créer un menu de navigation complet et responsive, avec un logo, des liens internes et un effet sticky.
• Transformer le menu en symbole réutilisable pour l'intégrer sur toutes les pages, tout en assurant une navigation fluide sur mobile. 

Ajouter un formulaire de contact fonctionnel : 

• Ajoutez un formulaire de contact esthétique et opérationnel pour permettre aux visiteurs de vous joindre facilement.
• Configurer les champs, les messages de confirmation, et à connecter le tout à une boîte mail ou à un outil externe.

Création et gestion d'un blog avec CMS :

• Découvrez la puissance du CMS Webflow pour créer un blog dynamique.
• Créer une collection d'articles, définir les champs nécessaires (titre, image, contenu, date, catégorie…), et générer automatiquement les pages d'articles.

Créer un template d'article dynamique :

• Créer un template de page unique pour les articles de blog. 
• Utiliser le système de binding du CMS, pour afficher automatiquement le contenu de chaque article (titre, image, texte, auteur, etc.) dans une mise en page cohérente et responsive.

Ajouter une page de blog avec filtres : 

• Construire une page listant tous les articles, avec pagination, tri par date ou catégories. 
• Organiser visuellement les contenus pour maximiser la lisibilité et la navigation au sein de votre blog.

Maitriser le référencement naturel (SEO) : 

• Optimisez vos pages et articles pour le SEO : titres, balises alt, meta descriptions, URLs personnalisées… 
• Structurer correctement vos contenus pour améliorer leur visibilité sur Google.

Maitriser le Responsive design global :

• Ajuster l'ensemble du site (pages, blog, navigation) pour qu'il soit parfaitement lisible et navigable sur tous les écrans.
• Un design responsive bien pensé est essentiel pour l'expérience utilisateur comme pour le SEO.

Projet final :

• Créer les pages statiques, construire un blog dynamique, 
• Mettre en place la navigation, le responsive, le formulaire et le SEO. 
• Publier sur Webflow.io ou sur un domaine personnalisé

Jour 1 Matin

Introduction & bases 
● Présentation de Webflow et de son interface.
● Création d'un nouveau projet.
● Comprendre la logique des pages, sections, conteneurs, et du système de classes.
● Prise en main rapide des styles globaux (typos, couleurs, grilles).

Jour 1 – Après-midi

Structure du site vitrine 

● Création des pages principales : Accueil, À propos, Services, Contact, Mentions légales.
● Construction d'une navigation claire et intuitive.
● Mise en place du menu sticky et responsive, transformé en symbole réutilisable.

Jour 2 Matin

Design cohérent et charte graphique
● Application d'une charte graphique homogène.
● Utilisation des classes, symboles et styles globaux.
● Harmonisation des espaces, typographies et couleurs pour donner une identité professionnelle.

Jour 2 – Après-midi

Fonctionnalités interactives
● Création et configuration d'un formulaire de contact complet.
● Paramétrage des champs obligatoires, messages de confirmation et intégration avec email/externe.
● Premières animations simples (hover, transitions).

Jour 3 Matin

CMS & Blog : Fondations 
● Découverte du CMS Webflow.

● Création d'une collection Articles de blog avec champs personnalisés (titre, image, contenu, auteur, date, catégorie).
● Comprendre le système de binding dynamique.

Jour 3 – Après-midi

Blog : Templates & page liste 
● Création du template dynamique d'article (mise en page responsive).
● Conception d'une page Blog listant tous les articles.
● Mise en place des filtres, tri et pagination pour améliorer la navigation.

Jour 4 Matin

SEO & Responsive design 
● Optimisation SEO : titres, balises alt, meta descriptions, URLs personnalisées.
● Structuration sémantique du contenu.

Jour 4 – Après-midi

● Vérification et ajustement du responsive design (desktop, tablette, mobile).

Jour 5 Matin

Projet final & mise en ligne 
● Réalisation du projet complet : Site vitrine + Blog.
● Vérification des pages statiques, du blog dynamique, de la navigation et du responsive.

Jour 5 – Après-midi

● Derniers ajustements SEO et design.
● Publication du site sur Webflow.io ou sur un domaine personnalisé.

• Développer son autonomie et sa productivité : apprendre à concevoir des sites web professionnels plus rapidement grâce à la maîtrise de Webflow.
• Maîtriser les fondamentaux de Webflow pour être capable de concevoir, gérer et livrer tous types de projets web en autonomie.

• Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
• Exercices autonomes et réguliers pour assurer l'assimilation

Votre formation se déroule en présentiel avec :

• 1 ordinateur
• 1 vidéoprojecteur

Votre formation se déroule à distance avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque)
• 1 Webcam (facultatif – dans l'idéal)
• 1 deuxième écran (facultatif – dans l'idéal)

Les objectifs pédagogiques sont évalués et suivis grâce à différentes méthodes adaptées aux acquisitions de compétences visées. Nos formateurs réalisent ces évaluations tout au long de la formation, que ce soit pendant les séances synchrones ou asynchrones. Voici une liste non exhaustive des méthodes d'évaluation pouvant être utilisées en formation :

• Questionnaire de vérification de connaissances (Quiz)
• Réalisation de Travaux Pratiques : production ou amélioration d'un fichier
• Mises en situation et grilles d'analyse
• Serious Game : jeu de rôles et analyse
• Activités interactives à travers l'utilisation d'une plate-forme connectée

Toutes nos formations intègrent une auto-évaluation via notre Extranet Stagiaire au début et à la fin de chaque action de formation. Cet outil offre à chacun la possibilité de mesurer sa progression par rapport aux objectifs pédagogiques visés et leurs atteintes.