# Création d'un site de formation sur Webflow News3 minPublié le Oct 21, 2022Dernière mise à jour le ![Logo Webflow avec memoji de Flo de Digidop en bas à droite](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67124fea295aab97fc9cb273_64760069e93084646c9ef198_6352c32ce288b5914fe910bd_Open-Graph-learning-plateform-webflow.webp)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleVous l'avez vu passé... Digidop a dévoilé la [Digidop Académie](https://academie.digidop.fr/). Une **plateforme de formation en ligne construite à 100% sur l'outil de création de site web no-code Webflow.** Découvrez dans cet article l**es outils que nous avons utilisés** et comment nous avons créé le front et back-office sur Webflow. ## 1. Les outils que nous avons utilisés Finalement, très peu. ### 1.1 Webflow (pour le site 💜) Évidemment nous avons utilisé [Webflow](/fr/webflow) pour construire la plateforme de formation en ligne 💜. ### 1.2 Loom (outil d'enregistrement) Plus qu'un outil de productivité, ,nous avons utilisé [**l'application Loom**](/fr/tools/loom) pour **enregistrer nos vidéos en 4K,** pour seulement quelques euros par mois. ### 1.3 Imovie (outil de montage vidéo) Simple à utiliser et efficace. Imovie nous à permis de réaliser nos besoins pour le montage des vidéos de formations. ### 1.4 Viméo (plateforme d'hébergement) [Viméo est une plateforme d'hébergement ](/fr/tools/vimeo)(payante et assez chère) pour héberger l'ensemble de nos vidéos. Pourquoi nous n'avons pas utilisé Youtube (gratuit et complet) cette fois ? Découvrez le plus bas dans l'article. **Bonus 🎁 : le plugin Window Resizer** Un plugin très pratique pour pour formater votre écran lorsque vous enregistrez votre écran avec Loom. ## 2. Comment structurer le site ? Un front-end Digicalidad avec un design réalisé sur [Figma](/fr/tools/figma) par [Thomas Labonne.](/fr/team/thomas-labonne) Mais surtout un CMS bien structuré pour organiser l'intégralité du contenu de formation sur Webflow directement. ### 2.1 La structure de notre CMS Webflow - Une page statique - 2 pages dynamiques - 3 Collections #### Une page statique Cette page web regroupe l'ensemble de notre formation ![Page développée dans Webflow représentant une formation Figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67124feb295aab97fc9cb29c_64760069e93084646c9eee14_6352c34cc67ea33f0aca6b32_page-statique.webp)Page statique avec du contenu dynamique intégré #### 2 pages dynamiques Une page web pour les chapitres, et une page par cours. L'ensemble du contenu de ces pages "templates" est alimenté directement depuis le back-office Webflow, appelé le CMS. En apprendre plus sur les fonctionnalités du CMS de webflow. ![Page de formation dynamique dans Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67124feb295aab97fc9cb298_64760069e93084646c9eee15_6352c35df712e36dd647e24e_exemple%252520de%252520page-dynamique-formation-webflow.webp)Page dynamique de formation sur Webflow #### 3 collections CMS - **Chapitre** - **Formation** - **Partie** ![Aperçu de quelques collections CMS sur Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67124feb295aab97fc9cb294_64760069e93084646c9eee13_6352c379844a171be5e5649e_collection-cms.webp)Aperçu des 3 collections CMS dans Webflow ### 2.2 L'hébergement de nos vidéos Nous avons hébergé nos vidéos sur vimeo, principalement pour vous éviter les pubs Youtube lors de votre formation. Une fois sur vimeo, chaque vidéo dispose d'un lien URL unique que vous pouvez intégrer dans votre CMS Webflow. Chaque page dynamique de formation à donc maintenant sa vidéo. **Allez plus loin ?** Nous avons laissé l'intégralité du contenu de notre plateforme de formation développé sur Webflow gratuite et accessible à tous. Mais nous aurions pu bloquer l'accès des formations seulement à des utilisateurs payants. Pour ça il nous aurait suffit de : - Activer des restrictions d'espaces membres à nos pages de formations - Activer un plan e-commerce sur Webflow En savoir plus sur la fonctionnalité d'espace membre sans plugin de Webflow **Envie d'en savoir plus ? ** - [Suivez la chaîne Youtube 🍿](https://www.youtube.com/c/digidop) - [Suivez Digidop sur TikTok 🎬](https://www.tiktok.com/@digidop.fr) - [Découvrir le site avec la formation Figma](https://academie.digidop.fr/formations/figma) Et depuis peu ... > [Formation Webflow Editeur](https://academie.digidop.fr/hors-serie/webflow-editeur-360) [ ](#)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-fondateur[ ](/fr/team/florian-bodelot)[ ](https://fr.linkedin.com/in/florian-bodelot-digidop)[ ](https://twitter.com/florian_bodelot)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)