No matter if you have been working with Webflow for quite a while or if you are just starting out, it's super important to stay organised when building websites with the tool. In this blog post I want to tell you about my top 3 tips on how to set up your Webflow projects better and more efficiently. After all, there are certain tasks you do every time when you start a new project in Webflow - so why not save time and get these out of the way once and for all? Let's get into it...
Set up a style sheet
Make sure you create a stylesheet page which specifies all important items on your site, including font sizes, colours or button styles. Make sure that for typography you style "All H1", "All H2" "All Paragraphs" instead of giving these items their own distinctive class. This way you can style elements throughout your project more quickly, as any H1 headline you'll place in your project will automatically have the style you've specified on your stylesheet page. Also don't forget to style Rich Text elements and lists. Need some stylesheet page examples? Check out some of the Webflow templates and look for the "styles" or "stylesheet" page inside the template - to do this you can even just preview the template inside Webflow, so you don't have to make a purchase, just to inspect this page. You only need to create your stylesheet once - from there on you just need to duplicate your project when you start a new client job and make the necessary changes inside the stylesheet that are needed for your new project. Easy.
Save reoccurring elements as symbols
Webflow has the nifty symbols feature (similar to Figma's "components" or Adobe's Libraries) which lets you save elements on your page for re-use elsewhere in your project at a later point in time. So why not create certain layouts you use again and again (like footers, navigation bars or even whole sections) and save them as symbols? With this approach you save time building and re-creating the same thing for every project. And if end up not using a particular symbol in your new project, you can simply delete it if you like. Save all the symbols you commonly need in a new project which you can then duplicate and base your new client project on.
Set up a common page structure
Depending on what kind of websites you usually build for your clients, your website will have different pages. For instance a small yoga studio might need a homepage, about page, services page and contact page at the very least, while a medium-sized film studio might also need a projects or portfolio page (driven by Webflow's CMS), as well as a team page with staff bios. To make things easier for yourself, create a new project which includes all the pages you commonly need for your client projects. By doing this you don't have to set these up time and time again but can simply duplicate your sample project, when you are starting to work on a new client website.
It can be quite beneficial to combine all three methods and create one Webflow project that incorporates a stylesheet, common elements as symbols, as well as the usual page structure. You could even have several of these "template" projects. For instance one could be for client type A (small, service-based businesses), or client type B (one-page conference or event). It's definitely worth experimenting with these options and see what's best for you and your business. Keep in mind though that you will need at least the Lite Account Plan which allows you to have up to 10 un-hosted projects in your account. Even better, upgrade to the Pro Plan, as it doesn't have a limit on how many un-hosted project you can have - especially if you create several "template" projects for yourself and you are working on various client projects at the same time you don't want to be held back by the limitations of your Account Plan. If you want more info on Webflow's sometimes difficult to grasp Account/Site Plans and pricing, check out some of the following articles I have written previously:
- Webflow for creative & digital agencies: Choosing the right Webflow plan
- 3 reasons to use Webflow's CMS Site Plan for your portfolio or agency website
What do you do to ensure you build Webflow site's more efficiently? Let me know via email.