{"id":105307,"date":"2022-07-27T20:37:49","date_gmt":"2022-07-27T20:37:49","guid":{"rendered":"https:\/\/www.markup.io\/?p=5307"},"modified":"2024-06-24T14:21:08","modified_gmt":"2024-06-24T13:21:08","slug":"how-to-use-webflow","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/","title":{"rendered":"How to use Webflow in 4 simple steps (features &#038; pricing)"},"content":{"rendered":"\n<p>Did you just sign up for Webflow?&nbsp;<\/p>\n\n\n\n<p>Awesome. Pull up a seat and let&#8217;s chat.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/09\/welcome.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/giphy.com\/gifs\/brooklynninenine-nbc-brooklyn-nine-b99-XD9o33QG9BoMis7iM4\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You&#8217;ve probably already spent hours clicking around the site, tinkering with the settings, and testing to see what works. Now it&#8217;s time to take a step back and get a bird&#8217;s-eye view of how everything fits together.<\/p>\n\n\n\n<p>Luckily for you, you&#8217;re in the right place! Today\u2019s crash course covers the basics of <strong>how to use Webflow<\/strong>.<\/p>\n\n\n\n<p>Webflow is an amazingly powerful, easy-to-use web design tool \u2014 but that power has a flip side. Among the features you&#8217;ll eventually come to love, you&#8217;ll also encounter some finer details you may initially find confusing. Where do you even start when creating Webflow projects?<\/p>\n\n\n\n<p>Our Webflow tutorial is packed with tips for moving quickly from a newbie to Webflow pro. By the end of it, you\u2019ll have the skills you&#8217;ll need to bring your awesome user interface (UI) and user experience (UX) design ideas into reality.<\/p>\n\n\n\n<p>But first, let\u2019s get the basics out of the way.<\/p>\n\n\n\n<div class=\"toc\">\n\n\n<p><b>Table of contents<\/b><\/p>\n\n\n\n<li><a href=\"#C1\">What is Webflow?<\/a><\/li>\n\n\n<li><a href=\"#C2\">Webflow features<\/a><\/li>\n\n\n<li><a href=\"#C3\">Webflow pricing<\/a><\/li>\n\n\n<li><a href=\"#C4\">How to use Webflow in 4 simple steps<\/a><\/li>\n\n\n<li><a href=\"#C5\">Frequently asked questions (FAQs)<\/a><\/li>\n\n\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C1\">What is Webflow?<\/h2>\n\n\n\n<p>For the uninitiated, Webflow is an all-in-one in-browser <strong>no-code website builder and hosting service.<\/strong> It helps users design and create blogs, eCommerce stores, online magazines, portfolios, and other types of sites <strong>without prior programming knowledge<\/strong>.<\/p>\n\n\n\n<p>With Webflow, you can leverage the potential of programming languages such as CSS and JavaScript to create customized websites without writing a single line of code.<\/p>\n\n\n\n<p>However, if you need to add code to your site, Webflow enables you to do so. \ud83d\ude09<\/p>\n\n\n\n<p>No-code means that <strong>you don\u2019t have to know any programming languages to create your project<\/strong>. But if you do know how to code, the platform gives you the ability to use your knowledge and <strong>add custom code to entire sections, pages, or websites<\/strong>.&nbsp;<\/p>\n\n\n\n<p>To put it simply, Webflow offers <strong>the flexibility, power, and functionality of <a href=\"https:\/\/www.markup.io\/blog\/webflow-vs-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a> with the simplicity of Wix or Squarespace<\/strong>. It\u2019s the middle ground where creative freedom meets simplicity and ease of use.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/09\/teamwork.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/giphy.com\/gifs\/office-teamwork-coworkers-dSetNZo2AJfptAk9hp\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Webflow provides web designers with all the tools necessary to create complex user interfaces (UIs) from scratch\u2014a difficult thing to do without coding knowledge on other platforms. At the same time, creatives can also use pre-made, customizable templates on Webflow.&nbsp;<\/p>\n\n\n\n<p>Are you a senior web developer and a programming master? Cool, Webflow enables you to leverage your life-long coding experience.<\/p>\n\n\n\n<p>Have you never heard of CSS, HTML, or JavaScript? No problem; you don\u2019t need to know any of these programming languages to use Webflow.<\/p>\n\n\n\n<p>The point is that Webflow accommodates the needs of any professional, regardless of their level of expertise.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C2\">Webflow features<\/h2>\n\n\n\n<p>In addition to web development features, the platform is equipped with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Webflow CMS: A flexible content management system&nbsp;<\/li>\n\n\n\n<li>Webflow Designer: An intuitive visual web design editor<\/li>\n\n\n\n<li>Webflow eCommerce: An online store builder<\/li>\n\n\n\n<li>Webflow hosting: A powerful hosting platform backed by Amazon Web Services (AWS) and Fastly<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s see what each of these tools can do.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>The Designer<\/strong><\/h4>\n\n\n\n<p>The Webflow Designer is a no-code web design tool that enables users to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Structure web pages<\/li>\n\n\n\n<li>Populate pages with content and media files<\/li>\n\n\n\n<li>Add animations and interactions<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1024x546.jpg\" alt=\"Screenshot of Webflow Editor.\" class=\"wp-image-105384\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Editor.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/university.webflow.com\/lesson\/intro-to-the-designer\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow University<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The Designer is based on <a href=\"https:\/\/university.webflow.com\/lesson\/intro-to-the-box-model\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>the box model<\/strong><\/a>, allowing you to create responsive designs effortlessly.&nbsp;<\/p>\n\n\n\n<p>The box model is a website layout type that allows you to stack content vertically, which gives web pages a natural flow, making them easily adaptable to any screen size.<\/p>\n\n\n\n<p>With this layout, each element on a webpage is framed by a box. Boxes can be arranged next to each other or one on top of another, making the editing process<strong> similar to how you&#8217;d add content to a Word document<\/strong>.&nbsp;<\/p>\n\n\n\n<p>With the Designer, you can also add custom code to your website. Plus, you can adjust HTML content and CSS classes and properties of elements on your site without using JavaScript.&nbsp;<\/p>\n\n\n\n<p>While you customize your Webflow template or edit and add elements to your blank project, the Designer editor creates web-ready code so you don\u2019t have to.<\/p>\n\n\n\n<p>To access the Webflow Designer, you can click on your <strong>project thumbnail<\/strong> on the <strong>Dashboard<\/strong> or select the <strong>Designer option<\/strong> from the toolbar of the project when adjusting the <strong>project settings<\/strong>. Alternatively, you can also access the <strong>Menu button<\/strong> at the bottom-left corner of the <strong>Editor<\/strong> and select the <strong>Designer option<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>The CMS<\/strong><\/h4>\n\n\n\n<p>Webflow\u2019s CMS and Designer allow you to use dynamic content Collections that establish how frequently-posted content types will be formatted (i.e., portfolio entries, restaurant menus, blog posts, etc.). This feature is a time-saver for anyone who has to regularly create similar entries on web pages or even entire pages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1024x546.jpg\" alt=\"An example of Webflow's visual content management system.\" class=\"wp-image-105386\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_CMS.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/university.webflow.com\/lesson\/intro-to-webflow-cms\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow University<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>All this is code-free.<\/p>\n\n\n\n<p>Further, the CMS can be used both from within the Webflow Designer and the Webflow Editor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Ecommerce&nbsp;<\/strong><\/h4>\n\n\n\n<p>Webflow Ecommerce enables you to create and efficiently manage an eCommerce site. It allows you to build and update a store\u2019s database quickly through its dynamic content capabilities (i.e. Collections).<\/p>\n\n\n\n<p>Webflow\u2019s Ecommerce tools support various payment gateways, including Apple Pay, Paypal, Google Pay, and Stripe. Plus, Webflow Ecommerce allows you to scale your online business through a wide variety of integrations, such as Facebook and Google.<\/p>\n\n\n\n<p>Please note that the Ecommerce features have different pricing options than regular websites.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hosting<\/strong><\/h4>\n\n\n\n<p>Webflow hosting uses bleeding-edge hosting tech to offer you a fast and scalable experience. Webflow stores the websites it hosts on Amazon Web Servers.&nbsp;<\/p>\n\n\n\n<p>Its hosting infrastructure is capable of handling intense traffic\u2014up to millions of views daily!<\/p>\n\n\n\n<p>What\u2019s more, the response time of Webflow websites is less than 100 milliseconds.<\/p>\n\n\n\n<p>Pretty impressive!<\/p>\n\n\n\n<p>Even better? Free SSL certificates are included in the hosting plans.<\/p>\n\n\n\n<p>This is only a glimpse into what Webflow has to offer. You can visit <a href=\"https:\/\/university.webflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow University<\/a> for a complete overview of what each feature can do.<\/p>\n\n\n\n<p>Everything sounds great so far, but how much does all of this cost?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C3\">Webflow pricing<\/h2>\n\n\n\n<p>Webflow is offered across two pricing categories\u2014Site plans and eCommerce plans.<\/p>\n\n\n\n<p>The Site plans cover a free version and four paid plans that range from $12 per month to $36 per month:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic: $12 per month<\/li>\n\n\n\n<li>CMS: $16 per month<\/li>\n\n\n\n<li>Business: $36 per month<\/li>\n\n\n\n<li>Enterprise: custom pricing<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1024x546.jpg\" alt=\"Side-by-side comparison of Webflow's five plans and the features included with each.\" class=\"wp-image-105387\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Pricing.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/webflow.com\/pricing\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>With the free version (the Starter plan) you can create a website with the Webflow.io domain. 50 CMS items and 1 GB of bandwidth are also included in this plan.<\/p>\n\n\n\n<p>What\u2019s included in the Basic plan?<\/p>\n\n\n\n<p>The Basic plan is ideal for simple sites that don\u2019t require more than one editor. It comes with 50 GB bandwidth and a custom domain.&nbsp;<\/p>\n\n\n\n<p>The CMS, Business, and Enterprise plans accommodate more complex needs and include higher bandwidth, several guest editors, thousands of CMS items, and\u2014of course\u2014a custom domain.<\/p>\n\n\n\n<p>Users can save 20% with annual billing for any of the paid Site plans.<\/p>\n\n\n\n<p>The eCommerce plans vary between $29 and $212 per month:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Standard: $29 per month<\/li>\n\n\n\n<li>Plus: $74 per month<\/li>\n\n\n\n<li>Advanced: $212 per month<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1024x546.jpg\" alt=\"Side-by-side comparison of Webflow's three eCommerce plans and the features included.\" class=\"wp-image-105388\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_EcommercePricing.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/webflow.com\/pricing\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The Standard Ecommerce plan is best for startups that don\u2019t exceed $50k in annual sales. This plan covers 500 items and has a 2% transaction fee in addition to any processing fees.<\/p>\n\n\n\n<p>The Plus and Advanced plans come with no additional transaction fees and support from 1,000 to 3,000 items. Both plans include all the features in the Business plan.<\/p>\n\n\n\n<p>One last thing to note before you pull out your credit card\u2014with the eCommerce pricing tiers, users can save up to 30% when choosing the yearly billing method.<\/p>\n\n\n\n<p>Before committing to any pricing plan, here\u2019s what you can expect from the free version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C4\">How to use Webflow in 4 simple steps<\/h2>\n\n\n\n<p>Creating a website without any programming knowledge sounds like a dream\u2014but with Webflow, it\u2019s as real as it can be.<\/p>\n\n\n\n<p>You have access to tons of in-app tutorials and tips that will help you use the Webflow tools to their full potential.<\/p>\n\n\n\n<p>There are four main steps you need to take before publishing your website but fear not\u2014all of them are easy to follow.<\/p>\n\n\n\n<p>Would we ever steer you wrong?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"209\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Aladdin-GIF.gif\" alt=\"\" class=\"wp-image-105407\"\/><figcaption class=\"wp-element-caption\">Image source: <a href=\"https:\/\/giphy.com\/gifs\/disney-aladdin-trust-voF2A48B0XQje\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><em>Want to make sure you don&#8217;t forget anything when you&#8217;re working on your next Webflow project? Check out this <a href=\"https:\/\/www.flowgurus.co\/checklist\" target=\"_blank\" rel=\"noreferrer noopener\">147-step checklist<\/a> from our friends at Flow Gurus.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step #1: Create a new project<\/strong><\/h4>\n\n\n\n<p>Once you\u2019ve logged into your Webflow account, go to Dashboard, and click on the <strong>New site<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1024x546.jpg\" alt=\"Example of a Webflow dashboard.\" class=\"wp-image-105392\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Dashboard.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, you can choose a free or paid template that you can edit and make your own.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1024x546.jpg\" alt=\"Webflow's gallery of responsive website templates for designers, businesses, and personal use.\" class=\"wp-image-105391\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Templates-1.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Webflow offers users the ability to use templates for a wide variety of use cases, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Photography<\/li>\n\n\n\n<li>Portfolio<\/li>\n\n\n\n<li>Business<\/li>\n\n\n\n<li>Blog<\/li>\n\n\n\n<li>Agency&nbsp;<\/li>\n\n\n\n<li>Beauty<\/li>\n\n\n\n<li>Restaurant<\/li>\n\n\n\n<li>App<\/li>\n\n\n\n<li>eCommerce<\/li>\n<\/ul>\n\n\n\n<p>If you already have a clear idea of what your website should look like, you can choose the <strong>Blank Site<\/strong> option. This option is like a fresh canvas waiting for you to paint on your design.&nbsp;<\/p>\n\n\n\n<p>To help you learn how to use Webflow\u2019s capabilities faster, we\u2019re going to create a blank project.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1024x546.jpg\" alt=\"How to use Webflow and create a blank project\" class=\"wp-image-105393\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NewSite.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>After choosing the template, you will be prompted to name your site. Type in the site\u2019s name and click on <strong>Create site <\/strong>to begin editing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1024x546.jpg\" alt=\"Click create site\" class=\"wp-image-105394\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_NameSite.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step #2: Add elements (typography elements, logo, etc.)<\/strong><\/h4>\n\n\n\n<p>Before adding any element to our blank canvas, we want to establish the body style of all the pages from the get-go. This way, we\u2019ll <strong>effortlessly ensure visual consistency<\/strong> without manual editing.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1024x546.jpg\" alt=\"Establish the body style\" class=\"wp-image-105395\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_BodyAllPages.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>To do that, select <strong>Body<\/strong> in the <strong>Navigator<\/strong> on the left side of the screen. Then, head over to the <strong>Body Styles<\/strong> section on the right side of the screen and select the <strong>Body (All Pages)<\/strong> class.<\/p>\n\n\n\n<p>After that, you can navigate through the <strong>Style panel <\/strong>and adjust your body\u2019s layout, spacing, size, position, typography, background, borders, and effects.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1024x546.jpg\" alt=\"Adjust the body layout on the Style panel\" class=\"wp-image-105396\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Panels.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can then reuse the style you set up for the Body class for all the web pages on your site.<\/p>\n\n\n\n<p>After you\u2019re done styling the body, you can start adding elements to your page using the Navigator on the left side of the screen.&nbsp;<\/p>\n\n\n\n<p>To do that, click on the plus button and drag and drop the elements you want on your page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1024x546.jpg\" alt=\"How to add elements\" class=\"wp-image-105397\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_AddElement.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can first add the building blocks of your page (a.k.a. layouts) to have an easier time aligning all the elements into a cohesive design. For instance, you can create columns, grids, or simple sections.&nbsp;<\/p>\n\n\n\n<p>In the example below, we\u2019ve added a simple Section div at the top of the page where we placed a navigation bar. Under it, we\u2019ve created two columns containing two identical paragraphs.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1024x546.jpg\" alt=\"How to create columns\" class=\"wp-image-105398\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Columns.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>To edit any added element, click on it and go to the left-side menu. Now, adjust the element\u2019s size, position, background, and so on.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step #3: Make your site responsive<\/strong><\/h4>\n\n\n\n<p>In the mobile-first world we live in today, it\u2019s vital for brands to have <a href=\"https:\/\/www.markup.io\/blog\/how-to-launch-a-website\" target=\"_blank\" rel=\"noreferrer noopener\">responsive websites <\/a>that load fast and display all the site\u2019s elements correctly on any screen size.<\/p>\n\n\n\n<p>So, after you\u2019re happy with how your design looks, it\u2019s time to check how your Webflow site is displayed on different breakpoints (i.e. how your website looks on mobile versus on desktop).&nbsp;<\/p>\n\n\n\n<p>Switch between different screen sizes by clicking on the icons depicting mobile devices at the center of the Designer\u2019s top bar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1024x546.jpg\" alt=\"Check how your site is displayed on different breakpoints\" class=\"wp-image-105399\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_View.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The cool thing about making changes to a breakpoint when using Webflow is that the edits will be synced with the smaller-sized screens automatically.&nbsp;<\/p>\n\n\n\n<p>So, for instance, if you\u2019re adjusting the font size of your heading in the Tablet view, both the Mobile Landscape and the Mobile Portrait views are adjusted accordingly, while the Desktop breakpoint stays the same.<\/p>\n\n\n\n<p>Once you\u2019re satisfied with the way your site is displayed on each device, all that\u2019s left to do is go live. Publish your website by clicking on the <strong>Publish<\/strong> button. \ud83c\udf89<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1024x546.jpg\" alt=\"Publish your webflow site\" class=\"wp-image-105400\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1024x546.jpg 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1100x586.jpg 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-768x409.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1536x819.jpg 1536w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-180x96.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-540x288.jpg 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1080x576.jpg 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1145x610.jpg 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1600x853.jpg 1600w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish-1200x640.jpg 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/07\/Webflow_Publish.jpg 1760w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bonus Step: Review and finalize your website<\/strong><\/h4>\n\n\n\n<p>Congrats! You just released your awesome design for the world to enjoy.&nbsp;<\/p>\n\n\n\n<p>Now comes the question: Will your client or team like it?&nbsp;<\/p>\n\n\n\n<p>To get answers quickly, you can use a <a href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">website annotation tool<\/a>, such as <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>.<\/p>\n\n\n\n<p>Integrating visual feedback tools into your review and approval process helps you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minimize feedback loops<\/li>\n\n\n\n<li>Get pixel-perfect, contextual feedback<\/li>\n\n\n\n<li>Streamline collaboration with teammates and clients<\/li>\n<\/ul>\n\n\n\n<p>With MarkUp.io, you can create a virtual copy of your website and share it with whoever you want via link or email. Once the reviewers open the website MarkUp, they can point, click, and comment on any element on the website.<\/p>\n\n\n\n<p>This way, you can say goodbye to long email feedback chains and the confusion that comes with them.<\/p>\n\n\n\n<p>To make things even easier, MarkUp.io has a <a href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-on-google-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome extension<\/a> that enables you to create Website MarkUps with the simplicity of bookmarking your favorite blog.<\/p>\n\n\n\n<p>This last step is optional. It\u2019s up to you to decide how much time and effort you want to invest in the feedback sessions with your clients.<\/p>\n\n\n\n<p>However, we highly recommend you use an annotation tool and get to<a href=\"https:\/\/www.markup.io\/blog\/7-steps-for-an-efficient-project-approval-process-2022-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\"> project sign-off <\/a>quickly.<\/p>\n\n\n\n<p>Speaking of signing off\u2026 \ud83d\ude43<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n\n\n<p>We know you\u2019re excited to start experimenting with Webflow. And why shouldn&#8217;t you be?<\/p>\n\n\n\n<p>Now you have the knowledge you need to create awesome websites without any line of code. Who wouldn&#8217;t be enthusiastic?<\/p>\n\n\n\n<p>If you need even more resources on website creation, feel free to <a href=\"https:\/\/www.markup.io\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">head over to our blog<\/a> to read more about providing feedback on live web pages whenever you take a break from your awesome Webflow projects.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C5\">Frequently asked questions (FAQs)<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Q1. What is Webflow used for?<\/strong><\/h4>\n\n\n\n<p>Webflow is used for designing, building, and hosting websites. The platform features a content management system, no-code web development tools, and multiple hosting options for all website types, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ecommerce websites<\/li>\n\n\n\n<li>Portfolios&nbsp;<\/li>\n\n\n\n<li>Business sites&nbsp;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Q2. Is Webflow good for beginners?<\/strong><\/h4>\n\n\n\n<p>Webflow is an intuitive website builder that is suitable for beginners. The platform\u2019s no-code web development and design capabilities make it easy for absolute novices to create beautiful websites either from scratch or by using customizable templates.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Q3. How long does it take to learn Webflow?<\/strong><\/h4>\n\n\n\n<p>Webflow has a close-to-zero learning curve, meaning you can start using it the minute you sign up for an account. Webflow\u2019s in-app tutorials make it easy for beginners to successfully create websites without prior programming experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you just sign up for Webflow?&nbsp; Awesome. Pull up a seat and let&#8217;s chat.&nbsp; You&#8217;ve probably already spent hours clicking around the site, tinkering with the settings, and testing to see what works. Now it&#8217;s time to take a step back and get a bird&#8217;s-eye view of how everything fits together. Luckily for you, &hellip; <a href=\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":105409,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-105307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Webflow in 4 simple steps (features &amp; pricing) - Markup.io<\/title>\n<meta name=\"description\" content=\"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Webflow in 4 simple steps (features &amp; pricing) - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-27T20:37:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-24T13:21:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\",\"url\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\",\"name\":\"How to use Webflow in 4 simple steps (features & pricing) - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg\",\"datePublished\":\"2022-07-27T20:37:49+00:00\",\"dateModified\":\"2024-06-24T13:21:08+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"How to Use Webflow in 4 Simple Steps (Features & Pricing)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Webflow in 4 simple steps (features &#038; pricing)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Webflow in 4 simple steps (features & pricing) - Markup.io","description":"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/","og_locale":"en_GB","og_type":"article","og_title":"How to use Webflow in 4 simple steps (features & pricing) - Markup.io","og_description":"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.","og_url":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/","og_site_name":"Markup.io","article_published_time":"2022-07-27T20:37:49+00:00","article_modified_time":"2024-06-24T13:21:08+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/assets.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg","type":"image\/jpeg"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/","url":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/","name":"How to use Webflow in 4 simple steps (features & pricing) - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg","datePublished":"2022-07-27T20:37:49+00:00","dateModified":"2024-06-24T13:21:08+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Wanna know how to use Webflow in 4 simple steps? We cover the main features, pricing plans, and everything you need to know to use Webflow in no time.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/how-to-use-webflow\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/07\/HowToUseWebflow_Header-1.jpg","width":2560,"height":1440,"caption":"How to Use Webflow in 4 Simple Steps (Features & Pricing)"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"How to use Webflow in 4 simple steps (features &#038; pricing)"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/105307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=105307"}],"version-history":[{"count":7,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/105307\/revisions"}],"predecessor-version":[{"id":203464,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/105307\/revisions\/203464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/105409"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=105307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=105307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=105307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}