CTAs

⚠️ If you purchased the full pack instead of the theme, please read the documentation of the full pack here

Introduction

In HubSpot CTAs are created using the CTA-Editor. To navigate to the CTA-Editor go to “Marketing” → “Lead Capture” → “CTAs”.

In order to create a new CTA click on „Create CTA“.

Once you have configured the button content and link, make sure to select „Link (no style)“ in the Button Style option. All CTA-styles are handled and changed directly in the POWER Template modules.

After configuring the options and saving the CTA, it is ready to be used in the POWER template.

 

HubSpot CTAs in POWER

If the module supports the usage of CTAs you will find a CTA selector in the module configurations:

In the style section of the module configurations you will find different options to adapt the appearance of the CTA button.

 

CTA Style

offers the following options in combination with the selected background style:

Light Background

cta-light

Dark Background

cta-dark

Primary Background

 

CTA Size

offers the following 4 options:

cta-size-setting

cta-sizes

Custom Styles

Included in V20, you can now set 4 custom styles for CTAs in your theme settings.

To navigate to the Theme Settings for Custom Styles go to “Theme Settings” → “Styling” → “Buttons” → “Custom Styles” → “Custom Style 01” (setup o1-04 individually).

theme-settings-custom-buttons

You can customize the text color, background, and border for the default and hover state for each button.

custom-button-defaults

 

CTAS in Rich-Text-Editors

Additionally, CTAs can be placed in Rich-Text-Editors:

The standard style “Primary Background” will be used. However, if you would like to use other styles, you can do the following:

Go to the CTA-Editor under “Marketing” → “Lead Capture” → “CTAs”. Edit your CTA and insert the following class in the field “Custom CSS class” under “Advanced Settings”:

Solid Primary → pwr-cta--primary-solid
Solid Regular → pwr-cta--regular-solid
Primary Border → pwr-cta--primary-border
Regular Border → pwr-cta--regular-border
Primary Background → pwr-cta--regular-solid-primary-background
Link → pwr-cta--link

Custom Button 01 → pwr-cta--custom-01

Custom Button 02 → pwr-cta--custom-02

Custom Button 03 → pwr-cta--custom-03

Custom Button 04 → pwr-cta--custom-04

If you would like to use a custom style, that you configured in the CTA-Editor, use pwr-cta--hubspot-style.

You can also choose between CTA sizes “Long”, "Small", "Large" by adding an additionally class pwr-cta--long , pwr-cta--small , pwr-cta--large  separated with a space.