Completing the HubSpot CMS for Marketers certification will help you understand the components used to build your website in CMS Hub!
Find all the resources we recommend for CMS Hub Basics.
Read more about templates vs themes in our blog post here.
The modules do not include an option to automatically connect HubDB.
To connect HubDB, we have developed an elegant coded solution that allows us to help you or your dev team to connect POWER modules with HubDB.
For instructions or help with connecting HubDB, please use this form to reach us with more details about what you're looking for.
We are working day-in and day-out to update the POWER Pro Theme. Generally, we are updating once a month.
Please, have a look at our changelog to read more about the updates we release.
Yes, we provide free lifetime support for all issues regarding the theme itself. Please note that custom features or functionalities are excluded from the free support.
We offer limited consultation, custom design, and development services based on an hourly rate.
We offer free lifetime update support.
Setting up a child theme guarantees you will continue to receive the updates via the marketplace!
Search only works if the page has been published, if you are using content staging you will not be able to test search settings until you have published your site/pages.
If you have search enabled in your global header, you can modify the search parameters in the content tab under "Search Settings":
HubSpot Knowledge-Base:→ Site Search FAQ
We highly recommend you set up a child theme of the marketplace POWER THEME before you start configuring and building your site.
This gives you, us, or a third party the ability to change code, extend it with specific requirements, or change styles that are not configurable at this stage, and retains the ability for updates to be applied from the parent theme as they are released.
Please keep in mind that you are not allowed to use the included images in any other context.
You can find them in the Design Tools in the main POWER THEME all images are located in the sub-folder named images.
We highly recommend using an SVG file for the logo since it is vector based.
If you don't have an SVG file, we recommend converting your JPEG or PNG to WebP (files are ~26% smaller).
A width of about 120 pixels works best in our theme.
Once you have purchased the theme, you can setup up to 5 child themes that each have unique branding within the same account.
CMS Hub Enterprise users can setup up to 10 child themes.
Setting up a child theme is critical to ensure theme updates are applied, using a child theme is highly recommended whether you are using just one or more than one.
The theme accesses the Google Fonts library (browse available fonts) by default. If you are using Adobe Fonts (formerly Typekit), another online font service, or if you have licensed font files, these can be added to your child theme to override the theme settings.
You'll need to know the location of your fonts (either the font library URL or the font file URL from HubSpot files for each font) and which font will be the base font and which will be the accent font.
More detailed documentation coming soon for setting up Custom Fonts on your own, in the meantime, if you are not a developer or unable to make the updates on your own, please submit a ticket and we'll help with the setup.
GDPR + IMPORTANT UPDATES
We are working on a solution within the theme to make this easier to control that will be included in an upcoming release.
There is a workaround solution we have created to allow your site to render the fonts without the Google API.
This requires configuring the Google Fonts as a Custom Font (following the instructions in the Custom Font Documentation) and modifying the Base and Accent font in the Theme Settings to default to Helvetica.
Please submit a ticket and we'll be happy to complete the custom font setup for you.
Most likely the wrong version of jQuery is configured in your HubSpot settings.
It looks like the wrong version of jQuery is configured in your HubSpot settings.
This happens because of an old bug. We fixed the issue and released an update on February 16. 2021.
Please have look at our changelog for further details. If you purchased before that date, please update the theme.
Some of the images used in the modules are configured as background-images. This way, we can guarantee that the area which should be filled with the image, is always covered completely.
The downside of this method is that depending on the dimensions of the container-element and the image itself, parts of the image can be cropped.
You can set the background position for the image which allows you to control where the focus of the image is, which becomes the new anchor point of the image when it is cropped for smaller screens.
In the section settings under "Style" you'll find an option set a background image/video, when this is enabled you will see an additional setting to control the anchor point for the image.
For example, if the focal point of your image is on the right, you could set the Background Position to right. Doing this would result in the left side of the image being cropped and retains the focal point of your image on the right side.
In this example, the focal point is the woman on the right.
By setting the background image to "right" the image would be cropped on the left side to retain the focus on the right.
By default the logo images are top-aligned with the option to vertically align (v22).
Please make sure that the logo images all have the same dimensions. We recommend a height of 200px. The width depends on the number of visible logos.
Animation settings can be set at the global level within the theme and can also be modified per module within the individual module settings.
We recommend you start with modifying the global settings before working with animation settings for individual modules.
You can access the theme settings via “Settings” → “Website” → “Themes” → “POWER THEME” or from the design tab of the HubSpot page-editor.
You can override the global settings for the modules and elements within the modules by clicking on Animation in the Content tab for the module.
The POWER Sec Video module allows you to add video to your page using a local file (mp4 saved in HubSpot Files) or a video hosted on YouTube (url).
If you are using a third party service or have an embed code, you can simply use the HubSpot Rich Text Module to add your video embed.
Once you have the rich text module added to the page, you will click on "Advanced" from the menu, then "Source Code."
This will open a dialog box which is where you will paste your embed code.
HubSpot allows you to define anchor links in rich-text fields and when adding links to the page, you can select the defined anchor links via Anchor on this page.
The list of anchor links will only show the ones you configured within the rich-text fields of that page.
This list does not analyze and show all available anchor links, including those setup within the module settings.
If you setup an anchor link via our POWER module and the field Anchor Link ID here:
You can insert this as Link to "URL" and simply add a # before the id you chose.
IMPORTANT - the id should be lowercase.
Anchor Link ID => test
Link to External => #test
HubSpot Knowledge-Base:→ Insert and Manage Anchor Links
There are some modules where the layout and HTML structure don't work with the code required for the shape divider to function properly.
These modules don't have the shape divider feature:
- Sec Content Split
- Sec Breadcrumbs
- Sec Values
- Pillar Page TOC
- Mini CTA/button
- Mini Icon
- Mini Tag
- All "Sub" Modules
Because "Sub" Modules can be combined to create a single section, it would create conflicts in the code to have shape dividers for these modules. An example is the Sub Team module.
The comparison table is a feature of the Power Sec Pricing module, you will find the option under layout:
Sometimes when new features get added to a module, we can't modify existing settings without impacting live sites for existing customers.
In these situations, we create a new setting that allows for the new features and flag the old setting as DEPRECATED.
Doing so avoids any disruption to existing customers and allows all customers to take advantage of new features.
GLOBAL ELEMENTS + DEFAULTS
The copyright text can be configured directly in the footer module. Please watch this video for further details.
You can configure the dimensions of the logos directly in the header module. Please watch this video for further insights.
Yes, the background color can be set by the color scheme choice field in the style area of the header module settings.
The color scheme colors can be set in the theme options in your HubSpot settings under Website --> Themes --> POWER THEME --> Colors --> Brand Colors
For modules that have default text, you will find a setting in the Content tab for "STANDARD TEXT / TRANSLATION" - default text items are text that have to be coded into the theme for the module to display correctly.
The Standard Text / Translation allows you to change the wording of the default text or add a translation for your language (translation.html also included to override these defaults across the entire child theme).
The Blog Listing and Blog Post templates can not be used to create a website page. They are setup with a different page type and need to be setup in your blog settings.
When you are setting up system pages, you will see at least 2 templates in the dropdown for POWER.
If you have more than one child theme or an old clone, you will see one template per instance of the theme.
When you click in the box to select a template, a search bar will appear. Search for your child theme by name, for example:
child theme = POWER x CompanyName
search = company
The templates will narrow down to the child theme, so make sure you search by the most unique word in your child theme name to easily select from the list.
With POWER you can also switch between the regular "page" header, "landing page" header, even the "blog" header or you can change the header style settings at the page-level using “Page Settings”.
Choose the header type under "Page Settings" then click the dropdown to select one of the global headers:
This is also where you can choose to Overwrite Header Settings to make the header unique for the individual page: