How To Use the Webflow Website Builder

To get started, visit webflow.com and click on the “Get started — it’s free” button.

You can sign in with a Google account or an email address, and then you’ll need to create a password with a minimum of 10 characters. Finally, click on the “Create Account” button.

The Webflow website builder’s editing dashboard makes it easy to add elements to your business website — from columns and buttons to images, videos, and more.

For all of the actions listed in this guide, you’ll first need to log into your Webflow account and click on the project — your website’s name — in your “Dashboard.”

To access a project (your website):

1. Visit webflow.com.
2. Log in to your Webflow account.
3. Go to your “Dashboard.”
4. Click on the project you want to edit.

This’ll open the “Webflow Designer” screen where you can make changes and add elements to your website.

In the Webflow website builder, a “Section” represents a layout element that stretches across your browser window. 

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear. 

2. Under the “Layout” section, click on the “Section” box.
3. Drag that “Section” box over to your web page and drop it in your preferred location.
4. After you place your new section, click on it and use the right-hand menu that’ll then open to change its size and content. You can type in text or drag and drop media into that section.

The Webflow website builder also lets you create side-by-side columns of content on your website similar to the columns in newspapers.

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Layout” section, click on the “Columns” box.
3. Drag that “Columns” box over to your web page and drop it wherever you want columns to appear. 

4. Two columns will then appear in that area. To adjust the number and layout of the columns, click on them and then click on the “Gear” icon that’ll appear above them. This’ll open a “Columns Settings” menu underneath your new columns.
5. Use the “Columns Settings” menu to pick your preferred number of columns and/or layout.
6. Click on each column and use the right-hand menu that’ll open to change its content. You can type text into each column or drag and drop media there.

Buttons are visual blocks that site visitors may click on to go to another website or another page or section within your own website. You also can use them to enable visitors to send an email or make a phone call. While buttons work similarly to “Link Blocks,” they usually have just a small amount of text with no other content elements.

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Basic” section, click on the “Button” box.
3. Drag the new button over to your web page and drop it in your preferred location.
4. Type the text you want to appear directly into the button.
5. To add the link, click on the new button and then click on the “Gear” icon that appears in the upper-right corner of the button. 
6. To send visitors to another website, click on the “Chain” icon at the top of the “Link Settings” menu on the right and paste the destination web address into the “URL” field. If you want the website to open in a separate tab, check the box next to “Open in new tab.”
7. To send visitors to another page within your website, click on the “Page” icon at the top of the “Link Settings” menu. This’ll open a drop-down menu where you can enter the page to which you want it to send visitors. If you want that web page to open in a separate tab, check the box next to “Open in new tab.” 

8. To enable visitors to send an email, click on the “Envelope” icon at the top of the “Link Settings” menu. Enter the email address you want them to contact in the “Email” field. 
9. To enable visitors to make a phone call, click on the “Phone” icon at the top of the “Link Settings” menu. Enter the phone number you want users to contact in the “Phone” field.

Headings act as the titles of individual pages on your website. Search engines use headings to determine your site’s most important content themes and topics. Headings also can help visitors quickly find the information they seek on your site.

To create a heading:

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Typography” section, click on the “Heading” box.
3. Drag the new heading over to your web page and drop it in your preferred location.
4. Type the text you want to appear directly into the heading.
5. To choose the heading type (e.g., “H1” through “H6”), click on the new “Heading” box and then click on the “Gear” icon that appears in its upper-right corner. 

6. You can change a heading’s font, size, color, and background under the “Paintbrush” tab in the right-hand menu.

Adding photos and videos to your business website can help make your brand stand out while also giving visitors a clear idea of what they can expect from your products or services.

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Media” section, click on the “Image” box. 

3. Drag the new image over to your web page and drop it in your preferred location.
4. Click on the image, and then click on the “Gear” icon that’ll appear above the image box.
5. Browse to select or upload the image you want to add into this section. Click “Save” when you’re done.
6. If you want to add a video instead, the process is the same. Simply select “Video” instead of “Image” when prompted.

In today’s marketing environment, businesses need a strong social media presence to engage potential and existing customers. That makes it important to link your website to your business’s social media accounts. 

The Webflow website builder allows you to add buttons to your site that’ll connect visitors to your Facebook and Twitter accounts.

With the Webflow website builder, you can add a Facebook button to your site that allows visitors to “like” and share your Facebook page.

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Components” section, click on the “Facebook” box.
3. The new Facebook button will then appear at the bottom of your website in the footer area.
4. Enter your Facebook URL in the “Facebook Settings” menu that’ll appear above the Facebook button.

Adding a Twitter button to your website will enable visitors to either follow your Twitter account or tweet a link to your website.

1. Click on the plus sign (“+”) icon at the top of the left-hand toolbar. The “Add” menu will then appear.
2. Under the “Components” section, click on the “Twitter” box.
3. The new Twitter button will then appear at the bottom of your website in the footer area.
4. Click on the new Twitter button to open the “Twitter Settings” menu. From there, you can choose to allow your visitors to either follow your Twitter account or tweet a link to your website. 

The Webflow website builder also makes it easy to add new pages to your website.

1. Click on the “Page” icon — fourth from the top — in the left-hand toolbar. The “Pages” menu will then appear. 

2. Click on the “Create New Page” icon in the upper-right corner of the “Pages” menu. This’ll open a “Page Settings” menu to the right of the “Pages” menu. 
3. Enter the name you want to use for the page in the “Page Name” field at the top.
4. Choose your preferred search engine optimization (SEO) settings in the “SEO Settings” section.
5. Enter your “Title Tag” and “Meta Description.”
6. Choose your “Open Graph Settings.”
7. Choose your “Site Search Settings.”
8. When you’re done, click on the “Save” button in the upper-right corner of the “Page Settings” menu.

The Webflow website builder allows you to edit your site to ensure it appears and functions correctly on several different types of devices. You can do this by viewing your website in four different modes: desktop, tablet, portrait mobile mode, and landscape mobile mode.

To access each of these modes, simply click on the icons located at the top of the main Webflow dashboard near the center of your screen.

The Webflow website builder offers an impressive number of options to help you customize your site to suit your specific business needs. While this guide covered how to incorporate the most commonly used elements into your website, you can find a step-by-step Webflow tutorial in our How To Make a Webflow Website article.

Webflow Website Builder Review

Webflow Website Examples

Webflow Pricing & Plans