Makerpad & Flowmingo: Webflow fundamentals and shortcuts

Let's dive into the basics so you can start building some awesome Webflow sites.
Hero Content

The workshop

This is a recording. If you have any questions feel free to ask using the chat box or send me an email at

The box model

On the web, every html element is treated as a box. So headlines, paragraphs, images, buttons... All boxes.
Div Block
You think I'm just a paragraph? Lol nope! I'm a box. Well, and a paragraph too.
Also a box
You guessed it. A box. And a Flamingo.
Div Block


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.
You can put boxes inside boxes. Boxception!
You can control the spacing outside of a box by using Margin.
Div Block
You can control the spacing inside of a box by using Padding.
Div Block
By default, html elements (boxes) stack on top of one another and go full width of their parent element. To control the layout & styles of these elements, you'll need to use CSS.


You may be thinking... "Computers Suck Sometimes?" Yes, they do, but the CSS I'm referring to here stands for Cascading Styles Sheets.

To control the layout, positioning, width, height, colors, and everything else, you'll use CSS.


In order apply styling to an html element you need to first add a Class to that element.

In Webflow, you'll add a class by selecting an element, then adding a class in the "Selector" panel in the right sidebar.

Your Class

Think of a Class as a todo list of styling for your element.

  • Max width of 1296px
  • Margin of auto
  • Padding of 24px left & right

This allows you to reuse the Container class on as many elements as we'd like throughout our site. This is useful because if we make a change to one element with the Container class, it'd update every instance of that class.

But this can be a double edged sword. What if you want to only slightly tweak one instance of a class without it affecting it everywhere else on the site? 

That's where Combo Classes come in.

Combo classes

Container Medium

A Combo Class is a way to override, tweak, or add styles to a single instance of a class. So in that Container class, we could add a Combo class of Container Medium to change the width, but keep the other styles in tact.

  • Max width of 1296px
  • Max width of 768px
  • Margin of auto
  • Padding of 24px left & right

Default classes

Webflow allows us to add styles to all the various html elements (H1, H2, Paragraphs, Links, Images, etc) by default by selecting the Global Class.

These classes stand apart from the rest by being pink, which is totally on brand for Flowmingo.

All Paragraphs

You can even select the body element's global class and apply styles which would get applied to every page.

Body All Pages

This is a good place to set your base typography styles (font family, font size, etc) and background colors.

Class states

By selecting the drop down arrow in the selector panel, you can apply styles to various user states.


For example, if you wanted to change the font color when a user hovers their mouse the link, you'd select the hover state and apply your styles to that state.

Class inheritance

Ok, remember that CSS stands for Cascading Style Sheets? 

The cascading part is important.

Basically, styles cascade down. Meaning elements inherit styles from their parents.

Which means you don't need to add a class to every element.

For example, say you need to change the font size of a text block inside a div.

If that div element already has a class, there's no need to add a class to the text block as well.

Instead just apply the typography styles directly to the parent div's class and it'll inherit down to the text block.

Post Wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.
Text Block
The Text Block will inherit from the Post Wrap's styles.

Naming classes

It turns out, the hardest problem when it comes to building websites isn't design, or structure, or anything else.

It's actually, what the hell do I name these classes?

Webflow makes our life easy by not requiring you to add a class to an element before you start styling it.

With any element selected, you can just start applying styles and Webflow will automatically add a class for you.

The problem is you end up with something like this:

Div Block 73

If you're not careful your website can get difficult to manage, very quickly.


There's actually a helpful way to go about structuring your class names in a modular way, and it's call BEM.

Basically, BEM stands for Block, Element & Modifier.

A block would be your wrapper, elements are the children of that wrapper, and modifiers (combo classes in Webflow) are variations of styles of the elements.

For example, take a blog post:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.
Read post
Save to profile

.post is the block.

.post_thumbnail, .post_description, .post_button are the elements.

.post_button--profile would be the modifier (in this case a Combo Class, changing the background color to white).

Now personally, I don't love the naming convention (with the underscores in front of an element, and -- in front of a modifier), but I do like the structure.

So what I do is keep the BEM structure, but write them a bit more friendly, like so:

Post Thumbnail
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.
Post Description
Post Button Wrap
Read post
Post Button
Save to profile
Post Button Secondary

In the, there's no hard rule that says you need to do anything one way or another.

Basically your goal is to write as few classes as possible, inheriting styles when you can, so that your site is easy to maintain going forward.


These are the shortcuts I personally use in my workflow. For a full list, use "?" to open up the keyboard shortcut modal.

Command + E
Find anything
Command + Enter
Add a class to the selector
↑ & ↓
Select parents & children elements
← & →
Select siblings
Option + ↑ & ↓
Select next / previous element
Deselect / Abort
Delete element (obviously 😉)
Command + Shift + P
Move up & down in the layers
Command + Z
Command + Shift + Z
Command + C
Command + V
Command + X
Left sidebar
Opens the Add panel
Opens the layers panel
Opens the pages panel
Opens the asset manager
Right sidebar
Opens the styles panel
Opens the element settings panel
Opens the style manager panel
Opens the interactions panel
Top Bar
Desktop view
Tablet view
Mobile landscape view
Mobile portrait view
Learn how to build this site from start to finish!
Beginner - Intermediate | 3hrs 20m

Learn how to build V/One’s marketing site in Webflow.

Follow along step-by-step as we rebuild's marketing site in Webflow. We'll build each section, make it responsive & add some fancy interactions.
View courseJoin Flowmingo
Ben Tossell, Founder of MakerPad Flowmingo Testimonial
Anyone learning about Webflow should *absolutely* sign up for Flowmingo. Mackenzie is next level.
Ben Tossell, founder of MakerPad

Get a free Mini Project

Sign up below and get the Hero with Video Pop-up Section project sent to your inbox.
Thank you! Your submission has been received!
Uh oh! Something went wrong while submitting the form. Please try again.