7-Steps Webflow Tutorial for Beginners

Webflow is on the rise and has become one of the most popular website editors on the market, sharing many advantages as Wix and in some areas, one might even say Webflow surpasses it.

Webflow offers customization beyond any other competitor and allows its users to create wonderful websites with complete freedom. Thanks to its easy-to-use interface and integration of more advanced features (which we will get into later), Webflow allows both veteran and novice website builders to do web development with no difficulty at all. Webflow offers more experienced website builders an extra layer of customization by allowing them to dive right into the website's code and create fluid animations. Webflow's content management system is also extremely powerful, allowing users to update website contents easily.

Webflow is also the go-to choice for our team at Media Studio Hong Kong to create effective landing pages and beautiful web design.

Today, we are here to guide you through the makings of a Webflow site. In this Webflow tutorial, we will show you how to build your very own custom website on Webflow using 7 simple steps.

Step 1: Sign up on Webflow

By following this link here, you will find yourself at Webflow’s website. To make a website on Webflow, you will first have to make your account. Press the button shown in this picture to create your account (users can choose to sign up with their email account, or connect with their Google account).

Step 2: Understanding the Box Model

We know you would love to get started with Webflow as soon as possible, but before you do, there is a concept that you first have to understand: The Box Model.

Image from Timothy Ricks's YouTube

The layout of all websites is made of boxes inside boxes inside boxes, the boxes have different sizes, spacing, and grids. They help you organize the content (such as images, text, videos, and buttons) of the websites by allowing you to neatly sort the content inside the boxes. For example, inside a blank page one could put a section, inside which you may place a container, then columns and rows inside the containers for different text and images. The size, borders, margins, paddings, and positions of the boxes determine the layout of the website and where all your content goes. For example, to shift a button from the left to the right, one would add more margin to the left side of the button instead of dragging the item to your desired location like one would in Wix or PowerPoint.

Do you understand this concept? If you do, congratulations! You have already learned the hardest part of web design on Webflow.

If you are still confused about this concept, don't worry, you can follow this fantastic Webflow beginner's tutorial by Timothy Ricks to better understand this concept of web design.

Step 3: Starting a new project

Webflow will now take you to a project with a layout for you to start editing. However, we would like to go just a little more in-depth in this tutorial, so we would like to ask you to click on the “Dashboard” button on the top left-hand corner.

You will now be taken to your dashboards, which contain all the projects you have made in Webflow. Right now, you should see only one project, the one that Webflow started for you. By clicking “Showcase”, you can see designs from other web designers and make a copy of them by pressing “Clone”  if you would like.

Now, by clicking “Dashboard” on the top bar, you will be taken back to your dashboard, then, press “New Project” to start a project of your very own.

Once you've clicked “New Project”, you will be taken to a page where you can choose from different templates, upon which you can make edits. Webflow offers more than 500 templates for its users, but not all of them are free. Hover over the template you want and click “Select”, then give your new project a name and click “Create Project”.

Step 4: Understanding the Editor

The editor in Webflow has a three-sided layout.

The bar on the left contains page navigation, content navigation (which allows you to select the exact “boxes” that you want to edit since a complicated site will have many “boxes” and clicking on the exact one you want with a mouse can be hard) and content such as images and videos that you have uploaded, and containers, sections, and boxes that you can use to organize your site.

The bar on top allows you to switch between desktop, tablet, mobile landscape, and mobile portrait mode and allows you to save and publish your site.

The bar on the right allows you to edit the elements on your site, all settings from image size, position, margins, paddings, fonts, and color are found here.

Step 5: Edit text, images, and backgrounds

Now that you have gained an understanding of the layout of Webflow, it is time to start editing! To edit text double click the desired text (or find it using the navigation menu on the left) and type in something new. You can also add new text boxes by dragging and dropping a text box from the “Add” menu into your desired container.

To edit an image, click on your desired image or locate it using the navigation menu. Then, click on the Settings icon on its tag and press “Replace Image”.

To edit a background, click on, or locate your desired container. Then adjust its color or gradient or even fill it with an image using the bar on the right at the backgrounds tab.

Step 6: Editing the mobile version

By now, you should have adjusted your Webflow website to your liking, there is only one last step to go! Since mobile users account for more than 54% of all internet users, having a mobile-friendly website or landing page is absolutely essential for your website’s success! Having a bad website on mobile will deter more than half your visitors.

To edit the mobile version, simply click the mobile icon located on the top bar of the editor. There is a tablet, mobile landscape, and mobile portrait mode.

All settings applied to the main mode will be applied progressively to the left, but not vice versa, which means that all settings in the desktop mode will be applied to every mode on the right, but adjustments made on say, the tablet mode, will not be applied to the desktop mode.

Step 7: Publish your new landing page

To publish your website with a custom domain, you will need to purchase a subscription plan on Webflow. Fortunately, Webflow’s pricing plans are all very affordable. To upgrade your site, click on the “W” icon on the top left corner and select “Project Settings”, then go to the “Hostings” tab to choose a plan.

Webflow continuously autosaves your site, so you never have to worry about losing progress. To see if your changes have been saved, simply look at the green tick on the right of the top bar. To publish your site, simply press “Publish to Selected Domains”.

If you would like to save on costs, the starter plan (which you are currently using) is free and allows users to publish up to 2 projects on a branded domain name which looks like this: projectname.webflow.io and with a branding badge similar to what you would find on a free Wix site, but smaller and at the bottom right-hand corner.

Pro tip: if you are a student or an educator, you are eligible to sign up for a CMS site plan and publish with a custom domain - completely free of charge! Click here to learn more about this plan.

Conclusion

And there you go! That was 7 simple steps on setting up your first Webflow site. Stay tuned to our future blogs to get more free tutorials and web-related tips!

If Webflow turns out to be too complicated, Wix could be a better choice! Be sure to check out our guide on getting started with Wix.

If you need more motivation and reasons to not use WordPress, check out why we opt to use just about anything to avoid using WordPress.

Alaric Yim
Entrepreneur and Web Designer @ TH Business Innovations

Alaric is an aspiring entrepreneur and web designer currently building his career and pursing an postgraduate education. In his spare time, he loves to game, read and do a variety of different passion projects.

Two illustrated person sitting on the ground and brainstorming.
Subscribed yet?

Never miss anything new again

Thank you for subscribing! You'll receive a welcome email.
Error! Please try again.