The Easiest Guide to Webflow for Beginners
Webflow is getting massively popular. It’s taking over the design/dev industry and is leading the no-code tools market and changing the lives of a lot of designers and developers out there. But the thing which is still a bit different and harder about Webflow is the fact that you need to at least know a little bit of how websites work to get into it. (Damn you, learning curve!) In this article, I’m going to share with you all of the important bits and pieces of Webflow that I learned and incorporated into my daily work.
But don’t worry, this guide isn’t technical at all, in fact — I can’t on my own write a single line of code so take this as a complete checklist from a non-technical person! So let’s look at what are we going to cover:
What’s Webflow
In case you never heard about Webflow, Webflow is — A visual web design tool that translates your design decisions into clean, production-ready code. Built to enable designers and developers and basically anyone to create fully responsive websites.
Why should you care?
Think about it this way — If you’re a designer, Webflow is a step forward in your career. You’ll be able to take on stuff you design and make it live. Not with prototypes but actually live. And it’s really that simple. Of course, you'll need to learn a few things but in general, this is the future. From the client’s idea — research — design — to an actual working project. All done by you — the designer.
Here's how using Webflow changes your design process:
[May 2020 Update] I've created a Youtube video covering all the parts of this guide to give you another way to digest the content and start with your Webflow journey!
So let’s look today at where to start with your learning process and find out how Webflow can improve your skillset.
0. Where it all starts
Webflow University — This might seem obvious, but Webflow university is something else than standard product teaching videos, that's why I'm including this at the very begging of your journey. This is a place where I fell in love with this product. The tutorials are always on the point, under 5 mins and superbly funny, funny, funny even tho it’s technically coding. And masterfully created education materials around every part of the application.
Note: I personally learned everything from these videos — which I think is a pretty decent testimonial and that's why I think it has to be on the first spot here.
1. The Box Model — The ONLY tech thing you need to know
Box model — This CSS rule is one of the small challenges you'll face in the beginning. In general, we are talking about the understanding of how websites work — given that each block is consisting of a few properties which leave it placed on the website. Webflow designing is all about stacking boxes on top of each other. Which is the main difference between Sketch/Figma/XD and Webflow. In graphic editors we're used to building in space/canvas and put elements anywhere we want vs. in Webflow you’re stacking blocks on top of each other.
PS. I’m not the best at explaining this, we’re here because of Webflow. I’m no CSS guru. Webflow has an amazing explanation of this — The box model for beginners web design tutorial
But enough theory. Let’s look at where we will spend most of the time.
2. The Designer — Deep-dive Into The Main Interface
So this is it, this is the interface where we’re going to be creating all the designs. Yes, Is does look a little bit like a Photoshop interface. There is obviously a LOT of going on so let’s look at the most important parts for you.
01 — Navigator — This is the structure of each page displayed as an overview of all the elements such as divs, images or text blocks. You can think about it as layers in Sketch or Figma.
02 — Pages — Here you'll find an overview of all of your pages and their details within the project + option to duplicate or add new pages and folders to keep the structure of your work. Note here: folders are great for the organization but they will add “folder name/ to your URL, so think about this during planning your project.
03 —Page & SEO Settings — Once Pages panel is open, hover over the certain page and click on the settings icon to add various SEO and OG tags. This is also a place to add your custom code, duplicate pages or delete them.
04—Assets Manager — This is a place where you can view all your assets used within your project. With a little trick (see below) it works as FTP to eg. upload your OG Images.
05 — Style Panel — The Main panel to work with your elements within the project. Add margins, colours or text sizes and position them properly in your designs.
Within the style panel on the first section, you’ll also find a field for Selector for giving your element CSS class/classes. Thanks to that you’ll be able to style multiple elements at the same time. And the little arrow there is for styling states of your element like what’s going to happen on hover etc.
06 — Element Settings — Second Tab in the right panel, all settings of the ONE particular element. Settings like where the particular button should link to, how certain collection should be filtering results etc. — The important take away here to remember is: this panel is only tied to one item, not like with the style panel and classes.
07 — Interactions — The advanced part of Webflow but frequently described as the most important Webflow magic. A place to set up all the cool animations and transitions for your project. But we will leave this for now. You won’t necessarily need it for your first projects.
08 — Break Points — 4 main breakpoints and a new panel with the current resolution. These are 4 tabs to review how your website looks on different devices. Something that I'd personally kill for in Sketch. This is where I see the biggest power of Webflow. Remember the long hours of creating every web design for Tablet and for Mobile in Sketch or Figma. By just moving text around and making these looong noodles of designs. Just so your developer knows how to shrink it down. With Webflow I’m usually done with making the whole site responsive within 30 minutes to 3 hours tops for complicated sites.
Device Check (Sizes) — One last thing — you see the right dragging thingy? That’s for you to test different devices and making sure your website does look awesome on all of them.
And that’s all of the main stuff. Following I listed a few places for you to know about for the future. You’ll need these once you get comfortable with the list above.
(Additional) 09 — CMS — Is something a little bit advanced but super powerful feature, that’s going to save you a lot of time so I think it’s good to be aware of it. Think of the times Invision Craft came to the game but this time it’s on sooo many steroids. Webflow CMS is a part of your project which you can use to fill content to an element called Collection list. Collections are something that you put your content in to let the content being handled by your CMS and that’s where your whole Webflow game becomes dynamic!
(Additional) 10 — Project Setting — Isn’t already part of the Designer interface but it’s a place with all the additional settings and things such as favicon, custom fonts settings, hosting settings, etc.
(Additional) 11 — Editor — And the last bit of the whole Webflow Suite is Editor, it’s sort of backstage for your website editor/s. Remember the times where you got an email from your client/copywriter that there are 15 typos in the design or live website and screenshots of what to fix? Well, that’s is over now. With editor access, anyone can go and edit content at any time. Sounds scary I know. But don’t worry. Your editor has only surface access — editors are not able to add elements only edit content in them. With editor access, you can also invite people to contribute articles to your company site, or any other content.
(Additional) 12 — Top Bar Actions — Undo and redo, status if your project is saved to Webflow servers, the 3rd section is one of the most important ones if you want to export your code to use it on your hosting. 4th icon is to share your project via the Designer (for support or any kind of help) and the 5th is where you’re going to publish your site!
And that’s all about the interface. Next, we will cover all the elements like div or link block to look at to actually start creating!
📝 You might have noticed we haven’t covered the “+” icon in the left sidebar! So, let’s do that right now — The Elements panel!
3. Elements Panel — Overview Of The Most Important Elements And Little Tricks Around!
The first time you launch Webflow you’ll find a big variety of elements, which can be a bit overwhelming at first. Some of them come with predefined properties to ease the learning curve some are tied to specific use cases. So let’s look together at the ones used the most, to help you navigate through them and really touch on the basics so you can explore the rest later in the process.
Div block (Basic) — Main building element for every project. Div block is in general, a folder (wrapper) which you’ll use to group and position your elements. Div with Flex properties will quickly become your best friend. The most common layout structure would look like this.
Note: You might have noticed elements such as Section, Container or Columns these are superb for start. And feel free to use them — but they are in my eyes basically just divs with pre-defined properties which you’re unable to change. This might be nice to start with but in the long run, it might not be the best decision. Using Container element you’re also tied to having all your designs designed in 940px width.
Grid (Layout) — Div Block, Flex and Grid — The ultimate combination and in my personal view the most important building elements/properties. Grid is a super powerful element that you should add to your skillset. Grid is like an invisible mesh that guards your content on the page and around the different viewports. The best resource here would be this University guide — https://university.webflow.com/courses/grid
Link Block (Basic) — This one does exactly what it says 😎 linking everything that's inside it either to a URL, page within a project, email, phone or by clicking you'll download an attachment. Link block is great for buttons or for linking whole blocks of content. Similar to what's visible on the image.
Typography — Heading, Paragraph, Text block, Text link all of these are another main building part of every project, they do exactly what they stand for. The important thing here to focus on is the Rich Text Element. This is a bit advanced element but it will come super handy when you're building blogs or any kind of dynamic pages with content filled in CMS.
Form Block (Forms) — Main elements from Forms folder and the only one really needed. The rest of the folder can be only added to Form Blocks. So always start with dragging Form Block and if you need more elements you know where to find them 🧐!
Webflow in Basic Hosting Plan or CMS Hosting Plan offers 500 or 1000/monthly form submissions which you’ll have within your Project Settings and can be easily exported as .csv. You can also tie your forms to service like Mailchimp to collect your newsletter subscriptions without any additional hustle.
Navbar (Components) — Another part of every common Webflow projects. Comes fully equipped with all the needed properties. For the first couple of months, I didn’t even know this element existed. So making everything custom was a bit of a nightmare. Navbar comes with 3 nav links within Nav Menu which are a folder that you then use on smaller devices to slide down clicking on the menu icon.
The menu icon (visible on default on Tablet and below) is also customizable, which is a challenge for most people — the trick here is: just select icon and hit delete and then place your special menu icon into the Menu Button wrapper. Since Navbar comes with a lot of pre-defined properties it might be slightly harder to approach it first — I’ll leave here a link to one of my tutorials where I’m actually making a custom responsive menu using the navbar component — https://www.youtube.com/watch?v=r8DGLv18MKU
(The rest is mostly optional, but these components can help you build some common website sections and I’d always recommend using them)
Tabs (Components) — Great for stuff like pricing for monthly or yearly payments or showing different features overviews.
Lightbox (Components) — To handle showing full-size previews of your portfolio pictures or details of your e-commerce products.
Slider (Components) — And good old slider. A component that can slide from images to any kind of div structures to be suitable for stuff like customer testimonials etc.
Collection list (Extra — CMS) — Collections are a way to pull your CMS content into your websites. It's a set of 3 wrappers each on a separate level. At first, you always need to select which CMS collection do you want to connect to be able to start working with its 1 item. In that way, you're styling one item and X of them are being styled at the same time. Think of it as symbols in Sketch or components in Figma.
Embed (Extra — Components) — And finally the last bit of the Elements panel — Embedded code. By dragging this element you’ll be greeted with a super simple code editor to insert any kind of custom code you’d like to add if you know how to write code or code you find on the forum for example.
You can try it: When I worked in Webflow we always used this little snippet in our projects to nicely display your fonts in the browser (credit to @callmejohnnie, ref: Usabilitypost.com)
😎 Bravo! You’re almost there, now you know all of the basics and where to find everything needed to actually start!
4. Kick-off Your First Project
Add fonts — In the default state you get access to a few fonts but in general, this is usually the first step of every project. You want to match your brand and be able to use fonts that you spent hours researching. So as you already know head over to the “W” logo — select Project Settings and Fonts. Webflow is pretty cool about this issue. At first, you get access straight from one dropdown to all Google fonts, good start — then if that’s still not enough you can obviously add all your .woff,.ttf or .otf font files and then match them to one typeface and its weights. So they then appear properly in the Designer for you.
Start with Styleguide — This is optional but I find it incredibly helpful. When I’m moving designs from Sketch/Figma to Webflow or at any point when I’m starting a new blank project. I always set up an additional page called Styleguide and set all of the default properties that comes with every project — All of the headings, links, list items etc.. This gives me the little power that whenever I drag some element into the project it will already be in the way I want it to be.
Here is a great example from the Webflow team with a nice explanation around how to style “All H1 Headings” etc.:
And from here it’s on you! 🎉
By now you should be able to start putting stuff together. Our imagination is limitless I’m not able to guide you further since I’m not able to know what are you dreaming of creating! But I have a few more places and tricks to help you way more dive in and explore the common structures and basically browse through or use the projects created by the heroes of the community.
But, if you are still feeling like this is too much? Or want to actually use something pre-build here is where to browse:
5. Smart Resources
Starter Templates — A nice way to start exploring ready-to-use Webflow sites and get into building simple pages. I actually developed these as well, so feel free to reach out, in case you have any questions.😌 On that note, there is a whole Template marketplace with a couple of free templates that you can also grab to explore.
Showcase — To see what is possible with Webflow you can explore what others build. Showcase is a place where other creators can display their work and sometimes some of them make that work available for cloning. In the Webflow language, this means you’re able to download their whole project or parts to your account for free. Just filter by clonable and grab stuff to explore. Press everything it doesn’t matter, you’re not breaking the live site 😉.
Btw: By pressing everything is somehow how I’m still trying to find why something doesn’t work and I worked at Webflow so no worries you got this! 👨💻
And that brings us to another powerful stuff 👇:
UI Kits — Once you browse the Showcase pages for a while you’ll definitely stumble upon a UI Kits. Webflow added the functionality to copy and paste between the projects in late 2018 and quite decent projects were created here by the community members. And since the projects are on Showcase — you know by now that they most likely are free to clone!
A UI Kit, in general, is a package of various sections usually prepared with only a few elements to keep it nice and consistent. They help you quickly without much of a hustle put your ideas out there, create wireframes or even a final website. As seen below:
So let's look at some of the best ones out there:
Legowerk by Dario Stefanutto — An incredible set of over 100 sections to within minutes create incredible already responsive wireframes for your ideas.
Prospero UI Kit by Webflow — First official Webflow UI Kit with over 80 sections to help you create an incredible looking website for your eCommerce or any kind of business — featuring tons of nicely looking Hero sections as well!
Cards 2.0 by Jan Losert — Framework/UI Kit with over 50 Sections/Cards with most of the commonly used layouts both in dark and white colours to truly gives you a set of components to create decent landing pages!
Avocado Webflow UI Kit by Flowbase — Set of nicely looking Content Cards, buttons, button interactions, navbars and site footer — ready to be grabbed at any point into any kind of web design.
There are premium ones as well. These are obviously paid and you can get them via Webflow Template Marketplace — my two favourites are Ollie and Foray (by Medium Rare)
UI Kits are an awesome thing to start with to find your way around all the elements and to play around with something real. Don't forget that you can always only grab one section or even only one button. You don't have to use the whole package. Let's look at the final resources chapter!
6. Courses
Webflow itself provides an incredible list of video tutorials, but there are way more people creating Webflow related content, people recreating famous websites, creating free video courses and tutorials which you can take to learn more! Jumpstart with these places:
One thing I still haven’t mentioned here — The community around Webflow and no-code, in general, is incredible, skilled, kind and always happy to jump in to help you with your ideas so don’t be shy.
7. Additional links
We are almost there. In this final part, we will take a look at where to seek help and how to find a way around the Webflow pricing model for designing and hosting!
Forum — a place to ask questions about any issue you’re having or just browse stuff other people solved before. There are plenty of nice little pieces of advice such as snippets of custom Javascript code to create more advanced things on your website. Webflow community is incredible and there is always somebody who will answer any of your questions.
How much for this? — Free first! — how to learn without paying
2 pages are always free — that’s enough for the homepage and one project template or about page. So explore and create everything you need before being 100% sure you’re ready to make a commitment. You also get free hosting via webflow.io domain so enough to really start and for example convince your client that Webflow is something that you’re going to use from now.
Pricing — Webflow’s most confusing part at the first look — but in general for getting pretty comfortable, creating a few sites or client projects you’re all good with Lite Account Plan ($16/month) and that’s all you need for creating — you’ll be able to create 10 projects which is enough for at least 1–2 years if you’re not a super speedy developer. This will also allow you to export code, which you can then host with your local provider if you want.
Hosting — Hosting with Webflow is simple and it is something I would recommend since from that moment your every change will be live with literally two clicks. You’ll in most of the common cases be fine with Basic ($12/m) or CMS ($16/m) plan — note here: this is per one project. So if you want to run 3 projects you’ll need 3 times hosting plan. Since I know how this might be a bit confusing I know this made it a bit clearer. (Note: Setup guide and how to connect domain)
The End
My final advice to you is as always — Just take on new projects and learn during the process of creating them! That has always been the best way for me to learn new things.
🙌 Thank you for reading all the way here! Let’s stay connected and learn together more by creating amazing designs and websites!
Final note: For more stuff about no-code and more advanced tutorials and webinars definitely explore Makerpad — Community for No-Code makers.
