3 min

5 Webflow tips and tricks we bet you didn't know

November 23, 2021
5 Webflow tips and tricks we bet you didn't know
Main clouds hero section image

If you're a seasoned professional, you probably know it all, but we thought it might be a good idea to take a look at some of our favorite lesser-known Webflow tricks.

Top 5 CSS Tricks You Must Know for Webflow - YouTube

Webflow Trick 01

View custom CSS in the designer without publishing, You may have done this before, you've added some custom CSS to 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 simply use the embedded code component, that way you can quickly see those CSS changes without having to wait for the page to publish to see the changes.

You can put a custom HTML embed anywhere on the page.

Webflow Trick 02

Mathematical calculations directly in the Webflow box. Have you ever worked on a Web site when you had to pull our calculator for quick sums.... Well, too bad you're going to feel a little silly. You could just type that right into the box and have Webflow crunch those numbers for you.

You enter fields like this:

  • 100/4
  • 33 * 33
  • 140 - 22

The next units you would like are %, px, EM, etc.

If you are building columns, don't settle for 33%. You are better than that..... Honestly...what will people think of you knowing you cut corners like this... Just type in 100/3% and NOW you care. That's grace, man.

Webflow Trick 03

Changing the scroll speed of a section/anchor

Have you ever used webflow anchor links and just thought. Damn Webflow, which is a bit bouncy... Maybe you've wondered if you can change it... You can, and it's pretty darn simple.

So, to do that, you need to add a custom data-scroll-time attribute , and then set the value below:

  • data scroll time = 0 will immediately scroll to the item without delay.
  • data-scroll-time = 0.75 will scroll slightly faster than the default.
  • data scroll time = 1 will scroll as fast as usual.
  • data scroll time = 1.25 will scroll slightly slower than the default.
  • data scroll time = 2 will scroll twice as slowly as usual.
  • data-scroll-time = 20 will enable TurtleMode

Helpful Tip - You can use this custom attribute in the body tag, which will be applied to all anchor links.

Webflow Trick 04

Change the size of the default Webflow container. If you've been using Webflow for a while, you probably use div blocks to manage containers. But maybe you need to update an old site using them, or maybe you just like being you. Either way, you can just add this bit of code and change the standard 960px Container

Webflow Trick 05

Changing the default Webflow Slider Dots

Tired of those boring white dots to navigate your slides? With custom code, it's very easy to make style changes. As shown in tip 01, you can copy the code into an HTML insert to see the changes directly in preview mode, or you can put the custom code into the page or project settings code.  

And the result should be:

We’ve flipped the traditional agency model on its head. No account managers, no fancy offices and no receptionist. Transformative, results-driven brands, part of our services consist in websites and marketing without the bulls**t. We stand by our processes and global team of strategic and creative specialists to deliver world-class brands, websites and marketing campaigns that help businesses solve problems and seize opportunities.

Let's build something great together!

Featured on our blog

Case studies

Our portfolio

Technology expertise

vuejs logoreact logo
laravel logodjango logosymfony logo
aws partners logo docker logo kafka logo
kubernetes logoatlassian logo