Webflow Secrets 2020

A list of little known or easily overlooked features of Webflow Designer.

1

Use VMIN and VMAX units

You’ve been using VW and VH units, and did you know Webflow also supports VMIN and VMAX?

They’re not listed, but you can type them in.

(Also supports REM, but not EX or CH yet.)

2

Know your shortcuts!

  • ⌘ + ↵ Focus on the selector box
  • ⌥ + click on a spacing value = mirror
  • ⇧ + click on spacing value = mirror 2 ways
  • ⇧ + P = invoke Publish dialog
  • ⇧ + ↵ = Publish on selected domains
3

Bulk actions on Interactions steps

You can select multiple Actions in Webflow Interactions Animations, then retarget them or change their values at once.

4

Override auto-responsive images

There’s a simple way to exclude an image from being published as a Responsive Image by Webflow.

Select the image and type ⇧ + ⌘ + O to reveal this setting in both of the  Image Settings panels.

5

Hack the Rich Text element styling logic to use descendant selectors on HTML elements

  • Style RT children elements using the When nested… option.
  • Re-use the RT class on any other element, and see their children styled by the same rules.
6

Navigator panel fast forward superpower

Hold ⌥ (Alt) while using the ↓ and ↑ keys to use the Topologic Navigation, i.e. to select elements in the order that they appear in the Navigator.

7

Konami no-code

Doom god mode cheat code works in Webflow Designer. Type the code iddqd.

It does something… but what? Answer:

The secret code adds one of the most popular font to the list.

8

Export “dynamic” content

Contrary to CMS content wrappers (Collection Lists, CMS Collection Page Templates), overriden Symbols can be flattened.

Their content can also be exported.

9

2 Webflow discreet UI bits

  • there’s a pale blue line on the lower ruler that show you the span between 2 breakpoints.
  • the line of text below the selector box is clickable, it’s a toggle to highlight elements of the same class.
10

Custom Keyboard Shortcuts

You can use the ⌘ + E Quick Find function and a macro app (here Alfred) to craft shortcuts to the most common elements, and populate your layouts in a snap.

11

Learn Flexbox, visually

An extra tip, it’s about the Flexboxgame.

It runs inside of a standalone Webflow Designer. 28 levels to solve, with gradual complexity.

If you’ve never played with it, you may learn a few things there.