Getting Started

It's never been easier to build amazing websites than it is with Better Sites. From beginner website developers to seasoned veterans, Better Sites is here to help you build your website with ease. Click below to watch the our the Better Sites introduction video and learn just how easy it is to use the Better Sites library

Step 1

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.

Style Components

Style Classes

Style Content

Style Guide 1

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.