Email Marketing Tool

karstenm
Membro

Styling Alt Text - specifically CTAs

resolver

I watched the Community Developer Show: All About Email, and styling alt text was a gem they shared that I've already started implementing. The only quirk (I've come across so far) I'm trying to find a solution for is CTAs.

 

Here's an example that everything is working except for the alt text color: <div class="remove-mobile" style="text-align: center; padding: 20px 10px 40px 10px; font-size: 18px; font-family: arial, helvetica, sans-serif; color: #f5841f;">{{cta('be9678ea-acc0-4f35-81f2-2c07c1e41f02')}}</div>

 

Any suggestions on alt text styling for CTA buttons?

1 Solução aceita
alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Styling Alt Text - specifically CTAs

resolver

@karstenm 

You would need to place the styling on the image the CTA generates, which uses the class of hs-cta-img. However since we can't use inline styling on it this may not work in all email clients:

 

 

 

<style type="text/css">
  .hs-cta-img {
    text-align: center;
    padding: 20px 10px 40px 10px;
    font-size: 18px;
    font-family: arial, helvetica, sans-serif;
    color: #f5841f;
  }
</style>

 

 

The reason only the color isn't pulled from the div is because <a> tags (which is wrapped around the CTA image) do not inherit colors due to default colors added by the browser.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

Exibir solução no post original

3 Respostas 3
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Styling Alt Text - specifically CTAs

resolver

Hello @karstenm , 

We have craeted a loom video for you. Following the process you can alt text style the CTA buttons:
https://www.loom.com/share/d55768acdc6946259e838e75eff40365

Hope it helps!

alyssamwilie
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

Styling Alt Text - specifically CTAs

resolver

@karstenm 

You would need to place the styling on the image the CTA generates, which uses the class of hs-cta-img. However since we can't use inline styling on it this may not work in all email clients:

 

 

 

<style type="text/css">
  .hs-cta-img {
    text-align: center;
    padding: 20px 10px 40px 10px;
    font-size: 18px;
    font-family: arial, helvetica, sans-serif;
    color: #f5841f;
  }
</style>

 

 

The reason only the color isn't pulled from the div is because <a> tags (which is wrapped around the CTA image) do not inherit colors due to default colors added by the browser.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
karstenm
Membro

Styling Alt Text - specifically CTAs

resolver

It's a given that many things won't work in every client, but I added your code to my email <head> markup and for the clients it does work in, the CTA alt text looks great. Thanks so much!!!