Can I customize certain elements of symbols on different pages while leaving some elements global? For example, let’s say I have a call to action on every page, so I want to use a symbol for that, but I want to have a different background color for each pages call to action. Is this possible? This is of course possible with php and sass, just curious about implementation and versatility in webflow.
5 Likes
Hey @rchrdnsh, at the moment symbols are exact replicas of their master element, so something like this is not currently possible in Webflow. However, we would consider implementing parametrized symbols (aka mixins with parameters) in the future if there is enough demand for them.
In this case, if the call to action is a simple button, it might not be too much slower to assign a base class (e.g. “CTA”) to a button, then copy-paste it across pages, and then add additional classes to add styling overrides. So in CSS you might end up with something like “.cta.main”, “.cta.subpage”, “.cta.large”, etc - changing the “CTA” selector would change the overall style, while the modifier classes would provide specific styles for additional instances. Does that make sense?
3 Likes
I understand what you are saying. I think it would be nice to include this feature in the future to allow for DRY but comprehensive code that serves and aids the imagination, rather than limiting it.
1 Like
Why not have a symbol and wrap that symbol with a block with background color? Then the content is easy to edit across pages and the background style is unique to that page? Maybe that will help.
1 Like
Good idea for bg color. What about making one button, making it a symbol, then changing each buttons color and text?
IS there a way to copy a symbol across multiple pages, take the "symbol classification away, leaving multiple “Copies” of the groups of components, making the changes you want, and then creating a new symbol out of each copy?
I feel like the ability to vary components in a symbol and quickly make /edit copies of symbols would be a great benefit. especially when functioning for each symbol could be different depending on which page it is on…
J
The idea of symbols is to have all instances be exactly the same. But Webflow does automatically add a “current” class to links that are linking to the current page, so you can add styles to those “current” links to have them look different. But this sort of styling is limited to links.
Thanks for the reply @thesergie!
Any thought on giving this functionality by being able to duplicate symbols in the symbol organizer? This would allow you to edit the duplicate without messing with the original and would allow for versions of symbols.
Just a thought!
Looks like this is now a possibility:
Actually, symbols within web flow are (legitimately) used as master elements. The missing thing is having symbols as something more flexible, that keeps certain styles but allows for substantial modifications.
E.g. a button would be styled in all its aspects and states according to the specification to be found within a symbol; still, I would like to change its label in different circumstances. To take the call to action as one sample, I might have different text in my CTA buttons, nonetheless would like to apply the same CTA styles staying across the different instantiations of it.
In addtion, taken that far, I would like to include my favourite symbols within the “add elements” section on the left hand side and use them across projects (and users in case of teams).
I know a lot to ask for, but urgently needed to make an excellent tool even more deployable 
5 Likes