[jbarnabeParticipant]

Hello, I’m currently trying to implement the Card Shortcode in a Text Block so I can make the Title clickable. We’re doing this because it appears to be a bit of an issue for guests to know to click on the button so adding the clickable Title gives less chance of failure. Ideally, if the whole card was a click through link that would be best.

Anyways, here is the code that I’m using: Note that I don’t have any text, just titles.

<a href="/whoweare">[x_card animation="flip-from-top" center_vertically="true" front_style="border-width: 8px 8px 8px 8px; border-style: none; border-color: #2772a4; color: #ffffff; background-color: #3498db;" front_icon="ship" front_icon_size="36px" front_icon_color="white" front_title="Front Title" 
front_text="." back_style="border-width: 8px 8px 8px 8px; border-style: none; border-color: #744288; color: #fffffff; background-color: #9b59b6;" back_title="Back Title" back_text="        " back_button_text="Click Me!" back_button_link="#" back_button_color="#ffffff" back_button_bg_color="#744288" padding="10% 10% 10% 10%"]</a>

I believe the color: #ffffff; should force the title to be white but it is not.

Any suggestions on a better way to achieve this/fix this?

[Rue NelModerator]

Hello There,

Thanks for writing in!

Looking at your code, since you have enclosed the card shortcode with a tag and the a tag has its own color, doing so will invalidate the html output and create issues in the element. You may not notice it on the front end but behind that, the output was messed up already. Sooner or later the links in your button or a link below the card element might no longer works. We do not recommend this setup.

Hope this helps.

[Author]

Posts