CMS Development

LvanAggelen
Participant | Platinum Partner
Participant | Platinum Partner

Is there a way for new CTA elements to inherit styling from a website (HubSpot CMS)

SOLVE

We have a customer that uses the HubSpot CMS for their website. When they create a new CTA, they would have to apply the styling each time over, and it never matches the website or the previous created CTA. 

 

Now I understand that these new CTA's can be used in more than one place (external websites, emails), but especially in combination with the HubSpot CMS, I would've thought there would be an option to inherit the style from the website (form fields, buttons). But instead, it uses the same iframe embedding as it would with an external website. Is there no way to make these two coherce better and be able to apply some of the website styling to the CTA?

 

Kind regards,
Luuk van Aggelen

0 Upvotes
1 Accepted solution
FrancoQ
Solution
Contributor

Is there a way for new CTA elements to inherit styling from a website (HubSpot CMS)

SOLVE

Hello @LvanAggelen !
If you're working with CTA styling in HubSpot, it's important to note the key differences between the legacy CTAs and the new CTA tool:

Legacy CTAs allow you to apply and save default styling, including custom CSS and classes. This makes it easier to maintain consistent branding across multiple CTAs without repeating work.

New CTAs, on the other hand, are rendered inside an iframe, which makes styling more isolated and per-instance. Each CTA has its own settings (like width, background, font, etc.), but those don’t carry over to new ones unless you manually recreate them or clone an existing one.

You can choose between the two versions depending on your needs:

  • If you want reusable styles and more flexibility with CSS, use Legacy CTAs. These are easier to manage if you're creating a large number of CTAs with shared visual design.
  • If you prefer the new interface and functionality but still want consistent styling, a practical workaround is to create a styled “template” CTA using the new tool and clone it for each new instance.

View solution in original post

0 Upvotes
2 Replies 2
FrancoQ
Solution
Contributor

Is there a way for new CTA elements to inherit styling from a website (HubSpot CMS)

SOLVE

Hello @LvanAggelen !
If you're working with CTA styling in HubSpot, it's important to note the key differences between the legacy CTAs and the new CTA tool:

Legacy CTAs allow you to apply and save default styling, including custom CSS and classes. This makes it easier to maintain consistent branding across multiple CTAs without repeating work.

New CTAs, on the other hand, are rendered inside an iframe, which makes styling more isolated and per-instance. Each CTA has its own settings (like width, background, font, etc.), but those don’t carry over to new ones unless you manually recreate them or clone an existing one.

You can choose between the two versions depending on your needs:

  • If you want reusable styles and more flexibility with CSS, use Legacy CTAs. These are easier to manage if you're creating a large number of CTAs with shared visual design.
  • If you prefer the new interface and functionality but still want consistent styling, a practical workaround is to create a styled “template” CTA using the new tool and clone it for each new instance.
0 Upvotes
BérangèreL
Community Manager
Community Manager

Is there a way for new CTA elements to inherit styling from a website (HubSpot CMS)

SOLVE

Hi @LvanAggelen, I hope that you are well!

Great question, thanks for asking the HubSpot Community!

I'd love to put you in touch with our Top Experts: Hi @Anton, @sylvain_tirreau and @alyssamwilie do you have tips to share from your experience or a workaround to help @LvanAggelen, please?

Have a great weekend and thanks so much in advance for your help!
Bérangère


HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres! !
0 Upvotes