Webflow Academy 大師班HomeWebflow 課程About學員登入Webflow 資源整理💡這是我們在學習Webflow的過程中收集到的有用的YouTube教程、部落格文章和資源列表。如果你有任何你認為應該添加的資源，可前往 send us the link. Made by @tentrencreative | 🌐 tenten.co訂閱電子報
面向初學者的 Webflow 簡介WEBFLOW FOR BEGINNERS 2020: The best web design softwareShould you learn Webflow? Check out how it impacted my business: https://bit.ly/WebflowWebclass2020 If you want to start using the best web design software, ...https://youtu.be/7B_3S297zjsWebflow for Beginners - The Easiest Guide / IntroductionWebflow for Beginners - The Easiest Guide / Introduction - In this video, I'm going to share with you all of the important bits and pieces of Webflow that I ...https://youtu.be/_GkdN96j3I0UX&Chill 2020 - Webflow WorkshopWebflow empowers designers to build professional, custom websites in a completely visual canvashttps://uxchill.webflow.io/Free Projecthttps://www.flowmingo.co/waitlist-free-project-1b9l19cm.youtube.comhttps://m.youtube.com/watch?v=iuTedVOc0So&feature=youtu.be&utm_source=nocodereportPixel Geek Community - No Coders that lead with empathy and honestyA community of no coders that leads with empathy and honesty. Make the web beautiful, together.https://www.pixelgeek.community/learnux.iohttps://learnux.io/course/webflow/introduction
Webflow 和 Zapier 簡介（自動化）Using Webflow with Zapier - Intro tutorial - Stream clipIn this stream clip, I explained how to use your Webflow project with Zapier to send data from your forms into a Google sheet and even back to your Webflow C...https://www.youtube.com/watch?v=0m3LAbwf56g
從 Webflow 到 Wordpress 或是 Shopify Udesly | Webflow Resources | Webflow with WordPress and ShopifyUdesly is a place where you can find awesome resources for Webflow and the Udesly Adapter APP to convert Webflow projects to Wordpress and Shopify.https://www.udesly.com/
組件套件Mozaik | Ready-to-use, free Webflow componentsStop designing Webflow websites from scratch. Build your next site in minutes with Mozaik components. Stop designing Webflow websites from scratch. Build your next site in minutes with Mozaik components.https://www.mozaik.design/Relume Library | Level up your Webflow workflowBuild beautiful websites and save thousands of hours using the world's largest Webflow component library. Copy and paste components with ease.https://library.relume.io/SystemFlow | UI Framework for Webflow & FigmaSpeed up your design and implementation with the largest UI framework for Webflow and Figma with hundreds of styles, components and ready-to-use sections.https://www.systemflow.co/FigmaFigma Community file - Knockout is an end-to-end development framework that helps designers and Webflow developers accomplish more together. Our companion Figma template standardizes spacing based on Knockout's fully responsive native grid. Design and build are aligned from the get-go, and designers are empowered to cr...https://www.figma.com/community/file/1070014739742643875
Webflow 插件JetboostOn-page, real-time search Your customers expect to be able to search your content. You've tried the native Webflow search, but you want to search a single CMS list, not your entire site. What if you could search items directly on your page, in real-time as you type?https://www.jetboost.io/
會員The Membership ToolboxThis free membership site toolbox is the ultimate list of 3rd party tools to help you launch and grow a membership business.https://www.membershiptoolbox.com/MemberStack - Memberships and Gated content w/out codeMemberStack is just so easy to use compared to other solutions and there is better.. very well guided and documented from within the site itself (with their tour mode, you will never get lost). They are constantly improving and try their best to help the community to resolve issues as well as get new features out.https://www.memberstack.io/Memberful - Monetize your passion with membership.Memberful - Monetize your passion with membership. | Memberful.com ✨ We are hiring! View our open roles cheveron-right Best-in-class membership software for independent creators, publishers, educators, podcasters, and more. "Faced with a sea-change in online publishing and advertising, we turned to Memberful for help with engaging our audience more directly.https://memberful.com/
怎麼做Learnflow | Free template to learn no-code in WebflowAre smart enough not to reinvent the wheel.Build fast, listen to feedback and iterate.Why create from scratch when you can glue?They bet on no-code, and are empowered by tools like Webflow.Glue entrepreneurs plug, play and remix. Want comments? Add Disqus.A feedback button? Add Canny.Community?https://www.supercreative.design/download/learnflowBuild a full site in Webflow - Design+CodeDesign and animate a high converting landing page with advanced interactions, payments and CMS Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build...https://designcode.io/webflow-courseHow to build a marketplace without code - No Code ConferenceEver wanted to build an app or website but didn't know where to start because you cannot code? My talk "How to build a marketplace without code" held at the No Code Conference 2019 in San Francisco is the answer to the question. Get the slides here!https://www.connorfinlayson.com/nccDesigning a landing page with Figma and Webflow [Live Recorded]Webflow and Figma are my two favorite design tools. This is the recorded version from the live demo of designing a landing page with Figma and Webflow. I dem...https://youtu.be/en1ncU04cHgHow to Webflow (Live): Learning the basics of WebflowWant to support my content? Consider donating here: https://www.buymeacoffee.com/pixelgeek #webflow #webdesign #tutorial ------- I've been a web designer sin...https://www.youtube.com/watch?v=zxrcCJCWdoIHow To Structure Websites Efficiently With WebflowLearn how to build Custom designed websites with Webflow: http://zpr.io/gQUed - Flux is proudly sponsored by Webflow, start a new account with an awesome dis...https://www.youtube.com/watch?v=zZMx_8FvjvQWebflow Crash Course - Responsive Web Design without Code?https://skl.sh/designcourse24 - First 500 people to sign up will get their first 2 months free! -- Try Webflow: https://webflow.com/?rfsn=2814794.af109f0 -- ...https://www.youtube.com/watch?v=S67X-sfW0IAHow I created a membership site completely with no-code tools | Swipe FilesFor anyone interested, we documented the entire process of actually creating Swipe Files on Zoom calls, which you can watch here: https://www.youtube.com/playlist?list=PL0RucbphvVSTGlF5aGbDz3SSvihWlbavE Get 50% off your first year of an annual membership using the code SWIPE50OFF 👉 https://swipefiles.co/join/annually Tools used can be found in the footer: - Webflow - Memberstack - Jetboost - ConvertKit - RightMessage - Sparkloop - Beamer - Fathom I'm also documenting milestones in my journey to make this a real legit business here: https://www.indiehackers.com/product/swipe-fileshttps://www.loom.com/share/08e424b6ea0f486c9a20dcb04530ada0Webflow: The Web Development Platform Of The Future - Smashing MagazineThe market is filled with site builders that promise to be universal solutions for any design challenge, but when it comes to practice, they fall short on both the design and development side. Only a few tools actually keep their promises.https://www.smashingmagazine.com/2019/09/webflow-the-future-of-web-development/Nocode.Video | HomeExplore top #NoCode Videos from all around the web along with stories about the makers behind the movement.https://www.nocode.video/www.youtube.comhttps://www.youtube.com/watch?v=eAT0w3T4t-MMake an Animated Mobile Menu with WEBFLOWIn this video, you can learn how to create, through Webflow, a simple animated menu for your website when viewed through a mobile device. It's super easy and...https://www.youtube.com/watch?v=n7ivaV5ovO8
設計 UI Kithatch-a-utility-framework-for-webflow - WebflowHatch is a utility framework for Webflow that is made up of over 2,200 low-level utility classes, helping you work super fast. Font sizing + spacing scales down automatically on each breakpoint so it's fully responsive out of the box.https://webflow.com/website/Hatch-A-Utility-Framework-for-WebflowA New Framework for Webflow Just Hatched!Hatch is a utility framework for Webflow that is made up of over 2,000 low-level utility classes, helping you work insanely fast.Clone Hatch: https://webflow...https://youtu.be/SgmapsRTgVo
推薦關注的 Webflow 帳戶Tenten - Cast for DesignersHi! Tenten is a design, strategy, and marketing focused digital agency based in Taipei. Our goal is to provide founders, startups, and businesses with the right knowledge and insights on how to build better products and services through our Youtube channel. We will be uploading videos on product design, digital marketing, strategy, tools, and much more!https://www.youtube.com/user/tentencreative/featuredWebflowWebflow is the top drag-and-drop website builder for creating professional responsive websites.https://webflow.com/team/tentenWebflow Experts | Tenten CreativeWe help our clients build products and brands that solve difficult problems, and positively impact people's lives. Our values are things we hold close to our heart and inform how we work, communicate, and live. When building products and communication, these values guide us to create our best work and positively affect our community.https://experts.webflow.com/profile/tenten-creativeJan LosertHi Guys here on Youtube! You might know me from Instagram @janlosert or you definitely know my table! or from my Dribbble @janlosert as the blue dashboard gu...https://www.youtube.com/channel/UCYYNHp998GgM195IPutE3LANo-Code Tutorials, Lessons & Courses | NucodeDiscover over [b]100+[/b] no code tutorials, lessons, and courses from experts.https://www.nucode.co/learnpixelgeekA geek who loves to design, learn and inspire others.https://www.youtube.com/pixelgeekGareth PronovostAirtable is a total game-changer and I'm here to help you to unlock its full potential so you can grow your business. I love all things entrepreneurship, so ...https://www.youtube.com/c/garethpronovost Mackenzie Child - Designer, illustrator & a creator of fun, occasionally useful side projects.Webflow templates, wireframe kits, icon packs and more here to help you work faster and create better products.https://www.mackenziechild.me/shopF'in sweet Webflow Hacks by FinsweetA custom code focused video series for Webflow websites. Learn how to use jQuery and javascript to extend the functionality of your Webflow site.https://www.finsweethacks.com/Guides | FlowbaseExpert webflow guides and tips from and for the webflow communityhttps://www.flowbase.co/learnDaily Interactions | WebDev For YouFresh ideas for your website, delivered to you every weekday. Save time by cloning the interaction directly into your own project.https://www.webdevforyou.com/daily-interactionsTimothy RicksSubscribe for more uncommon tutorials for Webflow pros!https://youtube.com/c/TimothyRicks
Lottie 動畫Lottieflow - Lottie icon animations for WebflowDownload Lottie icon animations to implement on your Webflow website. Change hex color, customize easing, and download json files to use Lottie with Webflow Interactions. Made by Finsweet.https://www.lottieflow.com/LottieFiles - Free animation files built for LottieGet Started for free Loved by Designers & Engineers from Discover thousands of free animations for your products Most loved animators this week Test an Animation Salih Abdul Karim, Lead Motion Designer Get the Plugin Edit an animation Barrett Johnson, Product Marketing Eddy Gann, Product Designer Lottie Animation High quality (60 frames/sec) with interactivity and more...https://lottiefiles.com/
程式碼CodeCrumbs - Code Snippets for Your Webflow!The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. Static and dynamic content editing A rich text element can be used with static or dynamic content.https://www.codecrumbs.co/?utm_source=nocodereport
專案複製 (Cloneable)Search the Webflow Showcase - 1000+ Cloneable ProjectsFind hidden gems in the Webflow showcase. Simply search to find what you're looking for.https://showcasesearch.webflow.io/real-time-stock-marketportfolio-client-dashboard - WebflowFree no-code stock market dashboard made in Webflow. If you would like this template customized specifically for you let us know. Contact: https://www.orangecattle.com/contact Clone: https://bit.ly/3cP027P - Webflowhttps://webflow.com/website/Real-Time-Stock-MarketPortfolio-Client-Dashboardfold-and-unfold-effect - WebflowHere's a little tutorial project on how to fold and unfold anything in Webflow ! Feel free to follow me on twitter for more tips and tutorials : https://twitter.com/est_ce_thomas Thank you ! - Webflowhttps://webflow.com/website/Fold-and-Unfold-effectzoom-x-embacy - WebflowWe've made this special project because ZOOM is everything now! Look at it as our design experiment and a tribute to what's going on in the world spring 2020. It's now cloneable, so enjoy this fun website with some cool lottie animations. - Webflowhttps://webflow.com/website/Zoom-x-EmbacySafia | Webflow Landing Template (Freebie)Our landing page template works on all devices, so clone and get building! Crystal clear class naming and build quality makes this super easy to update and customize for your brand. Oh, we also include figma files! Our mission is to support all creators, from all backgrounds.http://safia.webflow.io/emeraldkit-free-template - WebflowI designed and developed a free SaaS marketing website template - EmeraldKit! Clone away and start building a great new shiny marketing website for your startup or existing product. It uses a 12 Column grid, making it easy to add new sections or edit existing sections.https://webflow.com/website/EmeraldKit-Free-TemplateWebflow Free Cloneables | FlowbaseSearch through the community's best webflow cloneable templates, components & guides. Completely free and community-driven. Easily find and clone webflow projects to your own account.https://www.flowbase.co/clone
Containers 容器Design Professional Websites VisuallyJoin over 500,000 designers building professional, responsive websites in Webflow. It is free to use and simple to start.https://webflow.com/dashboard/sites/new?rfsn=915210.4b583c&p=cards2cards2 - WebflowCards 2.0 are Symbol based Framework/UI Kit for quick design or wireframe of your next landing page project. 100+ symbols/elements ready for design or hi-fidelity wireframe for any UI/UX designers or developers out there. The main goal of this project is to help you - Webflow users - with creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code.https://webflow.com/website/cards2?rfsn=915210.4b583ccustom-showcase-slider - WebflowCreated on Sat Apr 18 2020 08:09:36 GMT+0000 (Coordinated Universal Time) This responsive website has 845 views, 11 comments, and 39 likes. A%20native%20custom%20interaction%20images%20showcase. Visit http://custom-showcase-slider.webflow.iohttps://webflow.com/website/Custom-Showcase-Slider
Navigation 選單navigation-mega-dropdown-custom-animation - WebflowCreated on Tue Apr 14 2020 10:47:24 GMT+0000 (Coordinated Universal Time) This responsive website has 396 views, 0 comments, and 29 likes. I%20created%20a%20YouTube%20tutorial%20here%20%28german%29%3A%20%0Ahttps%3A//youtu.be/C1k6bm8ybBY Visit http://nav-mega-dropdown.webflow.iohttps://webflow.com/website/Navigation-Mega-Dropdown-custom-animation
Blog 部落格Webflow - tenten 設計週報Webflow是一個無需程式碼的視覺化網路開發平台，它可以生成程式碼，使任何人都能建立基於網路的業務，並適應變化，而無需開發人員或數月的建設。該公司的目標是使網路建設民主化，使來自各種不同背景的人、各種規模的公司和團隊，從自由職業者和機構到中小型企業和其他企業，都能建立基於網路的業務。總體而言，Webflow的用戶現在超過350萬，在2021年總共建立了超過45萬個網站。這個位於加州舊金山的...https://tenten.co/learning/tag/webflow/cms-driven-portfolio - WebflowThis is a fully-responsive, CMS-driven portfolio website in the Webflow Designer. Open or clone this project and interact with the layout. Check out the full project build on Webflow University. We'll create a custom, CMS-driven portfolio website that professionally showcases client projects. https://university.webflow.com/courses/building-a-portfolio-website - Webflowhttps://webflow.com/website/CMS-driven-portfolioWebflow to Ghost | Build Ghost Themes totally in WebflowThe Adapter lets you break up the limits to design freedom and get the power of Ghost's blog management. Create your blogs like never before: choose Webflow for pixel-perfect and no code design, use Ghost to access all the features you need to run a blog. Try the Adapter ⟶https://www.udesly.com/webflow-to-ghost/
WebsitesFree Webflow Cloneable TemplateFree cloneable Webflow template. The perfect template to help kick start your own projects. For more clone-able templates, assets and guides - visit flowbase.cohttps://webflow-cloneable-template.webflow.io/a-cloneable-portfolio-site - WebflowWebflowhttps://webflow.com/website/A-Cloneable-Portfolio-SiteWebflow Course - Creating a Clean & Simple Website with Webflow | Jan Losert - StoreIn this series of 24 videos, I'll walk you through creating a website beforeyoushine.com. We will be creating Homepage, Page for collecting emails, Blog and Blog Detail. And in the new update I'll teach you how to create a Job Board with Webflow!https://janlosert.com/store/webflow-course-simple-website.htmlDocs - CMS Library for Webflow by FinsweetDocumentation for the F'in sweet CMS Library for Webflow. These docs cover all of the javascript functions you can do with the CMS Libraryhttps://cmsdocs.webflow.io/smooth-landing - WebflowCreated on Fri Apr 17 2020 16:22:57 GMT+0000 (Coordinated Universal Time) This responsive website has 1011 views, 0 comments, and 27 likes. Free%20Webflow%20Landing%20Page.%20%0A%0AA%20new%20product%20we%27re%20launching%3A%20https%3A//orangecattle.com/orangelabel%0A%0AWe%20use%20Webflow%20and%20Memberstack%21 Visit http://smoothlanding.webflow.iohttps://webflow.com/website/Smooth-LandingWebflow Showcased - Explore daily Webflow inspiration.Search for cloneable Webflow projects or explore daily inspiration curated from the Showcase.https://showcased.webflow.io/
Highlight to tweethighlight-text-to-tweet-it - WebflowCreated on Sat Dec 15 2018 02:00:38 GMT+0000 (Coordinated Universal Time) This responsive website has 1073 views, 7 comments, and 50 likes. Curious%20how%20to%20make%20a%20%22Medium%20like%22%20interaction%20of%20highlighting%20text%20to%20Tweet%20it%3F%0A%0ALook%20no%20further%2C%20you%20have%20arrived%20%uD83D%uDE04 Visit http://highlight-tweet.webflow.iohttps://webflow.com/website/Highlight-text-to-Tweet-it
Review Plugin Monto - Critical Apps for Webflow Shops & SitesOptimize your Webflow Ecommerce Shop or Site with Monto Reviews, Abandoned Cart Recovery & More. Try our free trial today! Free forever on staging domains.https://www.monto.io/
GeneralVisual CSS flexbox builder | WebflowOur CSS flexbox builder today lets you easily build websites with flexbox layouts-without actually writing the CSS. Try the Webflow flexbox generator now.https://flexbox.webflow.com/The 2020 Guide to Structuring Content on a Webflow Website | Nikolai BainFor some designers who don't know how to code, using Webflow is the first time that they have been given the keys to be able to develop websites from scratch. Without knowing the best practices, it's inevitable that this can turn into a recipe for disaster.https://www.nikolaibain.com/blog/structuring-content-on-webflowWebflow For TeamsLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.https://www.edgarallan.com/courses/webflow-for-teams/home
課程Get Started with WebflowYou're ready to make your screen designs in Figma, Sketch, Adobe XD, notepad or napkin and bring them to life for real on the web. You've tried your hand at building websites but haven't found a tool that is easy to learn and makes sense for designers.https://school.readysetgo.design/courses/webflow-beginnerSystemFlow | Designer-first Framework for WebflowGet notified on the launch of SystemFlow - the Missing UI Framework for Webflow.https://systemflow.co/Working with classes in WebflowCheck out a video I made via Loomhttps://www.loom.com/share/42f9285d6ce9420a9cdc0d9e65217ea5
Design Assets Shapefest™ - A massive library of free 3D shapesA massive free library of beautifully rendered 3D shapes. 160,000+ high resolution PNG images in one cohesive library.https://www.shapefest.com/
Chat Memberchat | LikePay.devSimple P2P Chat out of the box. Perfectly works with Webflow and Memberstack.https://www.likepay.dev/memberchat
Written Resources Webflow For TeamsLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.https://www.edgarallan.com/courses/webflow-for-teams/home
資料庫Nobull Airtable for Webflow AppConnect and sync Webflow CMS with Airtable directly. Leverage your Webflow CMS collections with the power of Airtable tables.https://nobull-airtable.webflow.io/
.png%3Ftable%3Dblock%26id%3D5a3b54b2-191c-41c6-b878-1cd5705a3519%26cache%3Dv2?width=1500&optimizer=image)
.png%3Ftable%3Dblock%26id%3D7fb64408-be05-4bfd-b44b-a468f4b2b231%26cache%3Dv2?width=1500&optimizer=image)
![Designing a landing page with Figma and Webflow [Live Recorded]](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs.ytimg.com%252Fyts%252Fimg%252Ffavicon-vfl8qSV2F.ico%3Ftable%3Dblock%26id%3D55609bd0-5848-43ac-ae5c-3845ca5d7f8e%26cache%3Dv2?width=1500&optimizer=image)
![Designing a landing page with Figma and Webflow [Live Recorded]](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fi.ytimg.com%252Fvi%252Fen1ncU04cHg%252Fmaxresdefault.jpg%3Ftable%3Dblock%26id%3D55609bd0-5848-43ac-ae5c-3845ca5d7f8e%26cache%3Dv2?width=1500&optimizer=image)
.png%3Ftable%3Dblock%26id%3D6487a20b-34de-4cb8-ad8c-d164e6219891%26cache%3Dv2?width=1500&optimizer=image)
.png%3Ftable%3Dblock%26id%3D760ada4f-07cd-4b0a-ab12-95f59f860766%26cache%3Dv2?width=1500&optimizer=image)
