Yo! This article will show you how to create a website using Webflow in three different ways, from beginner to expert. You can build a website quickly if you look at the “easy” part.

In the article and video, I also explain how to do something more custom or advanced. In the end, I’ll also show you how to save multiple parts using Webflow’s cloneable components for your next project. You don’t even need to purchase a subscription!

The video is more entertaining, convenient and faster, but you can also follow the steps below if that’s what you prefer.

The Purpose of HTML0 

It can be difficult to build a website, and can take quite a bit of time if you have little experience. It’s exactly what I thought when I created mine.

There are now multiple options for you to choose from. Today, I’ll show you three different ways to create your website using the best Website Builder on the market.

Let’s begin with a beginner.

Beginner Mode: 

If you want to start quickly, and with as few unplanned obstacles as possible, a template will be the best way to do so. This will save you time and prevent you from having to get too involved in the technical aspects.

Step 1: sign up for Webflow and create a new project: https://webflow.grsm.io/ilona

Choose a template in the marketplace. I have a little secret for you: some of the parts on my website are also from a free template.

Choose from CMS, Ecommerce and Portfolio.

You can preview the template in Designer or Browser mode before you decide on a design. It is especially useful when I want to see how my site will look on mobile devices.

Add your content to your template. Subscribe to a plan for your site and click publish. Congratulations, your website is now live!

Intermediate Mode: 

Let’s move on to the intermediate mode. It’s worth using the Figma to Webflow plugin if you’ve used Figma.

Step 1: Design your website first in Figma.

Step 2: sign up for Webflow and create a new project: https://webflow.grsm.io/ilona

Run a plugin named Figma to web flow.

It is important to arrange your Figma designs so that the plugin can easily understand them and paste them onto the Webflow project. All your customized elements will need to be converted from groups into frames. Frames should be auto layout.

Name your elements and styles correctly as they will appear in the Webflow project.

You can use the pre-built plugin components, and then design them as you wish. You can ensure that your designs will work properly when you paste them into a Webflow project.

You’ll be able to see the element appear in the project by copying and pasting it into Webflow. Boom. Cool, isn’t it?

Advanced Mode: 

You can learn the most about Webflow by building your website.

Sign up for Webflow and create a new project by starting from a blank canvas: https://webflow.grsm.io/ilona

You can design your website in Figma and then manually build it on Webflow if you are familiar with the software. Some may be irritated if they can’t easily replicate the elements designed. This was the case for me, so I experimented directly with Webflow.

You can use your expertise to build websites for other people.

Bonus Tips 

Here are the bonus tips I promised you at the end of this video:

I use their Libraries when building websites on Webflow. They are currently free, and they can speed up your building process. The borrowed elements can be easily changed to suit your needs.

Sign up for Relume if you do not want to pay a Webflow subscription, but still want to collect multiple sections using different clonable templates.

You can store sections and elements in libraries and reuse them for your projects. Copy the section from your favorite template, paste it and save it on Relume.

You can now copy and reuse the elements of another template without having to purchase a subscription.

That’s it! Congratulations! You have made it to this point.

We hope you found the information helpful and we will see you again next time.