How can I add a color property to my Webflow div element that can be independently changed across instances?
TL;DR
- Use Combo Classes by adding unique identifiers (e.g.,
ColorRed) to a base class (ColorBlock) and setting background colors per instance. - Use custom attributes and CSS variables by setting inline styles (e.g.,
--custom-color) and referencing them in CSS viavar(--custom-color)with custom code. - For CMS items, add a color field, then bind each div’s background color to that field via the Style panel for dynamic color control.
To add a color property to a Webflow div element that can be independently changed per instance, you should use a Combo Class or a custom CSS variable with custom attributes. Here's how:
1. Use Combo Classes for Individual Styling
- Select your base div and style it with a generic class (e.g.,
ColorBlock). - Click “+ Add Combo Class” (next to the class name in the Style panel).
- Type a unique identifier for the instance (e.g.,
ColorRed,ColorBlue). - Set the background color (or text color) for that specific combo class.
2. Use Custom Attributes and CSS Variables (Advanced)
This method allows color control via CMS or more dynamic use.
- Set a custom attribute on your div, such as
style="--custom-color: red". - In your base class, define a property that references the variable:
- Set background color as
var(--custom-color)in the Style panel using custom code embedding. - To display different colors, change only the inline
--custom-colorvalue per element.
➡️ Requires a small embed code or inclusion of global style rules via the page’s <head> or before </body> section in Page Settings or Project Settings → Custom Code.
3. CMS-Based Color Assignment
If you're using a CMS Collection:
- Add a Color field to the Collection (e.g.,
Background Color). - In your Collection List, bind a div’s background color to this field:
- Select the div inside the Collection Item.
- Go to the Style panel → Backgrounds and choose the purple “Add Field” icon.
- Bind to the dynamic color field.
Each instance now reflects the color stored in the CMS.
Summary
Use Combo Classes for quick, visual differentiation or Custom Attributes/CSS Variables for dynamic styling. If you're using CMS, bind the color directly for full independence across items.