Step 1

Sign Up For Better Sites
If you haven't already, head over to the sign up page to get your Better Sites account set up. This will give you access to the complete library of Webflow components that you can use on your website. If you don't have a Webflow account yet, you will also need that. Click here to sign up for your Webflow account.

Step 2

Set Up Your Style Guide
If you are starting your Webflow project from scratch, we recommend cloning our Style Guide.

If you're adding to your existing Webflow project, we recommend adding our style guide to your site. Click below to copy all three of the Better Sites Style Guide style guide components. In your Webflow project, create a new page call "Style Guide" and save it as a draft. Before you paste your style guide components onto the page, add a div block and style it as "page-wrapper". Now you can copy your style guide components into your project. Make sure you add all three of the following components under the page-wrapper parent element.

Step 3

Style Your Elements
Once your style guide elements are pasted into your Webflow project, it is time to lay the foundation of your design. Style your elements throughout the Style Guide to match your branding. Some elements probably don’t need to be touched, but at the bare minimum, add your fonts and style your buttons.

On your Style Guide, you'll see the element "Global Styles". We recommend making this a saved Webflow component so you can easily add this element to each of your pages.

Step 4

Find Your Components
Head back over to the Better Sites component library and start finding the perfect components to build your pages. For each of your pages, be sure to add the parent div block element "page-wrapper" then paste each of your components into that element. Your page structure should look something like this image.

Step 5

Update Classes
When you copy a component into Webflow, it’ll automatically duplicate classes. Simply go into each element that you copy and reassign it the correct class. For example, you’ll want to change “margin-bottom 2” to just “margin-bottom” so it follows your style guide.

Need Help?

The Better Sites team is happy to help you get started on the right foot! Feel free to send us a message and a member of our team will be in touch shortly. Or head over to our Slack Channel and ask a question there!