Webflow Joe

F'in Sweet Webflow Hacks

Add classes dynamically with Webflow CMS

What can this be used for?

  • Add classes to a Dynamic Collection List to restyle page elements
  • Add classes to customize js functions to do { anything } on your webpage

Overview

Webflow has really awesome native functionality for dynamic colors, images, text, and more. Sometimes you need to to do dynamically add multiple styles to a single element and a class is necessary. There are many many uses for dynamic classes in the CMS it's yet available in Webflow. Until it is, we wrote this awesome hack that will allow you or your clients to add classes via the CMS

Step 1

NOTE*** 

This step is only necessary if you're working with a Dynamic Collection List block. If you're applying these dynamic classes on a Template page, head over to Step 2

Add a Switch field to the Collection called "Code Block". Every item except 1 in this collection will have this switch off. One will have the switch turned on. You can turn it on for any item in the collection, it does not matter which one it is and there is no significance to which one your choose. This switch will be used in a conditional statement later when we insert code in a Dynamic Collection List. If you want a full runthrough of this, we have an article dedicated to this Hack.

[screenshots of this ]

Step 2

Create your CMS setup to add classes

There are a few ways we can set up our CMS Collection to accept classes. Think about the type/amount of classes you want to add and choose the option that makes the most sense from a client user perspective.

Your options

Class via switch

The switch is a good choice if you have an "ON/OFF" type functionality that the class performs.

In this example, we have online courses on our site and we're going to turn on and off the switch to add or omit the class '.unreleased' from the element block. This will change many styles of the block to turn it into an 'unreleased' styled block.

[ screenshot with on/off and caption explaining each ]

Class via select

The select is a good choice if you have multiple class possibilities to use as add-on classes.

In this example, we have several services that we offer as a company. Each service needs an add-on class to apply custom styling to the service blocks.

[ screenshot with select dropdown ]

Each of these will apply a unique add-class to the object.

Branding = '.branding'

Web Design = '.web-design'

Web Development = '.web-development'

Custom Functionality = '.custom-functionality'

The client in the Editor can now manage styles for these elements, dynamically with a dropdown.

Step 3

NOTE*** 

This step is only necessary if you're working with a Dynamic Collection List block. If you're applying these dynamic classes on a Template page, head over to Step 4

Create a hidden Dynamic List

There will be two Collection Lists on the page where classes are dynamic

  1. Visible and displays the Collection content
  2. Hidden and used to inject dynamic collection fields into the webpage

In the second Collection List, add a embed box to the item. Set a conditional statement to the Dynamic Collection List and only make elements that have the "Code Block" switch set to ON. Nice! We have one item with that switch on. This how we're going to inject dynamic javascript to the Collection ONCE. If we didn't have that conditional statement, the code would repeat itself as many times as their are items. If you have 100 items in your collection, the code would be inserted on the page 100 times. This conditional statement makes sure there is only one script code being generated.

Lastly, apply a class to the outer parent of the Dynamic List. Set it to display : none on the page. This can be anywhere on the page.

Step 4

Add the code to the page

The code is exactly the same no matter where you add it.

If you're adding classes to elements in a Dynamic Collection List

  • Add the code to the embed component in the hidden Dynamic Collection List.

If you're adding classes to elements directly on a Template page

  • Add your code to the body

If you're adding classes to a elements in a Dynamic Collection List inside a Template page

  • Add your code to the embed component within the hidden Dynamic Collection List

<script></script>

          code

 

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Nice! You're done. Check out what it looks like.

[show screenshots of working example and code bubbles]

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!