{"id":5309,"date":"2023-02-01T15:43:30","date_gmt":"2023-02-01T14:43:30","guid":{"rendered":"https:\/\/www.swash-formation.fr\/?post_type=formation&#038;p=5309"},"modified":"2026-02-23T10:11:59","modified_gmt":"2026-02-23T09:11:59","slug":"webflow-reussir-sa-prise-en-main","status":"publish","type":"formation","link":"https:\/\/www.swash-formation.fr\/formation\/webflow-reussir-sa-prise-en-main\/","title":{"rendered":"Webflow&nbsp;: r\u00e9ussir sa prise en main"},"template":"","domaine":[12],"motcle":[63,23,22,365],"metier":[55,52,47,51],"etiquette":[],"type_ra":[80],"logiciel":[356],"class_list":["post-5309","formation","type-formation","status-publish","hentry","domaine-formation-ux-ui-webdesign","motcle-experience-utilisateurs","motcle-interface","motcle-projet","motcle-site","metier-chef-de-projet-digital","metier-directeur-artistique","metier-graphiste","metier-ui-designer","type_ra-inter","logiciel-webflow","no-post-thumbnail"],"acf":{"FOR_Format":"80","FOR_SousTitre":"De la conception \u00e0 la mise en ligne : s\u2019initier \u00e0 la cr\u00e9ation de sites Web ","FOR_Jours":3,"FOR_Heures":21,"FOR_Duree":"21 heures collectives + 1 heure de mentorat distanciel","FOR_DureeTxt":"3 jours \/ 21 heures","FOR_Prix":1800,"FOR_Ref":"W09","FOR_Niveau":"Initiation","FOR_PrixComplet":"1 800 euros HT %2F Soit 2 160 euros TTC","FOR_PrixCourt":"1 800 \u20ac HT","FOR_Support":"","FOR_ProgPdf":"","FOR_Intervenants":[1716],"FOR_Comp":"<p><span style=\"font-weight: 400;\">D\u00e9finir la place de Webflow dans le processus d\u2019int\u00e9gration de sites Web et mettre en \u0153uvre un flux de production efficace pour r\u00e9aliser un site de A \u00e0 Z.<\/span><\/p>","FOR_Obj":"<ul>\r\n\t<li style=\"font-weight: 400;\">Comprendre les fondamentaux de Webflow et son interface<\/li>\r\n\t<li style=\"font-weight: 400;\">Se lancer dans la production<\/li>\r\n\t<li style=\"font-weight: 400;\">Concevoir et structurer un site responsive<\/li>\r\n\t<li style=\"font-weight: 400;\">Animer des \u00e9l\u00e9ments avec les interactions et animations<\/li>\r\n\t<li style=\"font-weight: 400;\">Comprendre les bases du SEO avec Webflow<\/li>\r\n\t<li style=\"font-weight: 400;\">Publier et maintenir son site web<\/li>\r\n<\/ul>","FOR_Valider":"<ul>\r\n\t<li>votre projet et le contexte de votre demande pour co-construire le programme d\u00e9finitif<\/li>\r\n\t<li>le format\u00a0: pr\u00e9sentiel et\/ou distanciel<\/li>\r\n\t<li>le tarif\u00a0: calcul\u00e9 selon le temps de pr\u00e9paration, les moyens \u00e0 mobiliser, le nombre de jours, le lieu de la formation\u2026<\/li>\r\n\t<li>*la dur\u00e9e\u00a0: \u00e0 confirmer selon les pr\u00e9requis et les objectifs \u00e0 atteindre par les apprenants<\/li>\r\n<\/ul>","FOR_5Raisons":"","FOR_Public":"<p><span style=\"font-weight: 400;\">Cette formation s\u2019adresse aux cr\u00e9atifs (Directeurs Artistiques, Graphistes), aux UI \/ UX \/ product designers ou aux professionnels de la communication \/ du marketing.<\/span><\/p>","FOR_Prerequis":"<p>Il est n\u00e9cessaire d\u2019avoir une tr\u00e8s bonne culture Web (vocabulaires, m\u00e9tiers, bases UI\/UX ). Une connaissance d\u2019un outil de prototypage comme Figma et en int\u00e9gration HTML\/CSS facilitera l\u2019acc\u00e8s \u00e0 cette formation.<\/p>","FOR_Programme":"<h3 class=\"chapitre\"><b>Comprendre l\u2019environnement Webflow et prendre en main l\u2019interface<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Situer Webflow et le no-code<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Diff\u00e9rencier Webflow des autres CMS (WordPress, Wix\u2026)<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Comparer les diff\u00e9rentes tarifications propos\u00e9es\u00a0<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Anticiper la cr\u00e9ation (passerelles avec Figma, XD\u2026)<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Distinguer et exp\u00e9rimenter les outils<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Le Designer : o\u00f9 tout se construit<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Le Navigator : organisation des \u00e9l\u00e9ments<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Le Style Panel : gestion du design et du positionnement<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Le Interactions : pour animer les \u00e9l\u00e9ments<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Les espaces CMS et E-commerce<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; \u00c9tudes de cas \/ Cr\u00e9ation et param\u00e9trage d\u2019un projet (unit\u00e9s, breakpoints, typographie globale))<\/i><\/b><\/p>\r\n<h3 class=\"chapitre\"><b>Se lancer dans la production<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Identifier la structure d\u2019une page Webflow\u00a0<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">HTML et CSS dans Webflow (sans coder)<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Comprendre les \u00e9l\u00e9ments de structure : Sections, Containers, Divs<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Diff\u00e9rences entre Class, ID et Combo Class<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cr\u00e9er les premiers \u00e9l\u00e9ments de design<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Ajouter du texte, des images et des boutons<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Utiliser les couleurs et typographies globales<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; Exercice : cr\u00e9ation d\u2019une premi\u00e8re page simple<\/i><\/b><\/p>\r\n<h3 class=\"chapitre\"><b>Concevoir et structurer un site responsive<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Appliquer les principes du responsive design\u00a0<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cr\u00e9er une structure optimis\u00e9e pour tous les formats d\u2019\u00e9crans<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utiliser les breakpoints dans Webflow<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tester et optimiser l\u2019affichage mobile<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utiliser Flexbox et Grid<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Prise en main de Flexbox<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Introduction \u00e0 CSS Grid et application dans Webflow<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; Exercice : reproduire une landing page responsive<\/i><\/b><\/p>\r\n<h3 class=\"chapitre\"><b>Animer des \u00e9l\u00e9ments avec les interactions et animations<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Exp\u00e9rimenter les interactions dans Webflow\u00a0<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Diff\u00e9rence entre interactions et animations<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animation au scroll, au hover et au clic<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cr\u00e9er des effets avanc\u00e9s<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Effet parallax et scroll triggers<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apparition progressive d\u2019\u00e9l\u00e9ments<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animations de menu et navigation<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; Exercice : cr\u00e9ation d\u2019une section anim\u00e9e et de composants interactifs<\/i><\/b><\/p>\r\n<h3 class=\"chapitre\"><b>Int\u00e9grer les bases du SEO dans Webflow<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimiser le r\u00e9f\u00e9rencement naturel (SEO)<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Classifier les balises SEO (Title, Meta Description, H1, H2\u2026)<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Identifier quelques bonnes pratiques pour am\u00e9liorer le SEO<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Agir sur les performances Web<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimisation des images et assets<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tester et am\u00e9liorer la vitesse du site<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; Exercice : analyse et am\u00e9lioration du SEO d\u2019une page Webflow<\/i><\/b><\/p>\r\n<h3 class=\"chapitre\"><b>Publier et maintenir son site web<\/b><\/h3>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u00e9berger et publier son site<\/span>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ajouter un nom de domaine<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Publier en staging ou en production<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\">Anticiper les mises \u00e0 jour et la maintenance\r\n\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Modifier et mettre \u00e0 jour un site en production<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p><b><i>-&gt; Exercice : mise en ligne d\u2019un site Webflow<\/i><\/b><\/p>","FOR_Profil":"<p>UI Designer, sp\u00e9cialiste no-code, avec plus de 3 ans d\u2019exp\u00e9rience en animation de formation.<\/p>","FOR_Ressources":"<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Supports de cours d\u00e9mat\u00e9rialis\u00e9s<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Abonnement de 3 mois \u00e0 <a href=\"https:\/\/fr.tuto.com\" target=\"_blank\" rel=\"noopener\">tuto.com<\/a><\/span><\/li>\r\n\t<li style=\"font-weight: 400;\">Acc\u00e8s illimit\u00e9 par mail \u00e0 la hotline Swash<\/li>\r\n<\/ul>","FOR_ModPres":"<h4><strong>Parcours p\u00e9dagogique\u00a0: <\/strong><\/h4>\r\n<p><span style=\"font-weight: 400;\">Quiz de positionnement <span class=\"flechD\">\u276f\u00a0<\/span>3 jours pr\u00e9sentiels continus <span class=\"flechD\">\u276f <\/span><\/span><span class=\"s1\">\u00c9valuation des acquis<\/span><\/p>\r\n<h4><strong>M\u00e9thode p\u00e9dagogique : <\/strong><\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, feedbacks personnalis\u00e9s<\/span><\/p>\r\n<h4><strong>Moyens techniques : <\/strong><\/h4>\r\n<ul>\r\n\t<li><span style=\"font-weight: 400;\">1 poste par participant (Mac ou PC, selon votre choix)<\/span>, fourni par nos soins (utilisation du compte Webflow de l'apprenant)<\/li>\r\n\t<li>Poste de l\u2019intervenant reli\u00e9 \u00e0 un grand \u00e9cran ou vid\u00e9oprojecteur<\/li>\r\n<\/ul>","FOR_ModDist":"<h4>Parcours p\u00e9dagogique\u00a0:<\/h4>\r\n<p><span style=\"font-weight: 400;\">Quiz de positionnement <span class=\"flechD\">\u276f<\/span> classes virtuelles discontinues (2 jours + 1 jour) <span class=\"flechD\">\u276f<\/span> <\/span><span class=\"s1\">\u00c9valuation des acquis<\/span><\/p>\r\n<h4>M\u00e9thode p\u00e9dagogique :<\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalis\u00e9s<\/span><\/p>\r\n<h4>Moyens techniques\u00a0:<\/h4>\r\n<ul>\r\n\t<li>Classe virtuelle cr\u00e9\u00e9e par nos soins\u00a0<\/li>\r\n\t<li>Chaque apprenant participe \u00e0 la session avec son ordinateur, connect\u00e9 \u00e0 Internet, et \u00e9quip\u00e9 :\r\n\r\n<ul>\r\n\t<li>d\u2019un micro et d\u2019une cam\u00e9ra<\/li>\r\n\t<li>d'un compte Webflow<\/li>\r\n\t<li>d'un double \u00e9cran (recommand\u00e9 mais non n\u00e9cessaire)<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","FOR_Eval":"<ul>\r\n\t<li><span style=\"font-weight: 400;\">Validation des acquis pendant la formation gr\u00e2ce \u00e0 des quiz et \u00e0 la r\u00e9alisation d\u2019exercices pratiques<\/span><\/li>\r\n\t<li>Suivi d'acquisition des objectifs p\u00e9dagogiques par l'intervenant<\/li>\r\n\t<li><span style=\"font-weight: 400;\"> \u00c9valuation \u00e0 chaud (remplie en fin de formation) et \u00e0 froid (\u00e0 60 jours)<\/span><\/li>\r\n<\/ul>","for_pourquoi":"","FOR_PlanCond":1,"FOR_PlanDist":[{"FOR_Dates":"les 10, 11 juin et le 17 juin 2026","FOR_Mentorat":null,"FOR_DateOff":"20260610"},{"FOR_Dates":"les 14, 15 d\u00e9cembre et le 21 d\u00e9cembre 2026","FOR_Mentorat":null,"FOR_DateOff":"20261214"}],"FOR_PlanPres":[{"FOR_Dates":"du 13 au 15 octobre 2025","FOR_Mentorat":null,"FOR_DateOff":"20251013"},{"FOR_Dates":"du 5 au 7 octobre 2026","FOR_Mentorat":null,"FOR_DateOff":"20261005"}],"for_tag-new":false,"for_tag-update":false},"_links":{"self":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation\/5309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation"}],"about":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/types\/formation"}],"acf:post":[{"embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/intervenant\/1716"}],"wp:attachment":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media?parent=5309"}],"wp:term":[{"taxonomy":"domaine","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/domaine?post=5309"},{"taxonomy":"motcle","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/motcle?post=5309"},{"taxonomy":"metier","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/metier?post=5309"},{"taxonomy":"etiquette","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/etiquette?post=5309"},{"taxonomy":"type_ra","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/type_ra?post=5309"},{"taxonomy":"logiciel","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/logiciel?post=5309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}