CMS Development

apetty
Participant

Custom CTA CSS (dynamic container)

SOLVE

I've found the styling options within the CTA menu too limited. (My current page buttons have pretty responsive hover functions). So I want to pull the tracking functionality from the CTA into my current code. 

 

I'm new to Hubl, and self taught at HTML/CSS. I am trying to integrate CTA functionality into my Hubl + HTML module. 

 

 

Current code:

<div class="wpb_wrapper">
<div class="nectar-fancy-box" data-color="accent-color">
<div class="box-bg" style="background-image: url('{{ module.image_field.src }}');">&nbsp;</div>
<div class="inner" style="min-height: 150px;">Report Name</div>
<div class="link-text">[[ INSERT CTA TEXT HERE ]]<span class="arrow"></span></div>
<a href="[[ INSERT CTA href link HERE ]]" class="box-link" target="_blank"></a></div>
</div>

 

But all I have to work with when I insert a CTA field to my Hubl code is {% cta guid="{{ module.cta_field }}" %}. How do I extract the relevant href/text content? While retaining the CTA tracking functionality? 

If there is a better way to do this please let me know. But to be honest I will probably only undertstand the syntax if you provide an example for me to reference.  

 

(I have seen the 'Events' tool within HubSpot, but do not have Enterprise level)

1 Accepted solution
JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Custom CTA CSS (dynamic container)

SOLVE

If you're working with a custom module, you should be able to add a default CTA by clicking "Edit" which will show to the right of the CTA field on the right of the custom module editor when you hover over it: 

EditCTAField.png 

Then once in the field, there should be a "Default CTA field" which is where you can add one of your pre-built CTAs:

 

SelectCTA.png

 

Once a default CTA is added, it should then show if you preview the custom module which can be done by clicking on "Preview" in the top right of the custom module:

 

Preview.png

 

In the preview, you should be able to use the inspector to see the code that renders when your CTA loads on the page. Generally speaking, the code will look something like this: 

 

<span class="hs-cta-wrapper" id="hs-cta-wrapper-[SPECIFIC ID FOR YOUR CTA]">
<span class="hs-cta-node hs-cta-[SPECIFIC CLASS FOR YOUR CTA]" id="hs-cta-[SPECIFIC ID FOR YOUR CTA]">
<a id="cta_button_[SPECIFIC ID FOR YOUR CTA]" class="cta_button" href="[CTA URL]">CTA TEXT</a>
</span>
</span>

 

In the CTA editor, under "Advanced Options" you should also have the option to add a specific class for that CTA which you can use to reference in your style-sheet if that is where you plan to style the CTA. If you plan on styling the CTA in your style-sheet, I'd recommend choosing "Link (No Style)" for the "Button Style" in the editor so that no default styles in the CTA tool get applied to the button. You'll have more control over the CSS for the CTA that way. Let me know if you have any questions about this! 

View solution in original post

5 Replies 5
JasonRosa
HubSpot Employee
HubSpot Employee

Custom CTA CSS (dynamic container)

SOLVE

Hey @apetty where are you currently adding your code? Is it in an HTML module or is it in a custom module? 

0 Upvotes
apetty
Participant

Custom CTA CSS (dynamic container)

SOLVE

Currently building in a custom 'module'. 

0 Upvotes
JasonRosa
Solution
HubSpot Employee
HubSpot Employee

Custom CTA CSS (dynamic container)

SOLVE

If you're working with a custom module, you should be able to add a default CTA by clicking "Edit" which will show to the right of the CTA field on the right of the custom module editor when you hover over it: 

EditCTAField.png 

Then once in the field, there should be a "Default CTA field" which is where you can add one of your pre-built CTAs:

 

SelectCTA.png

 

Once a default CTA is added, it should then show if you preview the custom module which can be done by clicking on "Preview" in the top right of the custom module:

 

Preview.png

 

In the preview, you should be able to use the inspector to see the code that renders when your CTA loads on the page. Generally speaking, the code will look something like this: 

 

<span class="hs-cta-wrapper" id="hs-cta-wrapper-[SPECIFIC ID FOR YOUR CTA]">
<span class="hs-cta-node hs-cta-[SPECIFIC CLASS FOR YOUR CTA]" id="hs-cta-[SPECIFIC ID FOR YOUR CTA]">
<a id="cta_button_[SPECIFIC ID FOR YOUR CTA]" class="cta_button" href="[CTA URL]">CTA TEXT</a>
</span>
</span>

 

In the CTA editor, under "Advanced Options" you should also have the option to add a specific class for that CTA which you can use to reference in your style-sheet if that is where you plan to style the CTA. If you plan on styling the CTA in your style-sheet, I'd recommend choosing "Link (No Style)" for the "Button Style" in the editor so that no default styles in the CTA tool get applied to the button. You'll have more control over the CSS for the CTA that way. Let me know if you have any questions about this! 

apetty
Participant

Custom CTA CSS (dynamic container)

SOLVE

Thanks Jason.

 

Finally got it working! I'd tried almost everything else you mentioned. The part that did it for me was assigning a custom class to the CTA.

 

Appreciate the help. 🙂 

0 Upvotes
apetty
Participant

Custom CTA CSS (dynamic container)

SOLVE

Hi Jason

 

Sorry, I've been in back-to-back meetings, thank you for the comprehensive response.  I'll give it a try this afternoon and let you know how I go. 

0 Upvotes