Modifying Code for Fancy Links & Buttons
Hi,
I have been struggling with alignment and styling issues when using shortcode fancy links and buttons.
A few questions related to this page: https://floatingptstg.wpenginepowered.com/filter-view/craft-ingredients/
If you scroll down to the middle section (header, AroniaCraft) you will see 2 buttons under the word "SPEC PDF".
1) I would like these buttons to be on the same line as "SPEC PDF." Do I need to use columns to do this?
2) I want those buttons to look like the top right example on your Button element page: with an outline, where it fills in when you scroll over. Many of those attributes I would like (outline, hover) aren't in the list of attributes on your page, or in the shortcode editing interface in your column text element. I tried copying over some of the properties from inspector, but many of them didn't work. Can you advise me if there's an easier way to replicate properties from buttons on your Button page?
3) In the footer on the same page, there is a subscribe button that is the full with of the element. I would prefer the button box to wrap around the text. Can you help me accomplish this?
4) Lastly, and unrelated to buttons - you'll notice on this page that there isn't proper spacing between the first and 2nd section. Can you help me understand why the spacer amount on this page keep resetting to zero when I press the 'update' button? I have tried every possible workaround, with no success. (I know the problem is not a result of the negative bottom margin on the last wrap in the first section, because this is a feature on almost every page and spacers have worked to resolve this issue on other pages.)
I really appreciate your assistance. I believe you have the latest login access to my account from my last forum question, but if not I have sent my login credentials again through your messages.
Best,
Hillary
Comments
One last question about fancy links that I forgot!
In the megamenu, if you go to RESOURCES, there is a menu list on the left hand side. I want the fancy link (VIEW ALL) to line up with the menu above it, but adjusting the margins on it does not work. Can you help me find another way to do this?
Thanks!
Hi,
1) As I can see, it is all placed in one Column Text element.
To have it side by side, you must split it into separate elements, for example, the Heading and Button, and adjust their size.
2) When you have a Button element, you can adjust its display with the Style tab in the settings.
3) Do you have some examples showing how it should look? Can you send it?
4) Can you show on a screenshot how you set it up in the builder? Did you not try assigning top padding to this section instead?
5) It is not algined because of the animation:
When you move it to the left, the animation will also start moving further to the left.
Is that what you want to achieve?
Best regards
Thanks for your help. I have a followup question:
2) I have a few use cases where I can't easily use a button element, so my original question still stands. Is there shortcode I can use to specify button outline color?
The shortcode button will take its styles from theme options.
If you want to modify the button from shortcode without changing theme options, you must write a custom CSS code.
Best regards