Can I define custom attributes to a list?

This is a general question, so I don’t think a Read-Only is necessary.

Most of us are probably in love with the custom attribute “class”, which lets us predefine certain designs, themes and layouts, which we then can connect to component properties for even more felxibility in components.

Now, some of my clients want to handle some designing themselves, and by structuring components with easy-to-understand properties this is a piece of cake, it simply cannot go wrong… Except for when they come to the custom “class” attributes.

This is a bit tricky, since the client needs to type the class exactly as they are defined in the combo class, otherwise they will have no effect. If I have too many options this becomes confusing for the client. What would be easier is if they could have a bullet list of pre-defined values in the property to just select from, instead of having to type it in.

This is actually possible inside CMS lists, or CMS template pages, as I could connect the value to a collection, in which each item is the same as the class. However, I cannot find any way to do this outside of CMS items.

Is it possible? Can I define custom attributes to a list, so the client can just pick pre-defined classes, instead of having to type them out?

Hello @micheldigital, welcome to the community!

So I think what you want is possible by using the custom element because that way you can pass styling by using the attribute “style” that is only possible with the custom element in Webflow. Furthermore you can use Timothy Ricks’s Lumos chrome extension that allows you to apply styles to components with buttons/tags inside the component’s properties. Idk if I’m explaining this well. Take a look at this video and I think it would make more sense https://www.youtube.com/watch?v=y4oTdCa4jSA. I hope this helps!

1 Like

I’m looking forward to that too.

At present there isn’t a way to restrict component properties to a set of values.
I just keep the classes short and simple, and document the options elsewhere.

If your CSS classes are inlined using embeds, they’ll know immediately if they’ve entered the correct class name because they’ll see the change in the designer.

1 Like

Looks like a solid workaround. I’d like to refrain from using too much custome code but this could work for now. Thanks!

1 Like