Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

pwr-icon-ctas

Calls-to-Action [CTA]

With HubSpot CTAs, you'll know who clicks which CTA and you can measure performance over time to optimize your click-through rate and increase conversions.

cta-example

Page Speed Impact

LOW

A simple button style CTA without personalization will have the least impact on your page performance.

MEDIUM

The more complex your CTA is configured (e.g. personalization by device type) or if you're using images in your CTAs or if your page has multiple CTAs, you could see an increase in page speed due to the extra code that has to load.

TIPS

Make sure your CTA images are optimized.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Only use CTAs where you are actively tracking conversion paths, otherwise, we recommend using Buttons that can be styled to match CTAs.

FAQ

What is the difference between a CTA and a Button?

A CTA is an object you can create in HubSpot that tracks user data associated with views and clicks, can be targeted by audience, and personalized to enhance the UX.

A Button is a clickable link on the page styled to look like a button, which can have the same appearance as a CTA without the additional code and features/capabilities

What are examples of CTAs?

Here are Examples of CTAs compiled by HubSpot.

Setup Instructions

When creating CTAs for POWER theme, the styles will be applied automatically by the theme or module settings, so you won't need to create the style in the CTA Editor.

Create CTAs for Your HubSpot Website Pages

Marketing  → Lead Capture → CTAs

To create a new CTA, click Create CTA and complete the steps.

create CTA in hubspot

Marketing  → Lead Capture → CTAs → Button Style

After you have configured the button content and link, you will need to change the dropdown for Button Style to No Link.

set CTA button style to link

If you would like to use a custom style that you can configure in the CTA-Editor, expand Advanced options then add this to the Custom CSS Class → pwr-cta--hubspot-style

  HubSpot Knowledge Base create CTAs in HubSpot

Helpful Links: Settings for Theme Styles

CTA Styles for POWER Theme

Theme Settings → Colors → POWER → CTAs

The global CTA styles can be configured in the Theme Settings, which will then be applied to all pages using your POWER child theme.

There are 5 default styles for Light Scheme and 5 default styles for Dark Scheme.

Light Background

cta-light

Dark Background

cta-dark

Theme Settings → Styling → Buttons → Custom Styles

You also have the option to design 4 unique custom buttons that are available throughout the POWER modules.

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

custom-button-defaults

Marketing → Website → Website Pages

Within the POWER modules, you will find a CTA selector in the module configurations.

edit call-to-action

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

cta style and size

CTA → CTA Style

Choose from the preconfigured CTA styles, including the 4 custom button styles.

CTA → CTA Size

Within POWER modules with CTA capabilities, you can also modify the size of the CTA with your choice of Regular, Long, Small or Large.

cta-sizes

How to Use CTAs in Rich Text Editors

CTAs can be placed in any of the Rich Text Editors available in any of the modules.

insert cta rich text editor

The default style is the Primary Background configuration for all POWER modules. If you would like to use a different CTA style, we recommend adding the Mini CTA module to easily add a styled CTA to your page.

How to Use Buttons in Rich Text Editors

If you would like to use other CTA/button styles within POWER modules, you'll need to configure them as a button (not a CTA).

To do this, open the Rich Text Editor and choose Advanced > Source Code

advanced-source-code-rich-text 

Copy and Paste this code where you would like the button to be, replacing the URL and button text with your link information.

You can use the list below to change the style of the button within the code by changing the div class in the code provided.

Button Style → CSS Class

Solid Primarypwr-cta--primary-solid

Solid Regularpwr-cta--regular-solid

Primary Borderpwr-cta--primary-border

Regular Borderpwr-cta--regular-border

Primary Backgroundpwr-cta--regular-solid-primary-background

Link → pwr-cta--link

Custom Button 01pwr-cta--custom-01

Custom Button 02pwr-cta--custom-02

Custom Button 03pwr-cta--custom-03

Custom Button 04pwr-cta--custom-04

You can also modify the div class further to adjust the button size, by adding one of these after the class above separated only with a space (default size is regular):

Longpwr-cta--long

Smallpwr-cta--small

Large pwr-cta--large

Next Steps

You've created compelling CTAs (and buttons), now we recommend learning the ins and outs of Anchor Links to improve the UX for your site visitors.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.