Guide / Article

5 Webflow Tips & Tricks we bet you didn't know

Flowbase
September 30, 2020
5 Webflow Tips & Tricks we bet you didn't know

// Webflow Trick 01

View Custom CSS in the designer without publishing

You might have done it before, you've added some custom CSS in the page settings and now you have to wait for the site to publish to see the changes.

You're losing precious seconds! You could have just used the embed-code component, this way you can quickly see those CSS changes without waiting for page publishing to view changes.

// Webflow Trick 02

Math calculations directly in the webflow field.

Have you ever been working on a website when you had to pull our your calculator for some quick sums... Well, sorry you're gonna feel a bit silly.
You could have just entered that directly into the field and had webflow crunch those numbers for you.

You enter the fields like this:
100/4
33 * 33
140 - 22

Followed by the unit you would like eg %, px, EM etc

If you're building columns, don't just settle for 33%. You're BETTER than that.... Honestly... what would people think of you know you cut these corners like this...
Just type in the field 100/3% and NOW you care. That's finesse son.

// Webflow Trick 03

Change the Scroll to Section/Anchor Speed

Have you ever used webflow anchor links and just thought Damn Webflow that's a bit zippy...
Maybe you wondered if you could change that... Well you can, and it's damn easy..

Okay, so to do this you're going to add a custom attribute data-scroll-time and then set the value with something below:

  • 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
  • data-scroll-time = 1 will scroll just as fast as usual
  • data-scroll-time = 1.25 will scroll a little slower than the default
  • data-scroll-time = 2 will scroll twice as slow as usual
  • data-scroll-time = 20 will enable TurtleMode


GOOD TO KNOW - you can use this custom attribute on the body tag which will apply this across all anchor links.

// Webflow Trick 04

Change Webflow Default Container Size

If you've been using webflow for a while you likely use div-blocks to manage your containers. But maybe you need to update an older site using them, or maybe you just like being you.

Either way, you can simply add this bit of code and change the standard 960px Container

<style>
.w-container {
max-width: 1140px; }
}
</style>

// Webflow Trick 05

Change Webflow Default Slider Dots

<style>
.w-slider-dot {

background: teal;font-size: 20px;}

.w-slider-dot.w-active {
background: aqua;
font-size: 20px;}
</style>
Flowbase
September 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.