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.
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.