How to Create a Website with Webflow

If you’re a professional web designer or developer, you’ve likely seen Webflow named as one of the top website builders. While it might be one of the newer platforms on the market, it’s earned this spot due to its unique take on the website building process.

• For starters, it’s a hosted website builder like Wix, which means you won’t have to stress much over security, performance, and other technical matters.
• Secondly, it comes with a visual drag-and-drop builder, much like WordPress’s popular page builder plugins. This makes it easy for you and your clients to customize content.
• Lastly, the Webflow editor is similar to web design tools like Photoshop, Sketch, and Figma. This gives you complete control over every aspect of your designs.

With its design-first focus, Webflow has caught the attention of many web designers and developers. If you’re one of them, then here’s what you need to know about building a website with Webflow:

10 Steps to Create a Website with Webflow

Webflow is marketed as a website builder you can use to quickly create a website and without any code. While that’s true, Webflow is valuable because it gives users the ability to customize every single detail and to use HTML and CSS to perfect it. 

Regardless of how much customization you decide to do with your website, the process you’ll follow to design a website with Webflow will be more or less the same:

Step 1: Sign Up for an Account

Go to the Webflow website and click the Get started button to create a new account. You’ll be asked to sign up using a business email address or via your Google account. 

After you create your login credentials, Webflow will ask you a series of questions:

• How should we greet you?
• What best describes your role? 
• Who will you be building websites for?
• How comfortable are you with HTML and CSS? 
• What do you want to build today? 

The form will take about 30 seconds to fill out. When you’re done, you’ll be placed inside the Webflow editor. 

Step 2: Complete the Webflow Walkthrough

If this is your first time using Webflow, don’t skip the walkthrough that launches after signup.

It’s going to take a few minutes to run through the whole thing, but it’ll give you a good overview of how the editor works, where its key features are, and will also give you hands-on experience making changes in the editor.

There are three sections to complete. 

Section 1 is all about creating layouts and adding custom elements to them. You’ll be asked to do things like:

• Drag a new Container into the canvas.
• Change the container height.
• Add a Heading element into the container.
• Add a Button element into the container
• Change the alignment of the elements.

Section 2 is all about styling the elements on your pages. You’ll be asked to do things like: 

• Edit the pixel size of the Heading element.
• Alter the Class of the Primary Button.
• Apply a preset Class to UI elements.

Section 3 is all about creating a responsive design with Webflow. You’ll be asked to do things like:

• Make edits in the Desktop breakpoint.
• Customize font sizes at smaller breakpoints.
• Use Preview mode to view your changes.
• Publish updates to your site.

When you finish the walkthrough, it will invite you to create a new project. It’s okay if you haven’t gotten the full hang of the editor. You’ll have plenty of time to play around with it once you’ve chosen a template.

Step 3: Choose a Webflow Template

Webflow has its own website template marketplace with over 1,000 designs to choose from.

The marketplace isn’t super-easy to search through, so what I’d recommend is first deciding if you want to use a free template, premium template, starter template, or a blank canvas. 

Starter templates are more like wireframes than pre-built websites. And the blank canvas option is exactly what it sounds like. If you want to design a website from-scratch, that’s the option to choose.

Once you’ve decided what you want to start with, find the corresponding collection in the marketplace and then click View All. This will show you all the available options. Use the filters on the left to narrow the list down by style, language, or features. Or use the search bar at the top to find something specific. 

Preview the template you’re interested in and then install it. Webflow will prompt you to give it a name:

You can change this later from your website settings, so don’t stress over picking the right one at this stage.

Step 4: Add/Remove Pages

Before you start customizing your new website (which Webflow refers to as a “Project”), get acquainted with the editor. If you’re used to other website builders or have never used any design software before, this one may seem a bit foreign and overwhelming. 

To start, click through the tabs on the left sidebar. There you’ll find the tools to control: 

• Elements and Layouts (i.e. your UI widgets and sections)
• Symbols which are reusable components
• Navigator to see the structure of your page and quickly go to different areas of it
• Pages
• CMS Collections where you create and manage blog posts and ecommerce product pages
• eCommerce
• Assets (i.e. the media folder)

Before you edit any of your content, focus on your Pages:

Each template will be different in terms of which pages you get. However, this particular Starter template gave me the following pages:

• Home
• About
• Contact
• Team
• Projects
• Work (with 3 sub-pages)
• Blog
• Styleguide
• A blog posts template
• Password page so users can request access to password-protected content
• 404 error page

There are a few things you should do while you’re here. 

First, delete any of the pages you won’t need. To do this, hover over the page name and click the gear widget to open the Settings panel. Then click the trash can icon that appears next to the Close button at the top:

Next, update the settings for the pages you plan on keeping on your site. Save the SEO Settings sections for later. Just update the page name, slug, and folder. 

Lastly, if there are additional pages to create, you can take one of two actions. You can click the Create New Page icon in the top-right corner of the Pages panel to build a custom page. If there’s an existing page layout you want to repurpose for your new page, open the page’s settings and click the duplicate icon next to the trash can at the top. 

Step 5: Customize the Content

To edit existing content, either use the Navigator to select different parts of the page or click on them in the visual canvas. Then use the editing controls on the right to make your customizations:

The first tab contains Style settings for the component you’ve selected. From here, you can modify fonts, colors, sizes, positioning, borders, and more.

The second tab contains the general Settings for the container or element. You might not have much need for this section. It depends on what the element is. For instance, you’ll use Settings to add button links as well as alt text to images. 

The third tab is the Style Manager. This tab is useful for web developers who want to see which styles have been applied to the content on the page. You’ll be able to quickly extract the specifications from here.

The fourth tab is where you go to create Interactions. We’ll deal with this in the next step. 

For now, focus on updating the content on each of your pages. That includes:

• Editing existing content.
• Adding new containers or premade sections.
• Adding custom elements to existing or new sections.
• Removing any of the existing components you don’t need.

When you finish the Home page, move onto the next critical page and so on.

Step 6: Make Your Content Dynamic

Webflow templates are going to do a fantastic job of providing you with the pages and content you need. However, it’s going to be up to you to bring those static designs to life. 

There are a number of ways to do this.

The first is by adding links to button elements. To do this, select the button in the canvas. Then click on the Settings tab to add a link. It can be a:

• Custom external link
• Internal page link
• Link to a page section
• Email link
• Click-to-call link

You can also apply transformational effects to different elements.

To find these settings, click on the Style tab. Then scroll down to Effects. From here you can change the appearance of various elements — blend them with the background, apply 2D or 3D transformations, add filters, and so on.

If you want elements to change based on user interactions or the page to animate as the page loads, then use the Interactions tab:

You can configure basic state changes from this tab. You can also make them more complex based on timing or user behavior. 

Step 7: Set Up the Header

What’s nice about Webflow is that, unlike some other website builders, you don’t have to use a separate tool to customize the header. You can do it from any page you’re working on. 

The main drawback is that the header isn’t automatically generated for you. That means you’ll need to build the header structure, create your own navigation, and add other critical header elements to it (like the search bar, shopping cart icon, etc.). 

That said, editing these components is the same as editing anything else in Webflow. Double-click on the header and then make your edits to the logo, navigation page links, and call-to-action button.

If anything is missing or you want to reconfigure the structure, use the Elements menu on the left to add what’s needed. 

Webflow will automatically make your header responsive so that the navigation links and CTA go under a hamburger menu icon. However, you’ll be responsible for making sure that anything you add or change remains responsive. 

Step 8: Configure Page SEO Settings

Next up is search engine optimization. There are a few areas inside of Webflow to pay attention to. 

Within the editor, go back to your Pages and click the gear icon next to each to open the Settings. There is a section below the main settings called SEO Settings:

Here is where you’ll create custom search metadata:

• Title Tag
• Meta Description
• Open Graph (which is the title, description, and image that appears when the page is shared on social media)

Webflow will show you a preview of how your page’s data appears in regular search results as well as social media posts. Use these references to perfect your title and description before moving onto your other pages.

Next, look towards the bottom of the left sidebar and you’ll find a grey square with a red square inside of it. This is a tool called Audits:

Audits analyzes the selected page for missed opportunities to improve how your website performs — for users as well as in search results. When you have time, follow the recommendations listed out on this page.

To access the last SEO tool in Webflow, click on the Webflow icon in the top-left corner of the editor and go to Project Settings. Then open up the SEO tab:

From here, you can create a Sitemap that you can then upload to Google Search Console and other search engines. While indexing bots will inevitably find and rank your content, submitting a sitemap ensures that they find all of your content and quickly too.

You can also add your Google Site Verification. This makes it so that Google Analytics (and Google Search Console) have a direct connection to your site and can pull in data from it. Since Webflow doesn’t have its own website analytics tool, you’ll be relying on Google to provide it.

Step 9: Configure Your Site Settings

Move over to the General settings tab. This page gives you a chance to provide a bit more detail about your website. 

You’ll be able to add the following: 

• Site name
• Subdomain name 
• Favicon
• Primary language and time zone

There are a few other things you can do in this tab. 

For starters, you can make your site password-protected, which will be useful if it’s currently under development. 

Secondly, you can convert it into a template, which is helpful if you design similar websites for other clients and want a custom template to use as a jumping off point.

Lastly, you can remove the “Made with Webflow” branding here. However, in order to do that, you’ll need an upgrade—at least the Basic plan.

Step 10: Connect the Domain and Publish Your Site

You have two options at this stage:

1. Click the blue Publish button and your website will go live on your Webflow subdomain.
2. Go to the Plans & Billing tab, purchase a plan, and connect your domain to go live.

The first option is straightforward. 

The second option requires you to buy a domain first. You can do this from a company like Domain.com or GoDaddy. 

Then go back to Webflow’s Settings dashboard. Go to Plans & Billing, find the right paid plan for your needs, and purchase it.

Lastly, go to the Publishing tab and follow the instructions to attach your custom domain name to your website. 

Before you wrap up, scroll to the bottom of this page and enable the security and performance optimizations. These will ensure that your site is safe (via an SSL certificate) and is optimized for speed.

When you’re finished, click the blue Publish button in the top-right corner to make your website live.

Conclusion

Webflow has one of the more involved website creation processes among content management systems, even if you do the bare minimum. But that’s the tradeoff you make when you choose a website builder like Webflow. 

Cheaper platforms have a tendency to cut corners when it comes to features as well as editing capabilities. That’s not going to happen with Webflow. You’ll be able to create a dynamic website that is pixel-perfect and performs well. 

Take Our “Webflow for Beginners” Course

And don’t forget to subscribe to the Tuts+ YouTube channel for free video tutorials and courses every day!