Intro
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
And check it against the reference
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:
Double-click text elements to edit them.
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
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.
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
bonus challenge
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.
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
