How many of these Webflow secrets do you already know?

Webflow secrets

By Vincent Bidaux, published on

December 29, 2020

This post has been featured on the

If you’re at all familiar with how the web works, Webflow is a pretty straightforward tool. You don't need to read a library full of documentation to start building a gorgeous website.

Fix

UPDATED May 2020: irrelevant or outdated tips have been removed

1. Vertically center a section on smooth scroll with custom attributes

A link to an anchor usually make the anchored section scroll to the top of the page or just underneath the Navbar.

For any section that you want to scroll into view in the middle of the viewport, add a new custom attribute called data-scroll and set its value to mid.

Select the element that you are scrolling to (not the link that triggers the scroll), go to the Settings tab, and click on + to add a new custom attribute.

Now the section will center itself in the viewport. That means it will position its center at the vertical center of the viewport.

Sometimes you will need to reload the designer for this to work in Preview mode. If the section is taller than the viewport, this attribute will be ignored and the section will scroll to the top of the viewport instead.

2. Open a link in a new tab right from the Designers' preview mode

If you need a button to open a link outside of the Designer tab when in preview mode, add this custom attribute to the link: data-force-open:"1".

3. Yes, you can target an element made of a combo class in an interaction

Yes you can! And that's kind of very important, very convenient. I don't know if it's not allowed for a good reason, but after having using it in pretty much all of my interactions I find it safe to use.

This trick is described in a tutorial here.

PS: this tip was originally wrote for IX Legacy, but it works the same, and is as useful for IX2.

4. Control the speed of the smooth scroll to an anchor

When an element has a Unique ID defined, you can set a link to this ID. When clicked, the page will smooth scroll to that ID with an ease-in-out easing mode in 1000ms.

One second is a lot for user interaction. Most click and hover interactions are set between 200 and 350ms. Of course a long scroll can use a little more time but for many, 1second is too much. For others who want to use the smooth scroll as a narrative effect, 1 second is too short.

You can change that speed by using custom attributes.

By the data-scroll-time custom attribute on the <body> tag, it will affect all scroll operations on the page.

By setting it on individual elements that you're scrolling to, it will affect the smooth scroll to that element spcifically.

So you can set one default scroll speed for all links on the page by adding the custom attribute on the <body>, and override that setting by adding other values directly to the targeted elements.

Here's how to add a custom attribute. Select your target element or the <body>, go to the Settings Tab and add an attribute and its value in the Custom Attributes section.

The value you can add to the attribute is free. It's set as a multiplier of the default value (100ms).

Value of the attribute and the correspondant duration

duration of the smooth scroll = value × 1000ms

Here are values you can set for the data-scroll-time attribute, and what they mean in terms of duration:

data-scroll-time = 0 will scroll immediately to the element with no delay.
data-scroll-time = 0.75 will scroll a little faster than the default (750ms)
data-scroll-time = 1 will scroll just as fast as usual (1000ms)
data-scroll-time = 1.25 will scroll a little slower than the default (1250ms)
data-scroll-time = 2 will scroll twice as slow as usual
data-scroll-time = 20 will enable TurtleMode™

You can play with the live example here.

Be careful when you add or try very high values: you won't be able to concel the scroll, even in the designer. A long scroll will begin, then be interrupted by anothe event (another click) but will continue as soon as the other event finishes.

This trick was posted by Vlad Magdalin in the forum in February 2014.

5. Do math right in a Webflow field

Wonder how many decimals you should put for your 1/3rd width element with a width:33.33333% ? Always have the Calculator app opened?

You can perform mathematical calculations right in any numerical field of Webflows' UI. Such as 1/3, 940-320, 7*80-320, etc...

6. Outline all elements of the same class

This is not a real secret, because it's documented, and quite known. But it's a tiny thing in the UI that can be very easily overlooked and that a surprising high amount of new users I talk to don't know about.

You see the label under the selector box? It tells you how many elements of the same selector are present in the current page, and on other pages.

It's very convenient, preventing you to modify an element when you don't want its new styling to affect other elements. A glance at this label and you know exactly if there are other occurences of this objects.

But do you know that you can click it to activate it, and highlight all elements of the same selector?

If an object of the class ".demo-image" is selected, all objects with this selector will be outlined in pink. Even if they have a combo-class after the selected selector. It's very convenient to have this turned on, it often prevents you to make styling mistakes.

The feature works when you select a higher selector too.