Webflow how to 4x your development time in 6 steps!

4 Minute Read
August 16, 2021

Webflow Development

Webflow is an amazing product that has helped me cut my development time down. What used to take my 4 weeks now only takes me one week! This is to build a fully functioning, mobile optimised and CMS website!

Webflow can seem daunting when starting out, there are some common pitfalls that will slow you down!

Here are 6 things to do that have that have helped me increase my speed 4x!

Style guide

The first thing to create in Webflow is your style guide. This was one that I learnt from Ran Segall at Flux. At the start of your project create a hidden page, that contain all your styling for fonts, paragraphs and normal elements you will use you, e.g. a div container, 2 columns layout, 3 columns etc...

This will save you so much time in the long run trust me!

![Webflow Style Guide](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de2d52e51427d5cd00178_Webflow Style Guide.png)

Webflow StyleGuide

Use classes correctly

I have to admit when I first used Webflow I would style each class randomly or even worse sometimes not even name classes, just let it auto style them and end up with 'div-45' it was a disaster!

A great benefit of Webflow is being able to reuse classes! Use this to your advantage! Style once correctly and reuse over and over again!

![Webflow casses](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de3448493272dba6b9a86_Webflow classes.png)

Webflow Classes

Symbols - build once correctly

Now you have styled your classes correctly on your first page. Normally your homepage will be the biggest and a lot of the elements on this page will be reused across the rest of the site. Take the time to make sure it's mobile optimised and set up correctly.

Once you have made these sections e.g. CTA sections, footers, navbar. Turn these into symbols!

Take advantage of global styling. Create all of your h1-h6, paragraphs and as many things as possibly in global styling, so it automatically sets it as that when you place them onto pages

Now you have made these symbols you can easily drag and drop these onto other pages and save yourself a lot of time building out.

![Webflow Symbols](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de3cbdab9c03091390a00_Webflow Symbols.png)

Webflow Symbols

Master the flexbox!

With flex box its possible to achieve nearly any sort of custom layout within Webflow! I know that sounds crazy but its true! Before Webflow having to master these layouts would be extremely difficult. Webflow makes this processes much more simple with making it visual! Mastery over flexbox is a great skill to have! And will help you

Walk through this guide, FLEXBOX CHALLANGE it will explain all of the functions of Flexbox. And challenge you in an interactive test so you actually understand how it works!

![Webflow flexbox](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de415b39eed4d9569a55d_WEbflow flexbox.png)

Webflow FlexBox

![Webflow Flexbox game](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de44f38a2bf87b58ea46d_WEbflow flexbox 2.png)

Webflow FlexBox example

Plan your CMS and use it!

Webflow has a powerful CMS. You can create dynamic custom content, typical use case scenario's would be for making a blog, teams page a portfolio but really the sky's the limit! With it being customisable you can create some really interesting things!

Something I have learnt is make sure you map this out before building out the CMS! Think about the fields you will need and how they will connect to the pages.

Think of collection pages as template pages you can reuse.

![Webflow CMS](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/611de41dc6e3a4672ac0a274_Webflow CMS.png)

Webflow CMS

Learn from others

A great way to speed up and improve your layout building is to learn from the master!

With Webflow showcase and Webflow templates you have the ability to view a lot of these designers projects in the Webflow dashboard! I'm not at all saying copy or steal there designs! But have a look around, see how they have things laid out.

Do they style there classes differently? Do they use padding in an interesting way? Why have they styled it like this?

Webflow Showcase & Examples


Webflow has drastically improved my development time for website builds. I hope these tips can help you increase your turn around time too!