Blog, Website & Page Publishing

Crystal_Hopper
Conselheiro(a) de destaque

Lost styling on all CTAs across entire website

resolver

I saw an issue on one page where a CTA (that should have the primary button style) shows with Alt Text and a broken image icon. Then noticed all CTAs across the whole site look like this. I've put in a ticket to support. But seriously, what causes this and how do I fix it?

 

The CTAs appear fine in Internet Explorer, but are "broken" in Edge and Chrome. Here's a page to look at:
w w w . c u . n e t / industrial

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Avaliação positiva
1 Solução aceita
Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Lost styling on all CTAs across entire website

resolver

Hi @Crystal_Hopper

as a developer I'm quite surprised that IE is working better then Chrome and (the new) Edge since those two are basicly the same program and Chrome is considered one of the best clients out there.

 

It looks that you're using the default CTA styling. I would always recommend to set CTAs to "Link (no style)" and enter the depending CSS classes in the advanced options of the CTA. By doing this all your CTAs will look and behave the same AND if you change the design inside those classes in the future - it will automaticly be applied to all CTAs on your page which have those classes. 

Here are some classes I've found:

blue CTA: 

cta_button link-style1

(copy/paste those classes into the "CSS class" input field of the CTA)

 

 

hope this helps, 

 

Best, 

Anton

 

Anton Bujanowski Signature

Exibir solução no post original

0 Avaliação positiva
3 Respostas 3
Anton
Solução
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Lost styling on all CTAs across entire website

resolver

Hi @Crystal_Hopper

as a developer I'm quite surprised that IE is working better then Chrome and (the new) Edge since those two are basicly the same program and Chrome is considered one of the best clients out there.

 

It looks that you're using the default CTA styling. I would always recommend to set CTAs to "Link (no style)" and enter the depending CSS classes in the advanced options of the CTA. By doing this all your CTAs will look and behave the same AND if you change the design inside those classes in the future - it will automaticly be applied to all CTAs on your page which have those classes. 

Here are some classes I've found:

blue CTA: 

cta_button link-style1

(copy/paste those classes into the "CSS class" input field of the CTA)

 

 

hope this helps, 

 

Best, 

Anton

 

Anton Bujanowski Signature
0 Avaliação positiva
piotr-slezak
Membro

Lost styling on all CTAs across entire website

resolver

Hi Anton,

 

it looks like I'm in a similar situation as Crystal was at some point and I would like to ask for your advice. I'm using Hubspot CTAs in form of image buttons and I implement them on our company's site through NetlifyCMS. React and Gatsby are responsible for creating the blog posts which display the CTAs.

 

My problem is if I don't remove the two scripts listed below all the styles from the blog posts are removed and the site is, well, broken.

<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(*********, '*******************', {"useNewLoader":"true","region":"na1"}); </script>

 

What I found is I can remove the scripts from the code through regex pattern and in that case the CTAs display correctly and the styling of the site is preserved. However this prevents me from tracking stats of the CTA.  Have you ever came across anything similar? If so maybe you could advise on how to overcome this problem?

0 Avaliação positiva
Crystal_Hopper
Conselheiro(a) de destaque

Lost styling on all CTAs across entire website

resolver

I also thought that about IE vs the other 2. We've never had to use the classes like that, but I will keep in mind. Thanks for the idea!

 

This is something new that just happened across our whole website. I'm going to see what Support has to say about that before changing things too much. 

***************************
Did my post solve the questions or challenge? Please mark it as a solution for others to find.
0 Avaliação positiva