I’m trying to create a styleguide page that features buttons with specific URLs.
So when I’m on my homepage, I can add the buttons with the style according to the class selected. These buttons may be different colours, different CTAs, but their URL should all be the same. If I want to edit their URLs I want to do it once off (I.e. like you can edit font once off and it applies across the homepage where you using the class).
Is there a way to do this?
Hey @RickA, you can create a symbol and add override fields for your CTA. The URL will stay the same. I’m not aware of symbols allowing you to add a CSS override (change of color). You would need to unlink the symbol and add a combo class for example. This might work depending on how many different versions there are going to be.
A possible solution or work-around: If there are 5 different colors, create 5 buttons in your style guide, make each one a symbol with a text override. If a change of URLs is necessary, you would only need to change the URL in one place 5 times instead of looking for several unlinked buttons.
Hi, thanks so much. I have created a symbol for a button and we are wanting to place this button to the right of the top menu. It shows up perfectly in editing/designer mode but when in preview, the button goes behind menu bar text. Why is this?
Website preview is here.
Hey @RickA, you’re welcome. I’m not sure I can replicate the issue your describing. When previewing the site inside the Webflow Designer I can see the button just fine. If the problem still persists on your end, please share a screenshot or a video, so I can see what you mean.
I have noticed that your button has a setting of position: relative; and left: 1274px;. I don’t really see a reason why you would need such a high value or a position at all. Maybe try resetting those values and see if that solves your issue.
Thanks, I have solved this with creating a symbol for buttons (seems to work?)
Although, I now have a symbol (as a button) at the top right in the navigation section which isn’t clicking through to the URL it is linked to. Any advice?
Link to preview is here
@RickA, let me quote my previous message.
Resetting every value set for position makes your button clickable again. You will need to restructure your nav to position the button to the right. I see, that you are using columns at the moment. My suggestion would be using Flexbox and positioning your elements that way.