Welcome to Webflow

Scroll down to start

Before you start building responsive websites visually, let's learn a few of the principles behind building layouts in Webflow. It only takes a few minutes, and you'll learn a ton.

First we'll introduce you to the box model, then show you how to:
  1. 1
    Add elements
  2. 2
    Style a card container
  3. 3
    Style text and buttons
  4. 4
    Center elements with flexbox
Intro

The box model

On the web — and in Webflow — every element is a box, and boxes are often nested inside other boxes to build layouts. This is called the box model. Once you understand the box model, building websites becomes much easier.

Intro

The card to the right shows what you'll build today, and how you'll use the box model to build it.

In the box model, elements that contain other elements, like the div block here, are parents. Elements inside a parent are called children.

To build a layout, you’ll typically add Display settings to parent elements to control how their children behave.

Now let’s put this knowledge to work by building this card from scratch.

What you'll be building & The boxes it's made of
Div Block
Text Block
Photography
Heading

My European trip

Button
Explore
Build your Card here
And check it against the reference
STEP 1 of 4

Add HTML elements

To start designing, grab elements from the Add Elements panel at the top of the left-hand toolbar, then drag and drop them into the Workspace.

TRY IT OUT
  • Open the Add Elements panel and drag and drop a Div Block into the Workspace area.
    Tip: Div blocks are the basic building blocks of all websites because they're used as containers for other elements.
  • Then drop the following elements inside the Div Block:
    • Heading
    • Text Block
    • Button
  • Double-click text elements to edit them.
Workspace
Reference
Photography

My European trip

Explore
STEP 2 of 4

Style the card container

Now that we've built the card's structure, let's give it some style.

TRY IT OUT
  • Select the Div Block in the Workspace area
  • Go to the Style panel's Size section and set the Height to 320px to fill the container
  • With the Div Block still selected, scroll down to the Backgrounds section and add the background image. Then set Size to Cover and Position to the middle dot
  • Go to the Borders section and apply a 10px Radius to all corners
Workspace
Photography

My European trip

Explore
Reference
Photography

My European trip

Explore
STEP 3 of 4

Style the text and button

Now let's practice our new styling skills to make our type and button look like the Reference.

TRY IT OUT
  • Apply Typography styles to the Text Block and Heading
    Tip: Select elements in the Reference to peek at the Typography styles we used. You can apply styles manually or add the associated selector(s) to apply all the styles automatically.
  • Next, style the Button by changing the Background and Color, and adding a Radius of 100px, similar to how you styled the card container.
  • With the Button still selected, go to the Effects section to add a Box shadow, using the reference button as a guide.
  • Finally, add some Spacing to the Button.

    Add 25px Margin to the top, 50px Padding to the left and right, and 15px Padding to the top and bottom.
Workspace
Photography

My European trip

Explore
Reference
Photography

My European trip

Explore
STEP 4 of 4

Centering elements with flexbox

On the web, elements sit at the top-left of their parent container by default. But we can change this by applying display styles to parent elements, like our div block, that control how child elements behave.

TRY IT OUT
  • Select your Div Block
  • Go to the Layout section of the Style panel and select the Display property Flex
  • Flexbox lays out child elements horizontally or vertically. Select Vertical to stack the elements.
  • Select Center for both Align and Justify to center your elements horizontally and vertically
    Tip: Play with flex settings to create other layouts
Workspace
Photography

My European trip

Explore
Reference
Photography

My European trip

Explore
bonus challenge

Nice work!

You’ve just visually coded a fully functional card component — and learned some fundamental web principles while you were at it.

BONUS CHALLENGE

We’ve prepared another card for you to build — this time, by yourself. Feel free to scroll back up if you’re unsure about anything. Happy designing!

Tip: You can always select elements in the Reference to see what properties they use.
KEEP LEARNING!

This is just the beginning of what you can do in Webflow. When you're ready for more, you'll find hours of videos and guides in Webflow University.

Tip: Preview this page by clicking the eye icon in the top left to make the link above clickable.
Workspace
Reference
May 10, 2019  ·  Amazing Restaurant

Food tasting event

This month we’ll meet to try new recipes from our fit food experts...

Book your place