The absolute beginner’s guide to Webflow

What to expect — and do — when you first sign up for Webflow.

John Moore Williams
September 18, 2018
Tutorials

As a creative tool designed for flexibility, there’s a lot to wrap your head around when you first try Webflow. Here’s our guide to getting started right — by building a surprisingly homogenous website.

First, what is Webflow?

In short, Webflow is a web design tool, CMS, and hosting platform. Each aspect of the platform is represented by a particular product/feature set:


The Designer

A visual web design tool firmly grounded in web standards and best practices, the Designer translates your design decisions into clean, production-ready code. We built it to enable designers to develop websites in a familiar way — i.e., visually — without sacrificing quality.

If you’re mostly a prototyper, you can use the Designer alone, either sharing the prototype with devs to reproduce, or exporting the code.

But to experience the full power of Webflow, you’ll want to combine the Designer with the CMS and our Hosting.

The CMS

Like the Designer, the CMS is a code-free web development tool. It has both in-Designer elements (where the site designer works) and on-site elements (where the client and/or content managers work). We call the latter element the Editor, but more on that later.

For now, just know that in the Designer, the CMS lets you structure content types you’ll publish over and over again — like blog posts, product pages, etc. — by combining modular “fields.” Once you’ve created your content types, which we call Collections, you can then use the Designer to determine how Collection items look on the site.

Hosting

The final piece of the Webflow puzzle is our Hosting platform. Backed by Amazon Web Services (AWS) and Fastly, it’s blazing fast, super-reliable, and you’ll need it to enjoy some of our best features, including:

  • The CMS
  • The Editor
  • Form management
  • Responsive images (automatic resizing of images by device to improve performance)
  • Free SSL/HTTPS (improved site security that Google is basically making a must for sites that ask for visitor information)

Okay, now that we have the lay of the land, let’s talk about diving in.

Getting started in the Designer

It’s tempting to start this off with an overview of the Designer and its component parts. But I’m not going to do that.

Because you just want to start designing, don’t you?

Thought so. With that in mind, let’s create a super-simple yet incredibly common layout using some of the ready-made building blocks Webflow gives you.

Note: I’m starting with Webflow’s default, pre-styled components so we can focus more on structure than customization. Once you feel comfortable with default elements like sections and containers, you’ll be ready to move onto more freeform objects like divs.

Here’s the aforementioned layout, which I’m borrowing from Dave Ellis’ now-classic article “All websites look the same.”

Black and white skeleton layout with top nav, hero image, with h1 overlay and below the fold is a company blurb and three-column grid.
Thankfully, no one owns the copyright for this layout.


Yes, it’s a stellar example of homogenous design. Yes, you will be using it on some of your websites (probably). That’s exactly why we’re starting with it.

So let’s dive in!

Step 1: Create a new project from a blank canvas

You can call it whatever you want. I chose “Homogenous tut” for mine. The only important thing is to make sure you select the “Blank Site” template.

Step 2: Define your default font and font size

Now, we’re going to take one step that you should always take on every new project: setting the default font and font size. It’ll save you a ton of time down the road.

Once you’re in the Designer, just click the blank canvas before you. In the upper left of the canvas, you should see the word “Body” in a blue box.

On your right, you’ll see a tabbed area. The tab that’s open by default is called the Style panel, because that’s where you style elements. In that tab, click into the Selector field at the top, then click Body (All Pages).

Selecting that “tag” means that any other changes you make in this Style panel will apply to — surprise — all your pages.

Now scroll down to the Typography section of this panel and pick a font. I chose Montserrat because it looks very similar to our template, but you can use whatever you want.


You can stop there, if you’d like. I personally like to customize the font size and line height as well, but if you want, you can just stick with Webflow’s defaults.

Aside: I set a default font size of 1 em and a line-height of 1.5 em. Why I did that is a bit outside the scope of this article. When you’re ready to dig into the complexities of responsive web typography, I highly recommend Jason Pamental’s excellent article, “A More Modern Scale for Web Typography.”

Why did we set the default font first?

By setting a font and size on the body tag, we defined the default font and size for the entire website. That way, all the type elements we add to the site from here on out will automatically inherit that font, so we don’t have to adjust it over and over again. Handy.

Step 3: Add your main navigation

On the left side of your screen, you’ll see a thin bar with a single column of icons. Click the + sign to open the Add panel. Here you’ll find all the building blocks you’ll use to construct your site.

Now scroll down to the bottom of this panel to the Components section, and click or drag the navbar. Since there’s nothing else on the canvas, it’ll snap right to the top, which is exactly where we want it.


The default styling of the navbar matches the design we want to create really well by default. But there are a few customization to make to create a perfect match.

First, make sure your navbar is selected by clicking it. Then scroll down the Style panel till you reach the Background section. Then click the solid color on the right of the Background section and make the navbar white.

Now, go back to the Add panel, grab a Text Block and drop it into the outlined box on the left of the navbar.


Now double-click on that text block and edit the text to read “your website.” Don’t turn on your caps lock while you type that! We’ll control the capitalization in the Style panel instead. Why? Because doing so ensures that no matter what gets typed into that field, it’ll always appear in all-caps, saving you from irritating updates in future.

Now go to the Style panel and make the following changes:

  • Font size: 1.5 em (or 24 px)
  • Letter spacing: 1
  • Text transform: Uppercase

Next, select the first link in the nav. In the selector field, type “Navlink” and make the following changes in the Style panel:

  • Text transform: uppercase
  • Letter spacing: 1px
  • Border: Right solid 1px black

Now select each of the other links in your navbar and give each of them the “Navlink” name. That will automatically apply those style changes we just made to the selected links.

Note: there are several different ways to create those vertical lines between the nav links. I just chose the simplest for this tutorial.

To finish up the navbar, I selected the Container inside the navbar and added 10px of padding on top and 20px of padding on the bottom. This will give the slider we’re about to add in the next step a little breathing room.

Step 4: Add your slider and its content

Despite all the research showing that sliders and carousels aren’t a great choice for your homepage, people seem to love them.

Which is probably why Webflow has a pre-built slider component! Which makes this next step real easy:

Just drag and drop the Slider component onto your canvas. (It’s in the Style panel, in the Components section at the bottom.)

With the Slider selected, go to the Style panel and make one change:

  • Height: 60vh

Note that you’ll have to type “vh,” rather than selecting it from the unit dropdown. You can do this with basically any unit in any input box that accepts width/height values, even if it’s not listed.

Why vh?

The “vh” unit is a very handy one, because it defines an element’s height in terms of the size of the viewport — that is, the area the site’s being viewed in, typically your browser window. You can also define widths in terms of “vw,” or viewport width. Just note that setting a strict height on an element, no matter what unit you use, can get tricky if you’re aren’t careful with the height of the content that will go within that space.

Now to add the slider’s content.

For this, I’ll introduce you to the Navigator panel. It’s on the right of your screen, in the third tab from the left. You can think of it as Webflow’s version of the layers panel you’ll find in Photoshop or Sketch, if you’re familiar with those tools.

In the Navigator panel, select the item called “Slide”:

Now switch back to the Style panel and under the Display Setting section, click the Flex button.

A new section called Flex Settings will appear. There, select Vertical, then the two centering options:

You probably didn’t notice anything happening while you did that, but rest assured, some magic occurred.

To see the magic in action, open the Add panel and drag a heading into the slide. The heading should sit dead center in the slide!

(Pardon my excitement. I just can’t get over the fact that, in a couple of clicks, you just managed a problem that plagued web designers everywhere for years. Good on ya!)

Now select the heading you just added to the slide and edit it to read “we’re unique.” Again, don’t turn on your caps lock!

Then click into the selector field and select All H1 Headings. That way, all the changes you’re about to make will affect all other H1s on your site.

Now make these changes:

  • Font weight: 700 - Bold
  • Font size: 3em
  • Line height: 1em
  • Letter spacing: 1
  • Text transform: uppercase
  • Text-align: center

Finally, we’ll add a button, which you’ll find in the Basic section of the Add panel. Drop it in below the heading, and edit the text to read “find out how unique” — and once more, with feeling, don’t hit the caps lock. We’ll control the casing in the Style panel again.

Now make the following style changes:

  • Font weight: 700 - Bold
  • Letter spacing: 1
  • Text transform: Uppercase
  • Background color: Transparent
  • Border: All sides, solid, 2px, black

Now celebrate — you’re halfway there!

Step 5: Add a blurb about your uniqueness

Now that we have our main nav and hero slider, it’s time to add a bit more detail on how unique we are.

To create this section, open the Add panel one more time, then drop a Section onto the canvas. Then grab a Container and drop it inside the Section. If you’re having trouble getting it in just the right place, you can also open the Navigator panel again and drop the element in the appropriate place there.

Finally, drag a Paragraph from the Add panel and drop it inside the Section. Voila — you’ve got your blurb section! But it’s not quite like the model site, so let’s adjust the layout a bit.

You could just center the text by selecting the paragraph and centering it in the Typography section of the Style panel. And we will, in fact, do that in just a moment.

But we also need to give our blurb a little breathing room, since it currently sits just beneath the slider. To do that, select your Container element and give it some padding on all four sides.

The easiest way to do this is to hold the Shift button while you drag any one of the padding bars in toward the center. Because you’re holding Shift, all four sides will gain the same amount of padding, all at the same time. (Want to just adjust left-and-right, or top-and-bottom? Hold Option or Alt as you drag, instead of Shift!)

I added 64px of padding, but you can give it whatever amount you’d like.

Now click the eye icon at the top left of your screen to switch to preview mode, and you should see something like:

Voila. We’re about three-quarters of the way to completing your completely homogeneous, totally expected, oft-requested layout.

Let’s finish up.

Step 6: Creating the three-column section

No website is truly homogeneous without a three-column section spelling out something important that comes in threes. This could be your products, your services, a few testimonials, or maybe just three awesome features of your product. Just so long as you can capture it in three columns, with super short headings, and just a little bit of body copy.

As with the previous step, we’ll start by throwing a section onto the canvas. This one needs to have a black background to match our mock, so I’ll add a class (Black-section, I call it), give it a background color of black, and then add some padding. To match our previous section’s spacing, I’ll give it 64 pixels on top and bottom.

Next, we need those three columns. So I’ll toss a container onto the canvas, call it 3col, set its display setting to flex, flex layout to horizontal, and set it to center for both justify and align.

Then toss three div blocks into the 3col container, and add image, heading, and paragraph elements to each div. Voila! You should see basically what I have above. You can trim the text to bring it more in line with the always-brief content approach of modern sites, and — well, you’re basically done.

But wait — this is the 21st century! Which means that people will be visiting your site on all kinds of devices, not just ample desktop screens.

So let’s take a look at making this all responsive.

Step 7: Make it responsive

Now, if you’ve ever worked with responsive design before, you’ll know that things can get a little hairy at this stage.

The good news is: Webflow has already done a lot of the hard work for you! To see that in action, we’ll step down through the various device previews available at the center of the Designer’s top bar:

First, we’ll step down to tablet, to the right of the highlighted desktop icon.

And we’ll see that … well, things look pretty perfect already. The spacing in the top bar looks a little funky, so I’d remove the padding we added to the container in the navbar, then add a little padding to the “YOUR WEBSITE” text to align it to the hamburger menu.

Oops — almost skipped that hamburger menu!

Webflow automatically collapses our text links into a hamburger menu, already complete with animations and interactions to make it work beautifully on smaller screens. To see that in action, we can hop over to the Settings panel on the right (click the gear icon), and click the Open Menu button.

As you can see, Webflow’s already gotten us off to a great start. There’s a functional hamburger menu displaying as a dropdown, our links are intact, and all the styles we set on it on desktop are still functioning.

That’s an important concept to highlight:

The cascade of styles

Every stylistic change you make on a specific view automatically cascades down to smaller views.

Every change you make on desktop cascades all the way down to phone, portrait. Every change you make on tablet cascades down to mobile portrait too, but doesn’t affect desktop. And etc. Which means that every time you switch to a smaller view, you can make changes with confidence that it will only affect this view, and anything smaller.

Just note that changes to content don’t cascade. If edit your headline on the mobile view, it’ll change on all views.

Okay, back to the design. First, we’ll alter some of our desktop styles to make this hamburger menu a little prettier.

Select any “Navlink” and remove the padding on the left. Bam, now our site name and links align on the left. Then, with “Navlink” still selected, we’ll remove that thin black border we added to the right of the links, as it now creates one continuous vertical line.

Just click the X icon on the border style to remove the line entirely.

Now we also have a bunch more options for how the nav displays when opened, or we can choose to not use the hamburger at all!

Use this slider to control when the nav switches to a hamburger, or don’t use it all. (Personally, I try to avoid the mystery meat.)

Next, we’ll switch to the landscape view for phones (there’s no landscape for tablet as that view pretty much equals the desktop view).

And again, things look pretty darn good! I might change the padding on the nav a little again, but overall, not much I need to do.

Scrolling down, I can see that the three-column section is starting to get a little cramped. Narrow columns like this are surprisingly irritating to read, so let’s widen things up a little, shall we?

Thankfully, the fix here is really easy, because we used flexbox to control this layout. In fact, it’ll really only take a click.

Just select the container we called “3col” and in the flex layout section, click vertical.


Boom. Now we have a mobile-friendly, single-column layout. But things are still a little snug vertically, so let’s add some breathing room. Just select one of the div blocks containing the image, heading, and paragraph, and drag the margin bar while holding down the Alt/Option key.

Just 16 pixels to breathing room!

Before we leave this view, let’s check that the nav still looks good.

Hmm. Not so much. Looks like that margin we removed in the last step is coming back to haunt us! So we’ll just add it back. No biggie.

Finally, we’ll switch over to mobile portrait (the most commonly used display on mobile phones). And … well, everything looks beautiful.

Time to hit publish! … And then check the site on every device we can get our hands on!

While Webflow does a great job of emulating most displays, it’s always worth checking your work on real devices.

But for now: congrats! You’ve built your first Webflow site. It’s simple, a single page, and has no dynamic content, but it’s the perfect start to what we hope will be a growing career powered by Webflow.

Ok, so what’s next?

That depends on who you’ve built this cookie-cutter little site for.

If it’s for you, you can just add all you content and set up Basic Hosting for $12 a month (paid annually). But you’ll probably want to look at adding dynamic content with our CMS, so you can add projects to your portfolio, and set up a blog to share your design thinking. In that case, you’ll need CMS Hosting for just $4 more per month.

If the site’s for your client, the story is basically the same, with one little wrinkle: After you’ve set up hosting for them, you’ll want to set up Client Billing.

Why? Because with Client Billing, you can have your client pay for the site every month, add a little profit on top for yourself, and retain control of the site so they can keep paying you for all those little changes you make.

Handy, right?

Ready to learn more?

Now that you have a sense of the Webflow landscape, you can dive right into the Designer, or strengthen your Webflow knowledge with our video series, the Webflow 101 crash course.
Or, if you have a specific site in mind, Building a business website or Creating a custom portfolio might be just what you need.

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.