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 V35 released on December 21st 2023 – 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-mm_faq-2
FAQs

Have questions?
Search for 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


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

FLEXIBLE THEME SETTINGS

How to modify the theme settings to customize your HubSpot website

pwr-icon-theme-options

THEME SETTINGS

Manage the style settings for all of your pages in one place to create a consistent look for your website. 

theme-settings-example

FAQ

Can I use my brand font with the theme?

Yes, brand fonts can be configured locally as custom fonts that replace the base and accent font in the theme.

Setup Instructions

Theme Settings is the centralized location to edit all the global styles for your website.

There are two ways to access Theme Settings, depending on what you're working on, both are helpful to know how to find.

Settings  → Website → Themes → POWER x YOURCOMPANY child theme

If you're just getting started and haven't created any pages yet, you'll want to access from settings.

From your HubSpot Settings, on the left sidebar scroll until you reach the Tools section, expand the Website section and select Themes.

hubspot-settings-website-theme

Once selected, you'll see all of the themes available in your account - make sure you choose the child theme.

Page Editor  → Theme tab → Edit Theme Settings

If you're already building pages and need to make an adjustment, you can do so quickly and easily right from the page editor by clicking the Theme tab.

The theme tab is accessible in the original HubSpot Page Editor UI.

access-theme-settings

Page Editor  → Edit → Theme: POWER x YOURCOMPANY child theme

If you are in the new Page Editor UI beta, you can access the theme from the Edit menu:

hubspot-page-editor-edit-theme-settings


Setup Guide for Theme Settings

When you open Theme Settings, the initial page you see for POWER theme is our Setup Guide and provides you with an overview of how you can work with and modify theme settings. 

This template includes all the major page elements used in the theme so you can immediately see how your changes will look on your website.

Preview Pages in Theme Settings

At the top center of the page, there is an option for "View on" which gives you the ability to switch the page or template that you see to make it easier to preview how your changes impact your layouts for pages built with the theme you're working on or any of the POWER templates.

Here you have access to Published Pages, Draft Pages, and Templates (not including system templates).

theme-settings-preview-pages-templates


Theme Setting Organization

The options available for POWER theme are organized into design groups, each with sub-groupings to make it easy to find what you're looking for.

theme-setting-design-groups

The structure of POWER theme settings allows you to quickly adapt the theme for your brand and the flexibility to further refine the settings to adjust smaller details to reflect your brand style guide.

Every change you make is tracked and can be reset individually by clicking the reset icon for that item or group, or for the whole theme by clicking reset at the top.

reset-theme-settings

Basic Theme Setup

The quickest way to get the theme up and running is to make these updates:

  1. Set your Brand Colors under Colors → Brand Colors
  2. Set your Base and Accent Fonts under Fonts → Basic Setup
  3. Disable jQuery under Performance → Super Admin → jQuery

Once you make these updates, all of the styles will inherit these settings and you can start building pages. As your design starts to come to life, you can return to the theme settings to make further adjustments, like choosing a default form style or changing the corner radius for buttons.

Advanced Theme Setup

If you have a Brand Style Guide, you can work your way through each of the settings to make adjustments that align with your brand guideline.

Video Tutorial

Next Steps

Now that your theme has taken on your brand identity, you'll start building the navigation for your menus.

Next up:

NEVER MISS A POWER UPDATE

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