Webflow is becoming widely available. It takes over the design/development style industry and is #1 in the codeless tools market and changing the lives of many stylists and developers out there. But what's still a little less unique and harder about Webflow is that you need to know at least a little bit about how websites work to get into it. (Damn, learning curve!) In this article, I'm going to share with you all the important parts of Webflow that I've learned and incorporated into my day-to-day work.
But don't worry, this guide isn't technically technical – I didn't write a single line of code myself, so consider this the perfect checklist for a non-technical person! So let's see what we'll all cover:
.jpg)
Why should you care about Webflow?
Think of it this way – If you are a designer, Webflow is a step up in your career. You will be able to take what you design and turn it into reality. Not with prototypes but actually live. And it's really simple. Of course, you will need to learn a few things but in general, this is the future. From ideas - research - design - of customers into actual working projects. All done by you – the designer.
Here's how using Webflow transforms your design style workflow:
So today let's all take a look at where to start with your learning process and learn and discover how Webflow can completely revamp your knowledge and skill set.
Where it all started
Webflow University – This may seem obvious, but Webflow university is something other than standard product instructional videos, which is why I included this in your itinerary. This is one place where I fell in love with this product. The tutorials are always on point, under 5 minutes and super funny, hilarious, funny even if it's technically coding. And the educational materials are expertly created around every part of the app.
Note: Personally, I've learned a whole lot from these videos – which I think is a pretty good confirmation and that's why I think it has to be at the forefront here.
Box Model - The Only Technology Thing You Need To Know
Box Model – This CSS rule is one of the little challenges you'll encounter when you're getting started. In general, we are talking about understanding how web pages work – given that each block consists of a few properties so that it is placed on the web page. Webflow design is all about stacking boxes on top of each other. What is the key difference between Sketch / Figma / XDand Webflow. In the graphics editor we are used to building in space/canvas and placing elements wherever we want compared to in Webflow you are stacking blocks on top of each other.
The Designer - Discover The Main Interface
01 – Navigator, 02 03 – Pages & Pages and SEO Settings, 04 – Content Manager, 05 – Style Panels (Full right sidebar), 06 – Element Settings, 07 – Interactivity, 08 – Device Test Breakpoints, 09 – CMS / Collections, 10 11 – Settings & Project Editor (Separate Pages) So here it is, this is the look we will create overall design styles. Yes, It looks a bit like a Photoshop interface. Obviously, there's a LOT going on so let's all take a look at the parts that matter most to you.
01 – Navigator – This is the structure of each page displayed as an overview of all elements such as divs, images, or blocks of text. You can think of it like layers in Sketch or Figma.
Navigation Panel – Table showing the entire page hierarchy
02 – Pages – Here you will find an overview of all your pages and their details in the project the option to copy or add new pages and folders to keep the structure of your work intact. Note here: folders are great for the organization but they will add "folder name / to your URL, so think about this while planning your project.
Site overview – Where to add new pages or add folders to give your project a better structure
03 —Page & SEO Settings – When the Pages panel opens, hover over a given page and click the settings icon to add different SEO and OG tags. This is also the place to add your custom code, duplicate pages or remove them. Hover over a page in the Pages panel, click settings to open a second panel
04 — Assets Manager – This is where you can see all the assets used in your project. With a little trick (see below) it works like FTP for example. upload your OG image. The content panel, one place to manage all your icons and images How to get a link to a specific asset (settings icon – click the export icon or right-click to copy URL )
05 – Style panel – The main panel for working with your elements in the project. Add margin, color or text size and place it in the right place in your design. In the tweak panel and style controls in the vanguard, you will also find a field for the Selector to create your component CSS class/class. As a result, you will be able to completely style multiple components at once. And the little arrows are for styling states of your component like what happens on hover, Styling Panel – Entire first tab in the right sidebar – Where to style your elements
06 – Element Settings – Second tab in the right panel, all the settings of ONE specific element. Settings like where a particular button should link to, how a certain collection will filter results, and more. – The important thing to remember here is: that this panel is tied to only one item, unlike the style and layers palette. Element settings – in this case, you can see a setting for a particular button that will take the user to a page in our project called Internship
07 – Interaction – Webflow Advanced but often described as the most important Webflow magic. One place to set up all the cool animations and transitions for your project. But we'll leave this up for now. You won't need it for your first projects.
08 – Breakpoints – 4 major breakpoints and a new control panel with current resolution. Here are 4 tabs to review how your website looks on different devices. Something that I personally want to kill in Sketch. This is where I see Webflow's greatest strength. Remember the long hours creating every Tablet and Mobile web design in Sketch or Figma. Just move the text around and create these looking noodle designs. Just let your developer know how to minify it. With Webflow, I usually get the entire site responsive within 30 minutes to 3 hours for complex sites.
Breakpoints – Desktop, Tablet, Mobile Landscape, Mobile Portrait Device Check (Size) – One last thing – you see the right drag? It's up to you to test different devices and make sure your site looks great on all of them. Always test your website on all views, to avoid some surprises on different devices. And that's the sum total of the main things.
Here I list a few areas for you to know about the future. You will need these when you feel free with the above list.
09 – CMS – Something a bit premium but a super powerful feature, that will save you a lot of time so I think you should know about it. Think about the times Invision Craft came to the game but this time it had too many steroids. Webflow CMS is part of a project that you can use to populate an element called a Collections list. Collections are what you put your content in so it's handled by your CMS, and that's where your entire Webflow game comes into play!
10 – Project Settings – Not yet part of the Designer interface but it is home to all the extra settings and things like favorite icons, custom font settings, storage settings, and more.
11 – Editor – And the last part of the whole Webflow Suite is the Editor, it is the behind-the-scenes for / your website editors. Remember those times you got an email from your client/writer that there were 15 typos in the design or live website and screenshots of what needed fixing? Well, it's over now. With editor access, anyone can access and edit content at any time. It sounds scary, I know. But don't worry. Your editor only has surface access – the editor cannot add elements, only edit the content in them. With editor access, you can also invite people to contribute articles for your company website or any other content.
12 – Top action – Undo and redo, state if your project is saved to Webflow server, 3rd part is one of the most important parts if you want to export your code for use on the machine his owner. The 4th icon is for sharing your project through the Designer (for support or any form of help) and the 5th icon is where you will publish your site! Undo redo | Cloud Status | Export code | Read-only link | Publish your project! And that's the overall look. Next, we'll include a whole bunch of elements like divs or link blocks to consider to really get started!
You can totally notice that we haven't covered the " " icon in the left sidebar! So do it now – Elements Panel!
INGREDIENTS TABLE – OVERVIEW OF THE MOST IMPORTANT FACTORS AND SMALL HICKS !
The first time you launch Webflow, you'll find many different elements, the full start can be a bit overwhelming. Some of them come with predefined attributes for ease of learning, and a few are tied to specific use cases. So let's all take a look at the most used ones together, to help you navigate through them and really touch on the basics so you can fully tinker with the rest later in the game procedure.
Block Div (Basic) – The main building element for every project. In general, a Div block is a folder (wrapper) that you will use to group and position your elements. Divs with the Flex attribute will quickly become your best friend. The most common layout structure would look like this.
The section is for external padding when you scale down the web page, Content for 100% width and Max. width of your design size (usually 1040, 1100, 1140 or 960px) and then put everything inside! 📦 Note: You may notice elements like Sections, Containers, or Columns, which are great to start with. And feel free to use them – but in my eyes they're basically just divs with predefined properties that you can't change. The start may be good, but in the long run, it may not be the best decision. Using the Container element, you are also bound to have all your designs designed to be 940px wide.
Grid – Div Blocks, Flex and Grid – The final combination and in my opinion are the most important elements/attributes of the building. Grid is a super powerful element that you should add to your skill set. The grid is like an invisible grid that protects your content on the page and around different views.
Link block (Basic) – This block does exactly what it says 😎 link everything inside it with URL, page in a project, email, phone or by clicking you will download the attachment. Link blocks are great for buttons or for linking entire blocks of content. Similar to what is shown in the picture. Typography – Headings, Paragraphs, Text Blocks, Text Links all these are other major building part of every project, they do exactly what they stand for. The important thing to focus on here is the Rich Text Element. This is a bit of an advanced element but it will be extremely useful when you are building a blog or any kind of dynamic page with content populated in the CMS.
Forms – The main elements from the Forms folder and the only element that is really needed. The rest of the folder can only be added to the Form Block. So always start with dragging the Form Block and if you need more elements, you know where to find them! Webflow in the Basic Hosting Plan or the CMS Hosting Plan offers 500 or 1000/monthly form submissions that you will have in your Real Estate Project Settings and can be conveniently exported as. CSV. You can also link your forms to a service like Mailchimp to accumulate your newsletter subscriptions without any extra spin.
Navbar (Component) – Another part of every regular Webflow project. Fully equipped with all necessary properties. For the first few months, I didn't even know this element existed. So making everything custom is a nightmare. Navbar comes with 3 navigation links in the Nav Menu, which is a folder that you then use on smaller devices to slide down when clicking the menu icon. The menu icon (shown by default on Tablets and below) is also fully customizable, which is a challenge for most people – the trick here is: just select the icon and hit delete, then put your particularly important menu icon in the Menu Button wrapper. Since Navbar comes with so many predefined properties.
Tab (Components) – Great for things like pricing for monthly or annual payments or a visibility overview of various features.
Lightbox (Components) – To handle displaying a full-size preview of your portfolio images or details of your e-commerce products.
Slider (Component) – And the good old slider. A component can slide from an image to any kind of div structure to accommodate things like customer testimonials
Collection Lists (More – CMS) – Collections are a way to drag your CMS content to your website. It's a set of 3 wrappers, each on a separate level. At first, you always need to choose which CMS collection you want to connect to so that you can start working on an item of it. That way you are styling one item and X of them are being styled at the same time. Think of it like symbols in Sketch or elements in Figma.
Embed (Add – Component) – And finally the last bit of the Components table – Embed Code. By dragging this element you will be greeted with a super simple code editor to insert any kind of custom code you want to add if you know how to code or the code you found on forums for example.
Conclusion:
I frequently refer to Webflow as an alternative technique of coding at the end of the post. Therefore, I believe the correct response to the age-old question of "should designers code?" is "yes, but designers should code aesthetically."
The fundamental premise of Webflow is that while designers are accustomed to learning sophisticated visual tools for their work, none of them have been production-oriented in the context of online design. By taking front-end development and making it visible, Webflow closes this gap. Thus, even though Webflow designers don't write code, they nevertheless use the same mental model when considering how to build for the web, interacting directly with the platform they are designing for.
See you in the next post^^
.jpg)