Theme settings let you control the global styling like colors, fonts, border-radius, effects as well as layout, performance, and SEO related settings for your POWER templates and modules.
You can access those settings via “Settings” → “Website” → “Themes” → “POWER THEME” or from the design tab of the HubSpot page-editor.
The page that initially opens with the POWER theme settings is called “Setup Guide” and provides you a short introduction on how to work with theme settings.
Available settings are also documented in the following sections.
With the ‘View on:’ option at the top center, you have the ability to switch the preview of your settings to other POWER templates or pages you created with this theme.
HubSpot Knowledge-Base:→ Edit your theme settings
The colors you define here apply to all elements included in your theme templates and websites. We recommend you start by defining your brand colors first.
Especially for the color settings we highly recommend using the ‘View on:’ option at the top center to switch and browse to the POWER templates or sites you already created with the POWER theme and to see how the color changes take effect.
The colors you define here will serve as a base and be the default for more specific color settings in sections “POWER” and “HubSpot Defaults” as suggested by the theme. Of course, you can perform further color changes in those categories.
Most of the POWER modules have the ability to change between a light scheme and a dark scheme. This section allows to configure, which color should be used for background, text, titles, links, forms, etc. for each scheme.
For each color scheme, you can also set the color to be used for bullet points in unordered lists (added in v23).
You'll set the color individually for Light Scheme:
And also for Dark Scheme:
Furthermore, the basic colors used for the different default CTA styles as well as navigation styles can be configured here.
HubSpot default colors
Some color settings are sort of independent of the POWER modules and the styles should of course also apply to the default modules. This section allows you to define the basic HTML settings like site background and links as well as the colors used by the standard HubSpot form module.
Setup your font-families in “Basic Setup” and define which font-style to use on specific elements under “Formatting”.
Here you can configure your base and accent font-family. Latter will be used for navigation, titles, menus, etc.
You can choose between available Google Fonts.
For each of the font-families, you can specify which font weights should be loaded. We recommend only activating font-weights that are used throughout your site. This keeps the file-size of your font-files low and is healthy for your page loading time 😉
Note: Please do not activate italic fonts, if the selected Google font does not offer italic weights! You can check that here: https://fonts.google.com/
Font smoothing allows you to activate anti-aliasing which makes the font appear more eye-pleasing and softer. Try out what you like more with your selected font 😉
Note: If you would like to use custom font files, it will require you to have created a child theme as described in the section Getting Started. After you have created the child theme, you can submit a ticket and we will help you to set up the custom fonts. If you are a developer or have code experience, you can review our Custom Font documentation.
Setup font sizes, font weights, line heights, and letter spacing for specific elements like headings or body text.
We recommend using the setup-guide template as a base to configure your font settings.
You can define how round you want your corners to appear for buttons, inputs, dropdowns, boxes, images, and checkboxes.
You can use “Base Border Radius” to define a base that gets derived by the other border-radius settings except for checkboxes.
The border-radius for checkboxes should not be much bigger than 6 pixels, because the checkboxes would then look like radio buttons 😉
You can define a style for the bullet point used for unordered lists here: "Styling" > "Lists" > "Bullet Points"
There are 8 choices available for bullet point styles:
- Arrow Thin
- Checkmark Thin
- Circle Outline
In this section, you can activate/deactivate the 3D box effect as well as the effect on buttons, where the background hover color is sliding up when hovering over the button.
In the blog theme options, you have the ability to change layout settings for your blog listing as well as blog posts.
Note that you have to publish your theme settings in order to see them taking effect on your blog listing and blog posts.
If you have not setup your blog yet, you will find instructions on how to do that in the blog section.
Here you can define layout related settings regarding your blog listing template. Options include:
- Show Filter Bar: Shows/Hides the bar containing the blog categories/tags
- Layout: Choose between a 1 column, 2 columns, and 3 column layout option
- Show Blog Post Author?: Displays the author name in the blog post previews, if activated.
- Show Blog Post Date?: Display the date in the blog post preview, if activated.
- Show Blog Post Reading Time?: Display the estimated (internally calculated) reading time of the blog post, depending on the length of the blog post content.
- Show Blog Post Summary?: Displays the excerpt text on the listing page.
- Get Summary from…: offers to pull the excerpt text either from the blog post directly or from the meta description of the blog post, which will be defined in the settings of the blog post editor.
- Truncate Summary: limits the length of the excerpt text to a given number.
- Pagination: We have provided the standard pagination method with arrows and a modern way of loading more blog posts by clicking on a “load more” button.
Here you can define layout related settings regarding your blog post template.
Note that you can also change the configuration of the blog post template modules while editing a blog post.
The global layout options in the theme settings include:
- Show Navigation Bar: Shows/Hides the navigation bar that adds links to the blog overview/listing and the previous and next posts.
- Show Related Posts: Shows/Hides the section suggesting related blog posts. The section is at the end of the blog post.
- Shift Header Menu: This allows you to position the main header menu items to fit the rest of the header layout you configured. The shift value is a percentage value and controls the padding starting from the left of the logo.
- Content Width: Increase or decrease the content width used on desktop devices
All POWER section modules have a standard top and bottom padding that is optimized to have the same height and visual consistency across all section modules. Additionally, you have the option to overwrite those paddings in each module with heights that you can define here.
The “Header Menu Breakpoint” defines the responsive breakpoint where your mobile burger menu switches to the header menu configuration you created for larger devices and desktops, e.g. dropdown, mega-menu, etc.
- Horizontal Padding: This controls the horizontal padding left and right of your content on smaller desktop and tablet devices as well as on mobile.
- Mobile – Reduce Spacing: All POWER modules reduce some of their paddings/margins for mobile devices. This factor controls how much those paddings/margins will be reduced by a percentage value.
- Mobile – Reduce Font Size: All POWER modules reduce most of their font sizes for mobile devices. This factor controls how much those font sizes will be reduced by a percentage value.
- Mobile – Minimum Font Size: Here you can define the font-size that should be used as the minimum value in case the reduction would lead to an even smaller value than this one.
Responsive Image Variants
The image widths you define here will be leveraged on respective device widths. Given that your image was uploaded with a higher resolution, those smaller images will be automatically created and the ideal sizes will be used for the different devices.
You could reduce the image widths here, which would lead to smaller file sizes and faster page loads, but also to poorer image quality.
Note: Generally, you should never upload images that are bigger than 4000 pixels in width or in height because for those the resize algorithm will not work and images will be loaded that are too big and will slow down your site.
- Retina image scaling: To accommodate high resolution/retina displays, there is a factor that you can configure here. Let’s say your image should display with 640 pixels on your site. Then it would be good to configure an image with that size. Retina displays however have a higher pixel density. You’ll want to use an image that’s 1280 pixels wide, which is what’s referred to as “2x”. While the graphic will still display on the website at 640 pixels wide, you are doubling the pixel density by using an image that’s double the size.
We recommend using a factor of 1.5 not 2 to achieve a better balance between image quality and page load times.
- Turn off Parallax on Mobile: Turning off the parallax on mobile reduces the calculations in the background, which can improve the scrolling performance on slower mobile phones.
In this section, you have the ability to add Schema.org to the markup of every page and additional Schema.org to the markup of blog post pages. This additional information can be leveraged by search engines or other applications.
Schema.org for pages includes:
Company name, logo, address, language from “Settings” → “Account Defaults” → “Branding” as well as “Email” and “Phone” configured in the POWER header
Schema.org for posts additionally includes:
The headline, image, author, publish date, abstract, text, URL, publisher, wordcount, tags, …
Animation on Scroll
If you are not familiar with animation on scroll, it is an effect on a website where the elements of the page animate as you scroll down.
In this section you have the option to turn on the animation on scroll effect and customize it according to your preferences. To do so, you can configure it globally in this area of the theme settings using the following parameters:
- Disable Animation on...: Disable the scroll animations on Mobile, Tablet or Mobile + Tablet here
- Default Animation Type: Choose one of the predesigned animations. Have a look at this demo page to see them all in action.
- Default Delay: The animation delay in ms. Choose a value between 0 and 3000 (3 seconds)
- Default Offset: Animations are triggered sooner or later. The unit for the offset is pixels.
- Default Duration: The duration of the animation in ms.
After configuring the global animation settings here, you will have the option to set the animation parameters for the modules and elements within the modules individually in the module settings.