Change Color/ Dropshadow of Secondary Text on creative cta

[jeannie11]

Hi There! I’m loving the features of the creative cta, but I can’t figure out how to change the color and drop shadow on the secondary text. Do I need custom css to do this? The white text with no drop shadow doesn’t stand out enough on the yellow background. I think it may violate accessibility guidelines.

[friech]

Hi Jeannie,

Thank you for writing in, sorry but I don’t see any secondary text on your Creative CTA element

• 

If you fill this up you’ll see a Secondary Text Shadow setting.

• 

The text “Compare Our Packages” and “Get the PERFECT Fit For YOU!” are both primary text, so you can set the shadow of these text under the Primary Text Shadow setting.

Hope it helps,
Cheers!

[jeannie11]

OH ok I said it wrong. I want the color of the text on the back side of the creative cta to be different from the front.

[christian]

Hey @jeannie,

Regretfully, there’s currently no styling options for the back part. You will need custom CSS for that. Here’s a sample code you can add in the CTA Element CSS.

$el .is-int .x-anchor-text .x-anchor-text-primary {
  color: blue;
}
$el .is-int .x-anchor-text .x-anchor-text-secondary {
  color: red;
}

is-int is the main back part class. Everything else in the CSS selectors follow.

If you currently don’t understand the coding part, I’d recommend that you learn coding in sites like https://www.w3schools.com/. If you can’t find the right selectors of our themes and builders, we can help you. It is just important that you learn CSS because this part is the users responsibility to code.

Thanks.