The Ultimate Webflow Component Library. Buy Forest Today.

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

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.

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.

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.

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>

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>
This product is not yet available. Join us on twitter for updates.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This product is not yet available. Join us on twitter for updates.