v1.1.0
Why? OfferBoardPluginsPre-fundingFundingPost-funding
Back to Dinote

How does our platform work?

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
    Prior to funding
  2. 2
    During funding
  3. 3
    Post funding

Why Dinote?

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

OfferBoard

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

OfferBoard

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

Plugins

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
Explore
Reference
Photography
Explore