How to Use Webflow

Getting started with Webflow

In this guide, you'll learn how to create a responsive website using Webflow's visual interface, allowing you to design without needing to code. By the end, you'll be able to set up your account, create your first project, and optimise your design for better results.

Step 1: Sign up and set up

1. Go to webflow.com.
2. Click on the Get started for free button on the homepage.
3. Enter your email address and create a password, or sign up using Google.
4. Complete the onboarding questions to help Webflow tailor your experience.
5. Once you're in, click New Project on your dashboard to start a new design.

Step 2: Your first site

1. Choose a template or select Blank Site to start from scratch.
2. In the Designer interface, you'll see a toolbar on the left. Use the + (Add) button to drag and drop elements like headings, text, and images onto your canvas.
3. Click on any element to edit its properties in the right sidebar. Use the Style tab to change fonts, colours, and spacing.
4. To make your site responsive, switch between the device views (desktop, tablet, mobile) at the top of the Designer.
5. Once satisfied, click the Publish button in the upper right corner to make your site live.

Step 3: Get better results

1. Use Classes to apply styles to multiple elements at once. Click on an element, then in the right sidebar, add a new class name in the Selector field.
2. Experiment with interactions by clicking on the Interactions tab (lightning bolt icon) in the right sidebar. Set up animations for elements as they scroll into view or are clicked.
3. Preview your design by clicking the Preview button (eye icon) at the top of the screen to see how it looks in action.

Pro tip

Create reusable components by using Symbols. Select an element or a group of elements, right-click, and choose Create Symbol. This saves time when you need to use the same design multiple times.

Common mistake to avoid

Avoid ignoring the Style Manager (paintbrush icon) on the left toolbar. This is where you can see all your classes and styles. Not using it can lead to inconsistent designs and confusion over which styles are being applied.