How many of these Webflow secrets do you already know?

Webflow secrets

Webflow secrets

Webflow secrets

Webflow secrets

By Vincent Bidaux, published on
October 28, 2016
This post has been featured on the
Webflow blog
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.

1. Use non-HTTP links by adding a backtick (or grave)

By doing researches, you found that you can give a link some special code so that it acts like a History button. For instance, to give to a link the same behavior than the browser back arrow, you can use the history.go()-1 piece of code, and it works just well, bringing you one step back in your browser history.

But when you add that piece of code in Webflow, in the free link box in the settings panel for a link, Webflow adds http:// to it and your special action is ruined.

There is a solution! Whenever you need to add special code instead of an HTTP link, add a backtick character to it, and Webflow won't add the infamous http://.

The code with the backtick in front


This tip is good to remember because what can be put in an HREF attribute constantly evolves. Webflow got you covered by allowing toi add HTTP links, mailto links, link to phone numbers, to anchors. But anything new that isn't yet covered by Webflow will require you to use the free link field and a backtick character.

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

3. 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".

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

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

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

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

Check the Stucture demo
This is the
Posts in other categories