Webflow is a revolutionary product that promotes the No Code Revolution. But what’s a No Code Revolution?
Webflow is a revolutionary product that promotes the No Code Revolution. But what’s a No Code Revolution? Well, it’s a tech revolution that enables non-coders to set up stylish websites without any programming knowledge. So, if you’re someone who is looking to build a new website but doesn’t know how to code or doesn’t want someone else to code, Webflow is the tool for you. It actually helps you design and build responsive websites and digital products without having to write any code. If you’re completely new to the product this Webflow Tutorial is an absolute one-stop-shop for your journey. WebFlow is one of its kind and works better than most of its competitor software in the market.
This article is a mini-tour guide to Webflow and by the time you reach the end of this article, you will know how to signup for Webflow, how to choose your account plan, your website Hosting Package, what's included in the Webflow Dashboard, and what are the elements of the Webflow Visual Editor, etc. So, let’s get started.
Signing Up is really easy, you can simply go to their official website at https://webflow.com/ and there you will see a Login and a Sign-Up option. Signing Up is absolutely Free. Click on Sign-Up and proceed with your email Id. You will see 4 questions on Sign Up — what’s your role, for whom are you building the website as in for yourself or as a freelancer, or whether you’ve had any experience of building websites or not, etc. Once you answer these questions, you are all set to explore the tool.
Once you Sign Up, you can access the Dashboard at https://webflow.com/dashboard. It’s just a regular window that gives you options to create, delete, and manage your projects. You’ll see an account option on the rightmost corner and there you can set up your public/private profile, upgrade and manage your account/ hosting plans with just simple clicks. It’s no rocket science.
The interesting part is the Designer’s Section. It’s like a social media of Designers. You can see their submitted work, follow them, just like you use Instagram.
You can also download the templates and use them to develop your own website from the Webflow Showcase. There 1000+ templates and you’ll be awestruck with the designs.
Then comes the learning part that gives you access to the WebFlow University. It has the latest course, tutorials, guides, and every resource you need to learn about Webflow. Apart from this, you get ample resources in the form of community discussions, eBooks, forums, blogs, and chat support as well.
Webflow has introduced 3 Account Plans to choose from. These are Starter, Lite, and Pro. Use the below guide to find the best fit for you.
Starter: FREE
This is the default plan you get when you sign up for the first time on Webflow. You can create up to 2 projects, do Client Billing, and host your website under the Starter Plan. However, you don’t get a White Labeling, Site Password Protection, and a Team Dashboard. You can’t either export your code under this plan.
Lite: $16 per month on annual billing and $24 per month otherwise
This is quite a balance between Starter and Pro. Go for this one if you want to create more than 2 projects and keep your code handy to export, test the builds and make prototypes more often. You can create up to 10 projects, Export Your Code, and get Enhanced Hosting instead of Free Hosting.
Pro: $35 per month on annual billing and $42 per month if you bill monthly
If you’re a Freelancer with a large number of projects or a designer who needs premium features, this plan is an ideal fit for you. You get Unlimited Projects, Enhanced Staging, Code Export Feature, White Labeling, Site Password Protection except for a Team Dashboard.
Wait… There’s a Team Plan too
Team Plan allows you to create any number of projects with a common Dashboard for your team. If you’re running a tech enterprise with 2 or more people, this plan is a must-have for you. You can go for any plan depending upon the size of your team. For a 2 person team, it’s $70 per month, for 4 people, $140 per month, and for 8 people it’s $280 per month on annual billing.
Don't confuse an Account Plan with a Hosting Plan. Your Account Plan is what includes the Webflow services for you as a user while your Hosting Package includes the services that Webflow provides for your Website.
So, once you decide to showcase your website, it’s time to get the right Hosting Package. Webflow is an extremely affordable platform when it comes to hosting a website and getting it staged for everyone to see. The Service to Cost Ratio is extremely high because Webflow gives you a whole lot of hosting features as compared to its package cost.
The Hosting Packages are divided into two sections — Regular Website and eCommerce. Webflow offers 4 Hosting Packages for Regular Websites and 3 for eCommerce websites.
The first one is Basic Hosting that will cost you $12 per month if you bill it annually, otherwise, you’re required to pay $15 per month. You can go with this one if you want a simple and basic static website for clients to see your work and services.
The second is CMS Hosting. Its annual charges will cost you around $16 per month, or $20 per month if billed monthly. It’s a good choice for content-based sites as in Blogs, News, Art Gallery, etc.
Third is Business Hosting that costs around $36 per month on annual billing and $45 per month otherwise. Business Hosting is preferable for almost every business that has high traffic and multiple APIs and plugins.
The fourth is Enterprise Hosting that comes with a lot of features designed on the basis of your custom requirements. The total cost of this hosting depends on what features and services you want.
Can you Host for FREE? Yes, Why Not! Not all the packages are paid. Webflow provides its users a Free Package that allows them to access certain features. If you want to have a basic website and don’t want to spend any money at all, Free Hosting is for you.
You will get the following features in Free Hosting:
These are quite a number of features they provide in Free Webflow Hosting and you don’t have to pay even a single penny. Amazing, right?
Let us compare all the Webflow Hosting Packages parallel and get a broader view to understand what they exactly offer to the users.
Comparing the Webflow Hosting Packages
Note: All the Webflow Hosting Services get Enhanced if you have a Lite or Pro Account Plan.
These are specially designed packages for eCommerce websites and online stores. If you own a small to medium business and planning to move online. it’s a perfect solution.
Standard: The standard package is affordable for new businesses, it will cost you $29 per month with all the features of the CMS Plan. Along with this, you’ll get Stripe and PayPal payments options, customizable checkout, automatic tax calculation, manual shipping rules, 3 staff accounts, Facebook and Instagram products integration, email customization, up to $50k sales a year with a 2% transaction fee.
Plus: You get all the features of the Business Plan, 0% transaction fee, 200k sales a year, 10 staff accounts, and unbranded email recipients along with everything you get in the standard plan.
Advanced: This plan is for a high sales business and you don’t have any upper cap for the number of sales. It costs around $212 per month which is quite affordable for established businesses.
The Webflow Visual Editor is a Drag and Drop Tool. It’s easy and effortless especially for those who are new to the platform. Let’s take a tour of the Webflow Visual Editor and create a new Webflow Website today.
Side Panel Toolbar: This is a multi-element toolbar on the left-hand side of the Editor. It helps you create the layout of your website, add sections, containers, columns, grids, heading boxes, images, Hamburger Icon, Buttons, Headings, etc.
Sections Vs. Containers: The first thing in the layout is Sections and Containers. Both of these are highly confusing but you need not worry now. A Section is a part of the Layout that holds the container while a container helps you get the content streamlined within a section. You can add sections and then insert containers to that section, for example, a Navigation Bar can be considered as a Section while different parts of the Nav Bar like Search, Menu, etc. can be included inside that Section in a Container. Sections provide a meaningful distinction to different parts of the website and containers hold the content in a Section. The Section allows you to design and style the website while the correct implementation of containers makes the website responsive for multiple screens.
Div Blocks: Div Block allows you to give individual styling to different blocks within a Container. All the Divs in a Container follow the Container style but may have their own characteristic features. Divs help you style individual elements of the container without disturbing other parts of the same Container.
Background Videos and Images: You can style up your website with animations, images, and videos. Using creatives to your website is extremely easy and you can simply collect your media in a folder and use the standard Drag and Drop method to upload any image or a video. Super easy, right?
Styling Panel: It is on the right-hand side of the Visual Editor and allows you to style your content. You can adjust the height, width, layout, padding, fonts, background, spaces, etc. in the Styling Panel.
Webflow is an absolute product if you want to design and publish standalone websites. In fact, it has evolved beyond just showcasing your websites, you can now create CMS websites, eCommerce websites, and online stores as well. Further, it allows Functional Prototyping which definitely is a smart move for designers.
Don’t run after the traditional website builders, take a step forward and switch to Webflow. You’ll not be disappointed. Still not convinced? Check out a detailed Comparison Between Webflow and WordPress, you’ll change your mind.
What’s better — WordPress or Webflow? Learn More.
