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
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 ]
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.
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 ]
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.
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
There will be two Collection Lists on the page where classes are dynamic
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.
The code is exactly the same no matter where you add it.
Let's learn by going step by step through the code
[show screenshots of working example and code bubbles]
We're Webflow Experts!