If you ever wanted to start a website, Webflow is the right solution for you. Building a website with Webflow is simple, affordable, and fast! From publishing a simple blog to promoting your business and even opening an online store, Webflow does it all. And in this article, you will find a complete guide on how to start a website with Webflow and earn passive income the easy way.

If you want to:

• Start a promoting your business online with Webflow
• Start your own blog using Webflow
• Start selling online with Webflow
• Start promoting your products or services online with Webflow

Then this is the article for you.

This post will help you:

• Define the perfect goal for your website
• Boost your brand with your own domain name
• Build your new website with Webflow
• Find the right look for your digital solution
• Publish and manage your 1st website
• Attract traffic
• Find the perfect third-party tools
• Start Making Money from your new website
• Answer FAQs on starting your website on Webflow

Why Build Your New Website With Webflow?

Like most website builders, Webflow brings a simple but professional digital solution of all types of platforms. Be it a promotional website, a blog, or even an online shop, Webflow does it all. And in this article, we will provide a step-by-step guide on just how to start a website with Webflow.

Webflow is a free and popular website builder optimized for inexperienced users who want a beautiful website of their own. But, large corporations like Facebook, Twitter, and CBS also Webflow is a fierce competitor for established web builders like Wix or Weebly and is used by that sets itself apart through a plethora of cool features like:

• Advanced drag-and-drop website editor;
• Hundreds of themes and website templates;
• Best responsiveness adjusting tools on the market;
• Over 200.000 active users registered;
• SEO optimized;
• Free SSL certificate;
• Up to two free, unhosted sites;
• Whitelabel integration from the start;
• Analytic and website reports tools;

Webflow COMPLETE FEATURE AND PLANS LIST

Webflow is one of the fastest-rising website builders on the market today. Its unique advanced website editor somehow manages to keep things simple so both experienced and novice users have an easy time building a website. But, unlike other website builders, Webflow focuses on more than just a simple and affordable solution. They provide a truly professional digital tool, for your website or for your clients.

So, join the over 200.000 entrepreneurs and professionals, and create your own Webflow website following this step-by-step guide.

Ready to join the digital world?

Let’s get started!

How to get started with Webflow – 6 easy steps

Getting started with Webflow is a bit different than other website builders, but yet so simple. And in this guide, we will go through each step and show you how fast you can publish your own website or a website for your clients with Webflow.

So let’s start by creating an account. Registering with Webflow is free, and all you need is a Gmail account or any other valid email account. But, for a truly personalized experience, there are a few extra details that Webflow asks about you as a user. So let’s start with our first step – creating an account.

1. Get started with Webflow

Usually, website builders ask the user for a valid email or simply login with a Facebook or Google account. In fact, this is a common registering technique used by many service providers. By using a third-party API for logging in or registering users, service providers ensure an extra layer of security for their users. Not to mention that it is so much faster. So, naturally, Webflow also uses the Google API for login, but it also allows users to register with their own email.

However, while most website builders stop at that and jump straight into finding out what website you want to build, Webflow needs more. First, establish first-name bases and let Webflow know how it should call you. Then, tell Webflow what is your role – entrepreneur, marketeer, etc.

Now, who are you building the website for? Is it for you or for your business, or is it for a client, of the company you work in? Then, how experienced are you in building websites – is this your very first time, or are you an absolute expert? All these little details will help later on so bare with us.

The final step in the registration process, tell Webflow what type of website you want to build. If you’re not sure, or neither option fits your goal, you can select other. But if you are just testing Webflow, you also have that choice as well.

Publish a test website in under 5 minutes with the Webflow tutorial

Once you have completed the quick questionnaire, as a first-time user, you will be presented with a step-by-step tutorial. This tutorial is mandatory and it shows you the basics of the Webflow website builder, like how you add a heading or a paragraph, how to edit text, and other small things like that.

The tutorial is only going into a few key details, so it’s very limited. It serves more as a presentation of Webflow’s potential rather than helping you build your own website. Nevertheless, it takes only about 5 minutes to complete the tutorial and we found it incredibly useful. Also, once you published your test site, you are ready to actually build your own professional platform.

As soon as the tutorial is completed, you will be redirected onto your dashboard.  Here, you can see your “initial” project, and you can create up to two “unhosted” projects at a time. To start a new project – or website – click on “New Project” and let’s begin.

2. Select your Webflow template

Like many other website builders, Webflow provides a plethora of cool, professional, and responsive templates. If you scroll up and down, you will see that the templates are sorted by category – free template, eCommerce templates, etc. So, take a few minutes and think about what would you like to accomplish with your new website.

1. Do you want to make money online?
2. Do you want to share your experiences of knowledge?
3. Do you want to start a blog for your business or for your clients?
4. Do you simply want a landing page for that professional “digital calling card” you miss?

At the top of the template list, you will see the “starter packs” – a portfolio starter, a business starter, and an eCommerce starter. These templates are recommended for first-time users.

So, based on your website’s goal, pick a template that fits your needs. If you are unsure of what you want your platform to look like, you can also choose “blank site”.

All prebuilt templates come with three options – Learn more, Preview, and Select. So, once you found a template you like, click on learn more or preview so you get a better understanding of what it offers. When you are fully happy with a template, press Select, name your new projects, and start building your new website.

3. Design your new Webflow website

While Webflow might feel like it is more suited for professional website creators, this is far from true. In fact, Webflow has a rather unique way of curating for both experienced and inexperienced users. For example, Wix’s website editor doesn’t constrain the user with grids and boxes. Webflow does.

As a result, Webflow might feel limiting and even boring. But in reality, having boxes and grids is both useful for inexperienced users, as well as professional ones. It ensures your content is perfectly and beautifully aligned, and it saves a lot of time in the long run.

3.1. Add an element with Webflow Website Editor

To add a new element with Webflow’s Website Editor, go to your menu bar on the left of the screen and click on the first button from the top – the plus/add element button. The menu will open up and show all the different elements you can add to your site.

The first elements you will see are the basics – grids, containers, columns etc. Click on one that you want to add ad drag it into our page. You will also notice that Webflow limits you on where your element can go. This is because Webflow uses a directional system so it prevents chaos or misplaced elements. It also maintains standard UI rules that work in your favor, both for UX as well as SEO.

This might feel a bit clanky at first, but the more you work with the editor the more you will appreciate this system. And if you’re not happy with your initial placement, just play around and drag and drop it until you are happy.

Going back to our elements, you will see that Weblow’s list follows a specific hierarchy. Start with sections, grids, and columns. Then move towards lists and buttons, headings and paragraphs, and so on.

3.2. Edit elements

At first, glance, editing elements in the Webflow website builder looks like you’d need a manual and a 3h tutorial just to get your head around it. But in reality, it’s really quite simple. Let’s start with layouts – sections, grids, columns, and containers.

To edit any layout, click on it and turn towards the menu on the right. In the sizing section, you can simply click the different size buttons and see what works for you. Then from the align section, you can move the container around or make it fit the entire section. Finally, you can add different paddings to each section from the spacing settings.

Elements like headings and paragraphs require a bit more. To edit the text within the heading, buttons, paragraphs, and other such elements, double click on them. This includes editing the text itself, the color of the text, basic styling, and linking.

For more in-depth cosmetic settings, go back to the menu on the right, and scroll down to typography. Here you can see the font family used for each element, the text’s weight – referring to bold, narrow or normal text, for example – style, etc.  Play around with different typefaces and styles. But remember that typography determines the tone of your website, and the way users perceive your voice. So, make sure you pick a style that suits your business values.

To remove any element from your Webflow website, simply click on it and then press backspace. And if you made a change you are not happy with, simply go to the menu bar at the top of the page and press Undo.

3.3. Special elements and easy navigation

Special elements, like footers, headers, and navigation menus are separate for the Webflow website builder and can be added from the second button in the left-hand menu – the one that looks like a box.

These three special elements are pre-built, based on each template you choose. However, you can edit them however you like, the same way you would edit any other section. So, double click on each special element, and start adding your own touch to it.

3.4. How to add and manage Page

Once you customized a page, Webflow provides a quick and easy overview of its structure in the navigation tab. When clicking on this button, you see something of a table of contents, containing all the elements of the page. What is even more fun, you can remove an entire section or element directly from here, as well as move them around.

And, if you go to the next panel called pages, you will see an overview of your entire site. From here, you can navigate around your site, add a new page, or even a new folder.

3.5. Managing your Blog content

Having a blog on your platform is one of the best ways for generating traffic, telling your story, and creating a bond with your users. So, no matter what industry you are in, or the goal of your website, a blog is always a good idea.

For this, Webflow provides an inbuilt CMS, where you can easily manage your articles or add new posts. Webflow’s CMS solution comes with basic SEO settings, like slug customization, cover and thumbnail image options, and more. For headers, text linking, and other formatting options, simply highlight a paragraph, line, or word and choose one of the options from the small menu. The options may seem limiting, but they are crucial for typography hierarchy and SEO.

And if you are new to content management, Webflow also offers courses that will turn you from a beginner into a top-notch blogger.

3.6. Adding images

Ok, so now you have the basic structure of your website. Now it’s time you add some color. So, to add an image, select the destination section, then click on the Media button. Select your preferred image from the list provided, then drag-and-drop it into place.

For an even more personalized experience, upload your own images, or logos by clicking on the Upload button. Once you added an image, you have the styling option in the menu on the right, where you adjust or fit the image as you please.

To change an image used for regular elements, double click on the section, and then Replace Image from the new menu that pops up. If you want to change the background image in a section like a header, click on it and go to the right-hand menu. Scroll down until you reach the Backgrounds section, and click on the image’s name. A new menu will popup, from where you can set the role of the image, replace it, change its positioning, and more.

4. Publish your Webflow site

So far, we played around and customized the website in desktop mode. Everything looks good. But before a site is ready, you must first check its responsiveness. So, from the bar at the top of the screen, click on the different device modes and change your view from desktop to tablet and then phone. Once you find an element that doesn’t fit, simply adjust it for each size.

Now that your responsiveness is fixed as well, your site is ready to be published. For this, go to the top menu bar, and press publish. Premium users can connect their new Webflow site with their own domain. But, if you don’t have a domain, Webflow provides a free one for you. Of course, this will be with the Webflow format.

But, the free domain comes with a free SSL certificate, as well as speed optimization settings such as minified HTML and JS code. Finally, confirm your publishing by clicking on Publish on selected domain, and voila! Your new site is now live.

4. Add eCommerce to your site

Adding eCommerce on a site should only occur when you are ready to start an online store. Not before, “just in case”. Features that you add on your platform, that you actually don’t use only slow down your site. That, and they take up time from other important things, like setting up and optimizing your blog for example.

The best solution is, avoid adding eCommerce until you need it. And with Webflow, you have that option at all times. Whether you start a website from scratch, or you use one of their templates, Webflow comes with an eCommerce option. Same goes for publish or unpublished sites.

So, when you are ready to add eCommerce on your site, go back to the editor and click on the eCommerce button. A popup will show, asking for you confirmation. Once confirmed, Webflow automatically adds a virtual store on your site, which you configure from the eCommerce pannel.

To set up your new store, follow the 12 steps in the Setup Guide. Then start adding your products by generating some dummy prouducts as examples. From Category you have the option of creating new categories and sort your products based on different criteria, like size, color, price, use etc. Finally you can control your orders by clicking on the Orders button.

4.1. Customize you email notifications

Customized emails for your online shop are a powerful must-have. They create a memorable experience for your users and build a bond between them and your brand. Personalized emails also build your reputation, as well as user trust.

Webflow knows this and provides an in-depth email customization tool within the Settings button. There you can see each type of email you can send, and tailor it to fit your brand. Also, you can send a test email to your email address and see how it actually looks like.

5. Manage your site from the Webflow Dashboard

Like every website builder, Webflow comes with a comprehensive dashboard from where you manage your website after publishing. In fact, you can manage all of your Webflow projects from here. However, since the dashboard covers all aspects of your website, let’s focus on the most important ones.

5.1. General settings

The first tab in the dashboard is the General settings, which above all else, include the name of your projects and favicons. These are an important part of your branding strategy. While it’s not a simple task to choose a brand name, it should show in your website domain. But, keep in mind the KISS rule – keep it simple stupid. If your brand has a long, difficult name, abbreviate it and make it memorable.

Favicons, just as a reminder, are the little icons we on each browser tab by the website’s name. This should be something that defines you and your brand, more commonly, a smaller version of your logo. But if your logo is still too big, use something that users will remember.

Another important part of the general settings tab is the website statistics. Keep an eye on them, as they will show you how big your site is and how popular, among others. You will want to keep your site as small in size as possible, as the larger the site, the slower it is. Also, monitor your traffic as often as possible. If you are not gaining any traction, there is something you need to improve on – write more articles, or more in-depth ones, increase your overall marketing efforts, and so on.

5.2. SEO

While most features within the SEO tab are reserved for premium users, there are two key ones that are free and you should use them. First, the indexing button tells browsers if your site should or shouldn’t be indexed. If you want to just test your website with your users, then your toggle should be at off, so Google and other browsers ignore your site. Only when you are ready, then switch the toggle to on, and let crawlers index your site.

Second, add your Google ID into the Google Site Verification field at the bottom. This connects your website with the Google Search Console, where you get in-depth data regarding your website and its performance. For example, if a page shows errors or for some reason, Google did not index it, Google will send alerts here with guides on how to fix each issue and score higher.

5.3. Fonts

Typography is as much a part of your brand image as your logo and brand name. So, choose a font that matches your tone. Webflow allows you to either choose a free Google font or upload your own. But be careful, some fonts are not supported by all browsers.

If your font is not supported by a browser, then the browser will replace it with a basic font that it does support. Best case scenario in this situation, your users would have a bad experience. Worst case scenario, your entire User Interface will break and it will be a disastrous experience for your users.

So, whichever option you go for, make sure you test your website on all browsers you think your users actually use.

5.4. Backups

Most website builders only offer backups for premium users. Webflow, however, offers this feature for free. Backups, just to clarify, are versions of your website saved at specific moments in time. If anything goes wrong, something breaks or you made a mistake, Webflow allows you to restore your website using a saved backup.

This “turns back the time” for your site and brings it back at the settings you had when the backup was saved. But most importantly, backups contain data that you would otherwise lose if, for example, your database crashes and you do not have a backup in place. Simply put, backups are lifesavers, trust us.

5.5. Integrations

The final step, integrate Google Analytics and Facebook Pixel. The more information about your site the better. Details like your websites’ performance, where and how you generate traffic, which devices your users visit your platform from, which country they are in, and so on is what helps you optimize your platform as well as your content. Google Analytics will give you that information, and more.

Also, both Google Analytics and Facebook’s Pixel will help you when creating ads. They collect information and provide data that show you when, how, and why you should adjust your marketing efforts.

6. Unlock your website’s full potential with a premium plan

Running a website with Webflow for free is possible, but as you’ve seen so far, it is very limited. For one, there are a plethora of features that are reserved for premium plans. This includes SEO features, eCommerce features, as well as design and website management.

However, if you want your brand to actually make an impact with your users, you will need your own domain. Unfortunately, Webflow also reserves this option for premium users. But remember that your website is an active and essential part of your marketing strategy. So, unlock your brand’s potential and invest in your own domain, be it buying it from an independent provider or through Webflow.