How to build a website using Webflow

Webflow takes a bit more technical skill than some web builders, but the results speak for themselves. Learn how it works.
May 5, 2020 • 10 minute read
Adam Mathew @Grizwords
Technical Co-pilot
Cover photo for How to build a website using Webflow

Ikuti Berita Terbaru

Berlangganan buletin kami untuk tetap mendapat informasi terbaru tentang topik-topik penting.
Terima kasih telah berlangganan! Awasi kotak masuk Anda untuk pembaruan selanjutnya.

We take you through the basics of crafting your own Webflow website, and show you how to make it pop

Getting a website up fast is easy nowadays. Quick and dirty — and thoroughly unimpressive — yeah, that's a cinch. That said, if you want to get one up that's more than halfway decent, Webflow is the way to go. After all, no serious business venture in this day and age can do without a solid online presence. The problem is that constructing a website from scratch can be a costly, time consuming and ultimately frustrating experience if you don't turn to the right tools from the get-go. What you probably need is a way to whip yourself up some web with not much knowledge required.

If that's why you're here today, Webflow can provide. For the novice user it can be a website constructor that allows you to click 'n' drag elements in a visual editor, then upload something as pretty as it is basic. Bring a bit more technical nous to bear and dig a little deeper, and Webflow starts to reveal all sorts of fandangle functionality and creative opportunities.

Before we dive into how to build a site with Webflow, let's look at some of the platform's pros and cons.

Webflow pros and cons

There are a lot of good reasons to go with Webflow for your site building needs. Much like competitors Wix and Squarespace, Webflow offers a fairly low barrier of entry via an intuitive interface and a novice level requirement of coding skills. You can hit the web running with a plethora of stylish templates, and the adventurous among you can use a bit more know-how to enhance the complexity of your creation beyond the basic functionality offered.

Webflow is basically a powerful online toolkit. A surprisingly versatile crossbreed of a content management system like WordPress, a straight up site builder like Wix and if you're at that level, a base from which to hand code in whatever isn't served up in their generous menus.

That being said, making websites at the layman level does come with more than a few limitations and other frustrating peccadilloes.

For starters, and even though it has been dumbed down considerably, Webflow can still appear intimidating upon first launch. This is especially true if you're still wet behind the ears with the HTML and CSS languages. You should definitely go in expecting a steeper learning curve than that of Wix. GoDaddy and Squarespace.

Secondly, if you do hit upon some sort of trouble with your creations, the folks at Webflow aren't the most communicative bunch. While other website building outfits offer live chat and phone support, you'll be trying to disentangle your problems via a ticketing system. Not ideal and not very in line with the relatively high prices you'll be most likely paying to be a serious member of this web building ecosystem.

Be all that cost as it may, what's possible with Webflow can definitely be more complex and professional looking than the cheaper website builders out there. Providing you put the time and effort into it, of course.

Now that we've gone through the pros and cons of choosing Webflow for your website, let's jump into how to build your Webflow site.

Getting started with Webflow

First thing's first. Head to Webflow.com and create an account (email, password and your moniker). You'll then start off with an open-ended trial (that comes with serious limitations), plus you can take a survey that will make your first tentative steps into this program that much more user-friendly.

Webflow plans and pricing

Webflow offers three different subscription options based on what you want to accomplish with your website.

Webflow is a bit more expensive than most, Mind you, you can shrink down the initial outlay by making a smart decision on a few different subscription options. It all depends on what you want to accomplish with your website, really.

Starter: This is a toe-tester tier. What you create can be yours forever, but you're pretty hamstrung by what you can't do. You can only have 2 projects saved to your profile for one thing (or two, as it were). You're also blocked from code exporting, white labelling, site password protecting and there'll be no team dashboard functions for you. However, you do still get to use client billing and free staging, which is pretty generous.

Lite: If you want to get a bit more serious by putting some actual cash into this, there's a $16 USD per month Lite plan. Now you can have a veritable stable of 10 ongoing projects, all of which can be client billed, code exported and you can stage them in more enhanced and creative ways. Unfortunately, you're still out in the cold when it comes to white labelling, site password security and the collaborative fun of team dashboards.

Pro: Welcome to the deep end. For $35 USD a month, a very active freelancer or full-time designer can smash out as many projects as they please. Almost all of the aforementioned features are available, too. The one glaring omission is that you'll be further nickel and dimed for the team dashboard. They're under Team Plan packages that skyrocket from US$70 per month to a whopping $280 if you want to establish an 8 user website producing beast.

Choosing your Webflow site

Let's get cooking. During the sign up process for Webflow, you'll be quizzed on a number of things. What is your site about? How experienced are you at this? What industry are you in? Do you prefer Pepsi or Coke? It's pretty comprehensive.

Webflow choose website

Next, Webflow will ask you what you want to do with your site. For this basic starter tutorial, we're going to go with the following answers: Web Designer, My Business, Never Built and Business Site.

Deciding your top goals and getting started

Webflow choose color scheme

After setting a basic color theme for everything, you get to further refine the style of template for your site. We're planning to be a pretty high-end supplier of quality merchandise, so we're going with Elegant and Light.

Webflow choose style

Finally, it's time to give our site a name. We've decided we're going to set up something that could easily transition into being a fully-fledged ecommerce site someday. For now, we're going to inform the public on what we're selling: decorative, highly-sought-after doors that don't open. We've named our home page appropriately. We've also added an info button that we'll hyperlink to an additional page that we'll build later on in the process.

Webflow add content

Editing your Webflow site

But we're just getting started! Now it's time to make that Webflow site our own. Webflow makes it ridiculously easy to edit any element of your site thanks to The Box Model. Every element on your web page has an invisible boundary around each element. These boxes naturally sit next to each other or stack on top of each other, depending on their properties. For example, we can change our h1 (the main headline):

Webflow change h1

Our button text:

Webflow change button text

Or the background image and anything else we drag in to spruce up the place.

How do you add said elements? Easy. The Add Elements Panel (accessed via the '+' button in the absolute upper left of the screen) gives you quick, visual access to the various elements you can add to your project. Elements can either be: Layout, Basic, Typography, CMS, Media, Forms or Components. With any of these you can either click to add it in place or simply drag and drop it to where you need it in the visual editor.

Webflow visual editor

It's worth noting that an important aspect of the box model is that it allows you to insert boxes inside other boxes (i.e., "nest" them). Basically, you can easily make any Webflow element shack up with another element. All the elements in Webflow are boxes that can be nested inside each other.

Adding pages and posts to your Webflow site

On the home screen of your Webflow site, you'll see a toolbar on the left-hand side. At the top, you'll see a Page icon. Once you click through, you'll be given another toolbar with a few options for different page types, depending on the type of site you chose.

Webflow add pages

You can click on any of the existing pages to add posts. We're just going to make an info page that sits beyond our visually alluring homepage; a place where we can really get into the nitty gritty of why fake doors are such a must-have accoutrement to any home.

Webflow add pages 2

A quick note here. Before you click “create page” in the upper right, you should definitely take the time to fill in the fields here with as much info as possible. Pay particular attention to the SEO Settings, Title and Meta Description fields. The more info you can give a website engine like Google, the more times you'll appear as a search result and this will translate into more eyeballs on your page.

This time around, we're going to speed up the process of page creation by clicking on our Add '+' button, then going to 'Layouts'. This beats the heck out of drawing little boxes and shuffling them together from scratch.

Webflow layouts

We're going to go with a “Cards Section”. It will allow us to spruik our wares a little harder and also offer a mini gallery of sorts to show some of our most primo fake doors. Potentially, we could make said photos hyperlink off to their own pages if we wanted to. Or a contact email. Or an ecommerce portal (if we were more advanced designers).

Clicking on Text elements will effectively allow you to word process them into shape. You have basic typography options that allow you to style them up into something jazzier, too.

Images can be added in (or replaced) just as easily by double clicking on their boxes. Much like the SEO fields that we diligently filled in when creating this page, take the time to fill in the “Alt” description field. Accurately describing what the image is about is another small step to making Google like your content a little better.

Webflow adding images

Lastly, don't forget that once you've added the page, you can change the page options by clicking on the gear icon next to the relevant page. The intent of this page doesn't have to be set in stone. You'll be presented with a variety of options you can edit. Clicking on the General tab will let you change the title and URL of the page, the title that appears in the navigation bar and the number of posts that will display on the page. You can even password protect the page if you want to create gated content.

Don't forget that you need to facilitate a way to get back to your gorgeous home page or other areas of your site. As a quick example, we're going to slot in a new Container that will expand the existing template.

Once the container is slotted in underneath, click Add Element and a Button. One click on these will allow you to change the text field; changing their functionality requires you to mouse over them and click the little gear icon that pops up.

Webflow add element

From here you'll want to click on the Pages icon that appears. Then go to the Choose A Page drop down menu in the dialogue box. Then find and click on that Home page of yours.

Be sure to do the reverse linking from the Home page to this Info page you've just created. Moving between the pages you've created is a cinch. Simply click on the Page icon on the left hand menu bar and click on the relevant page you want to jump into via the Static Pages list. Don't worry, you won't lose any changes. Webflow basically saves everything you do as you do it.

Webflow linking

While we're here to link everything up, we've decided to alter an element to serve as a Contact function. Once again, clicking the gear icon allows us to select Email from a dropdown box called Type. We can then enter our preferred email and a subject line that will allow us to quickly identify this communiqué as an enquiry from our website. Easy peasy.

Webflow linking pages together

Webflow tools

Now we've made a simple, functioning site. Let's have a look at some of the tools Webflow offers to help manage it. These all sit at the top right of your screen.

Style

The Design tab lets you better fine-tune the visuals of your site. You can change the color palette, the fonts, the button shape and size and the way everything aligns.

Ecommerce pages

Webflow's ecommerce tools include all of the things you'd expect: inventory and order tracking, customer relationship management, discount codes and point of sale tools. You'll need to create a dedicated ecommerce page to access these.

Style Manager

Sick of clicking on a hundred boxes in the main navigator pane? Try the Style Manager instead. You can quickly select a ton of elements and tweak them as needed. This is how you completely refresh the look of an entire site with minimal effort.

Interactions

Pages that just sit and stare at you are boring. Click on the lightning bolt icon to step into the wider world of Element Triggers and Page Triggers. The former makes something on your page spring to life whenever somebody hovers or clicks on it, the latter can bring stylish transitions to page-to-page navigations.

Taking your Webflow site to the next level

You now have the know-how to create something presentable enough to put on a server. These are the same skills that will serve you well when it comes to growing the existing framework with evermore content and customer opportunities. But to really allow your Webflow site to survive and thrive in a hyper-competitive marketplace (like non-entrances and faux exits), you should enlist the help of some professionals.

A graphic designer can use their trained artistic eye to make your site look ultra-professional, or they can fashion a completely fresh Webflow template for you.

A web developer can implement custom functions to run on your Webflow site, and can make sure the existing stuff you've cobbled together is actually working and earning you money as it ought to.

An SEO expert can drive insane amounts of traffic to your Webflow site. Yes, you entered all the fields like we told you, but SEO is an artform that requires a great deal of marketplace study and keyword nous.

An email marketing expert can help you take that expanding address book of yours and turn most of the people on it into new revenue streams.

A search engine marketing expert can turn a pittance worth of Google Ad credit into an advertising campaign that opens lucrative new doors for your business. Figuratively speaking.

Finally, a freelance writer can create copy for your site that can turn an otherwise straightforward product or service into a fascinating must-buy opportunity. Never underestimate the power of words. Also the occasional number. Or a brilliantly placed emoji.

Final words

Webflow isn't the perfect option for every website. But if you want to build a great looking site quickly and easily, and you want user-friendly tools to help you manage your online business, Webflow is a great place to start.

Ikuti Berita Terbaru

Berlangganan buletin kami untuk tetap mendapat informasi terbaru tentang topik-topik penting.
Terima kasih telah berlangganan! Awasi kotak masuk Anda untuk pembaruan selanjutnya.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Artikel yang Direkomendasikan Hanya untuk Anda
The process of creating a website is very daunting if you have no experience. In this process we break down the complexity into 15 actionable steps.
13 MIN READ
Mobile responsiveness isn't just a nice feature for your website to have. It's a must. We'll show you how to get it there.
6 MIN READ
Full stack developers are jacks of all trades, and can handle every part of your website. Here's how to find the right one.
7 MIN READ
If your website sitemap is not correctly designed it could negate all of your SEO efforts. In this post we teach you how to plan one effectively.
9 MIN READ