POWER Theme Documentation

Documentations are never easy to read. We are constantly updating our documentation for you to get up and running fast and find what you need.

mockup-docu-09

Version 1.0.0 – 11-23-20

INTRODUCTION

We understand the importance of documentation. We also understand that documentation can be tiring. We have tried to make our instructions as pleasing as possible and provide the best way to start off with your POWER HubSpot theme.
We are always happy to receive feedback on how to improve our documentation 😉

POWER is a multipurpose HubSpot theme created to provide the highest visual and technical standards for webpages created with HubSpot CMS. Whether you are a developer, a designer, a marketer, or an untrained person, our POWER theme is basically a no-skills-required website generation tool for everybody.

Let’s create powerful websites!

GETTING STARTED

First things first, here is what you get:
After purchasing our theme, you will find all POWER templates and modules in your HubSpot portal. When creating a new website page or landing page, you can select “POWER THEME” to get a list of all available templates. Additionally, the templates are named with the prefix “POWER THEME” if you prefer to use the search functionality.
The theme contains a variety of website and landing page templates that serve as a good starting point to build your well-designed, converting inbound websites.
Visit our → demo-page to check out all the example pages and module configurations we created for you.

This documentation helps you to get started with the POWER theme. We also added links to articles of the HubSpot documentation in case you are not familiar with the basic concepts and usage of the HubSpot CMS. In order to get a deeper understanding of the theme, this document also contains a reference guide for all custom-coded POWER modules. All possibilities of customization are documented here.

IMPORTANT:
You have to take an important decision before you start building with any theme out of the HubSpot marketplace.

Option One:
I would like to receive automatic updates of the POWER theme for new functionality and bug fixes. Therefore, I stick to the native configuration options and functionalities it offers.

Option Two:
I prefer to use a copy of the POWER theme that in itself does not get any updates because I prefer to have the ability to change code, extend it with my specific requirements, or change styles that are not configurable at this stage. If there are important bug fixes I can transfer the respective code to the copy.

It is not easy to decide. If you are not sure what to do, don’t hesitate to contact us 😉

How to clone the theme?
Go to “Marketing” → “Files and Templates” → “Design Tools”. On the left-hand side navigation to “@marketplace” → “maka_Agency” → “POWER_THEME”. Right-click on “POWER THEME” and choose the option “Clone Theme”.

If you have any questions, feel free to reach out to us any time and we will do our best to provide the answers you need.

→ Get in touch

Additionally, HubSpot provides massive documentation on the HubSpot CMS and themes. We added entry points for you here and there to be able to increase your HubSpot skills where needed.

HubSpot Knowledge-Base:
→ Getting started with themes

THEME SETTINGS

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

 

Colors

The colors you define here apply to all elements included in your theme templates and websites. We recommend you to 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.

POWER-Theme-Settings_Colors

 

Brand Colors

The colors you define here will serve as a base and be derived by more specific color settings in section “POWER” and “HubSpot Defaults” as suggested by the theme. Of course, you can perform further color changes in those categories.

 

POWER Colors

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.
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.

 

Fonts

Setup your font-families in “Basic Setup” and define which font-style to use on specific elements under “Formatting”.

 

Basic Setup

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 that 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, we recommend you to clone the theme as described in the section “Getting Started”. After that, you can access and configure your custom fonts in the file “POWER THEME” → “Coded Files” → “_pwr-style-settings.css” with the HubSpot design manager.
The file contains instructions on how to do that. Do not hesitate to contact us if you need help with this.

 

Formatting

Setup font sizes, font weights, line heights, 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.

 

Styling

Corners

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 😉

 

Effects

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.

 

Blog

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.

Blog Listing

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.

 

Blog Post

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.

 

Layout

General

  • 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

 

Section Paddings

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.

 

Responsiveness

Header

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.

 

Spacing

  • 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.

 

Font Sizes

  • 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.

 

Performance

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 Images & Parallax on Mobile

  • 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.

 

SEO

Schema.org

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, …

Header

The POWER header is defined as a global element in all POWER templates. This means that your changes to the header will take effect on all pages derived from POWER templates.

If you are editing those pages in HubSpot’s page editor you can access the POWER Header module settings through the global content editor by clicking on “Content” -> “POWER Header”.

Page Settings: And what if the header style does not fit the site you are building?
With POWER you can also switch between regular header and landing-page header or change header style settings on page-level using “Page Settings”. The style settings allow you to switch dark and light schemes, make the header transparent, show a header top-bar, hide the CTA, or show a different one.

POWER Header

Logo

The header uses the pre-configured global logo from “Settings” → “Website” → “Pages” → “Branding”. If you want to overwrite the global logo upload or select a logo from the file manager. We recommend using an SVG-file logo for crisp visualization. Additionally, you can adjust the size of the logo. A width of about 120 pixels works best in our template.
The same applies to the sticky logo. The sticky logo appears on scroll down in the sticky header bar. You probably only need to configure a different logo here if the dark/light color scheme for the sticky header bar is different from the header bar.

Header Menu

After activating the “Header menu”-switch, a previously configured HubSpot menu can be selected in the drop-down menu.

Menus can be created and edited under “Settings” → “Website” → “Navigation”.

Header Top Menu

Activating the menu will show your selected HubSpot menu on the left-hand side of the top bar if activated.

Contact Information

Mouse-over on the phone icon shows the configured Phone and Email. Make sure the phone link is the same phone number, without spacings and without brackets.

Search

Turning on the Search switch will enable the search function in the header bar.

Language Switcher

Creating translated pages will automatically show the language switcher in the header bar.

CTA

Activating the CTA switch will open up the CTA selector where predefined CTAs can be selected. They will be shown in the right upper part of the header. CTAs can be created under “Marketing” → “Lead Capture” → “CTAs”. For more information on how to create CTAs please move on to the → CTA section of this documentation.

Social Icons

The social media accounts which will be shown in the header bar for the layout “Landing Page”, “Burger”, “Burger Only” as well as in the burger menu on mobile, can be configured here. E.g. the “Landing Page” Layout will result in the following:

If you use a top header you can additionally define the social icons to be used there instead or as well. The configured social icons will be shown on the right-hand side of the top bar.

Layout

The “Layout” area provides multiple header layouts. Three of them are for mega menus.

1. “Mega Menu”
Mega menu is as wide as the menu content width.

2. “Mega Menu – Content Width”
Mega menu is as wide as the content container width.

3. “Mega Menu – Screen Width”
Mega menu stretches over the full width of the window/screen.

The mega menus can be configured under “Settings” → “Website” → “Navigation”.

Other layouts are:

4. “Dropdown”
Classical dropdown menu where sub-menus fly out horizontally.

5. “Hamburger”
This layout reduces the menu to a hamburger icon which reveals the full menu in a sidebar.

6. “Hamburger only”
This shows all header elements in the sidebar only.

7. “Landing Page”
Landing pages pursue the goal to convert. The focus should be set to the content and links, menu entries or any other distractions should be reduced. In this layout only the configured social icons are shown.
However, you can also use a simple top-level menu here.

Top Header Option

 

Style

This section focuses on the visual appearance of the header bar. The following options can be configured:

1. Color Scheme Header: Light | Dark. The light scheme shows a light background color and a dark font. The dark scheme shows a dark background color and a light font color. The light and dark colors are pulled from the CSS-file. This option also affects the colors of the drop-down or mega menus.

2. Color Scheme Top Bar: Light | Dark. The light scheme shows a light background color and a dark font. The dark scheme shows a dark background color and a light font color. The light and dark colors are pulled from the CSS-file.

3. Transparent Header: Turning on this option removes the background color of the header bar. The underlying visual (background color, background image or video) will be visible.

4. Transparent Top Header: Turning on this option removes the background color of the header bar. The underlying visual (background color, background image, or video) will be visible.

5. Content Full width: This option stretches the header content to the window borders instead of the container width.

6. Fixed on Scroll: Activates the “sticky”-bar. If activated the header scrolls with the content.

7. Color Scheme On Scroll: Similar to Color Scheme, also the color scheme of the sticky bar can be styled in light or dark.

8. CTA Style: You can select the best fitting CTA style. You will find an overview of all the CTA styles → here.

9. CTA Size: configures the size of CTA button. Choose “Regular” or “Long”. Check → this section for a visual reference of the CTA sizes.

Footer

The POWER footer is defined as a global element in all POWER templates. This means that your changes to the footer will take effect on all pages derived from POWER templates.

If you are editing those pages in HubSpot’s page editor you can access the POWER Footer module settings through the global content editor by clicking on “Content” -> “POWER Footer”.

Note: By clicking on “Page Settings” in the content list of the page editor you are able to switch between the regular footer and the landing-page footer page-level.

You can choose between four different footer layouts in the Layout section of the module. Depending on your selection you can edit different configuration options that are explained per layout variation here.

Footer Full

This footer is recommended for showing a lot of information.

Options:

1. Show Company Info: Turning this option shows the configured text on the left-hand side.

2. Logo: Additionally, a logo can be shown above the company info text. If needed, the global company logo can be overwritten here.

3. Social Icons: If social icons are configured, they will be shown under the company info text.

4. Navigation: Configured navigations can be selected and shown here. To create a navigation, go to “Settings” → “Website” → “Navigation”.
Note that the number of columns in your navigation will affect the layout in the footer module.

For a full navigation we recommend 6 columns:

For a footer with logo/company info/social icons we recommend 4 columns:

5. Show subscription Form: This option shows a subscription form on the right-hand-side. The form can be created under “Marketing” → “Lead Capture” → “Forms”.
The form can only consist of one e-mail field. Note, that the number of navigation columns should be 2.

6. Legal Notice: is the text shown in the copyright bar, after the current year and your company name, which can be configured under “Settings” → “Account Defaults” → “Branding” → “Company Info”.

7. Navigation Legal: Additionally, a minimal menu can be selected and shown next to the legal notice.

8. Style – Color Scheme: Light or Dark color scheme. The light scheme creates a light background color and dark text color. The dark scheme creates a dark background color and a light text color. The color values are pulled from the main CSS-file.


9. Style – Content Full Width: stretches the footer content to the window borders, instead of the container borders.

10. Style – Background: A custom background color, image, video or gradient for the whole footer can be configured here. Jump to the → background options section to get a more comprehensive overview for these options.

Footer Reduced

This footer represents a more compact way of presenting a short about text and a simple menu:

Options:

1. Statement: This changes the about text next to the logo.

2. Menu right: menu selector for the top-level menu on the right-hand side.

3. Legal Notice: is the text shown in the copyright bar, after the current year and your company name, which can be configured under “Settings” → “Account Defaults” → “Branding” → “Company Info”.

4. Menu Legal: Additionally, a minimal menu can be selected and shown next to the legal notice.

5. Logo: If needed, the standard company logo can be overwritten here. Otherwise the pre-configured company logo will be rendered.

6. Style: All style configurations are identical to the one from → here

Footer Simple Link

This footer module shows a prominent link or email in combination with a minimal copyright bar and social icons:

Options:

1. Link Text: the shown link text. [email protected] in the example above.

2. Link – Link to: defines the type of link. One can choose to link to external pages, internal pages, files, email-addresses or blogs.

3. Link – Link: dependent on the previously selected link type, you can configured your link here

4. Link – Open link in new window: If selected the link opens in a new window or tab.

5. Link – Tell search engines not to follow this link: If activated, search engines won’t follow this link.

6. Use CTA instead: If you would like to use a CTA as link, create a no-style CTA with the class “pwr-link” applied in the CTA settings. The link configured in 1. – 5. will be ignored.

7. Legal notice: is the text shown in the copyright bar.

8. Social Icons: configure social media icons, which will be shown below the copyright notice.

9. Layout – Centered: If activated the content is centered, otherwise left-aligned.

10. Style: All style configurations are identical to the one from → here.

Footer Copyright Bar

This footer module is the most reduced, showing only the copyright bar with an additional simple menu next to it:

Options:

1. Legal Notice: is the text shown in the copyright bar.

2. Menu Legal: Additionally, a minimal menu can be selected and shown next to the legal notice.

3. Style: All style configurations are identical to the one from → here.

CTAs

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 CTA 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

Dark Background

Primary Background

CTA Size

offers the following 2 options:

CTAs in Rich-Text-Editors

Additonally, 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

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

If you would like to use CTA size “Long”, you can additionally add the pwr-cta--long separated with a space.

Forms

If you would like to use default HubSpot forms, you can configure additional styles in the POWER theme settings here:
→ Theme Settings

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

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

HubSpot Forms in POWER

Using the POWER Form Module the configuration panel offers many layouts:

1. Horizontal (50/50)

2. Horizontal (60/40)

3. Horizontal Boxed

4. Vertical (wide)

5. Vertical (narrow)

Menus

HubSpot Knowledge-Base:
→ Set up your site’s navigation menus

POWER uses HubSpot’s Advanced Menus. To navigate to the Menu-Editor go to “Settings” → “Website” → “Navigation”. There you can create new menus as seen in the screenshot below:

Once a menu is created it can be embedded in the modules through the menu picker in the module configurations:

Module Types

The POWER Theme is based on three different main types of modules: Section Modules, Sub-Modules and Mini-Modules.

Section Modules

Section modules represent a full section on a website with all the necessary options directly within the module to style and layout the content. These modules allow fast website creation since they come with different layout options and also switching between different layout options can become handy. Additionally the section modules allow to configure background images with optional parallax effects, background videos with overlay or even gradient overlays and many more.
Some of the section modules also allow to have tabs, filters, table of contents and more interactive functionalities.

Sub-Modules

Most of the elements of the section modules also come as sub-modules. Sub-modules are very flexible and can be used in various ways leveraging HubSpots new drag-and-drop area to its full potential.

Mini-Modules

Mini modules are more granular modules, but also very flexible. Some of the mini-modules are CTA, Tags or Icon.

General Module Options

The section modules share numerous module options which are listed below:

Intro to Title

This represents the text above the main title.

Title

Main Title

Title – Header Type

Different header styles varying from h1 to h4.

Description

Text below the title. Often used as a descriptive text

Color Scheme

Light or Dark color scheme. The light scheme creates a light background color and dark text color. The dark scheme creates a dark background color and a light text color. The color values are pulled from the main CSS-file.

Centered

Centers the whole content including text-alignment.

Background

Configure your custom module background here. Choose between: solid background color, background image, background video and background gradient.

Background-Color

Define the background color by the color hex code or use HubSpot’s color picker. Additionally the opacity of the background color can be configured.

Background-Image

Add a background image through HubSpot’s image picker.

Additionally, you can change the background-image position and configure the background image as a parallax image.

Furthermore, we have created the option to add an overlay to the background image, as a single color or gradient. You should use an opacity for the color or gradient, if you want the image to be visible in the background. For the gradient, you can either use a opacity per gradient color or an overall opacity with “Overlay Gradient Opacity in %”.

Background-Video

Adding background videos is also possible. You can embed self-hosted videos or YouTube videos. If a video is configured, it will overwrite the background image.
Self-hosted *.mp4 videos can be embedded through the file-picker:

Please make sure that the file size is not too big. A general rule of thumb is to keep reducing the file size until it starts to noticeably be degraded. Try to export videos in 720p and with a bitrate under 700kb/s ( preferably 500kb/s ).

YouTube Videos can be included through the YouTube Link or ID. If a YouTube video is selected, the YouTube Video will overwrite a configured self-hosted video.

Background-Gradient

All configurations needed for a 2-color gradient are provided: gradient direction, first gradient color and second gradient color.

Padding Top/Bottom

We have provided multiple pre-defined spacings for each modules top-padding and bottom-padding.
Choose between Standard (~135px), None (0px), Small (40px), Medium (80px), Large (140px) or First Section With Header.
First section with header is used, if this module is the first module after the header module. This will add more spacing regarding the header height automatically.

Standard Text / Translation

Many of the POWER modules offer the option to change or translate standard texts. Standard texts are static texts which are used in the modules code.

The example below showing the blog post preview module has two translatable/editable static texts: “min read” and “start reading”.

Both entries can be edited in the module configurations:

Which yields the following result:

This option gives you full possibilities of translating your modules directly, including the static texts.

Sub Modules

Sub Accordions

Accordion

Define a set of accordion-elements you want to show in one column of your website layout using the following options:

  • Title: Represents the “questions” of the accordion element
  • Description: Represents the “answer” of the accordion element.

Style

Each of the accordion sets in the sub-module can be styled using the following options:

  • Color scheme: switch between dark and light color scheme
  • Custom Box Background Color: Set a custom color for the accordions here. If left blank the default colors for the dark and light scheme will be used.

Sub Image Boxes

Image Box

Define the content of the image box here using the following options:

  • Image: Represents the image shown in the image box
  • Intro to Title: Pre-title for adding secondary information
  • Title: Title of Image Box
  • Description: Text shown below the image box or on hover (depending on chosen style)
  • Link: Add a link to the image box. This is optional
  • Use internal URL instead: Use this option to use anchor-links
  • Link Icon: Icon shown next to the link in the image box

Layout

  • Centered: switch between left and centered content in the image box
  • Image Height: Set a custom height of this image box

Style

  • Box Style: Switch content overlay and content below options
  • Color Scheme: Switch between light and dark color scheme
  • Smaller Font Size and Padding: Activate this for a smaller representation of font size and padding
  • Image Background Position: Set the position of the background image here

Sub Pricing Tables

This sub-module allows you to create single pricing tables (1 column) which can be combined to represent a full pricing comparison table using the following options:

Price Table

  • Title: Title of Pricing Table
  • Description: Text shown in the pricing table describing the offered product
  • Price: Price of the offered product
  • Feature: Features of product
  • CTA

Layout

  • Layout: Choose between full and reduced layout (examples see below)

Style

  • Table Style: Only visible if full layout was selected. Gives you further style options for the full layout.
  • Highlighted: Activate this to color the pricing table in a highlight color
  • Recommended: Activate this a recommended badge above the pricing table
  • Custom Box Background Color: Gives you the option to set a custom background color for the pricing table
  • CTA Style: choose among the predefined CTA styles
  • CTA Size: choose among two different CTA sizes

 

Reduced layout

 

Full Layout

Sub Services

Service

  • Title: Title of Service
  • Icon: Iconpicker for icon shown in box, above title or next to title, depending chosen layout
  • Icon – Image: Same as above but with custom uploaded image.
  • Description: Text shown in the service box/element
  • Link: Optionally add a link to the service box/element

Layout

  • Layout: Choose between Icon left and boxed layout (see examples below)
  • Centered: Switch between centered and left aligned content options
  • Always show link?: Unhides the service link by default

Style

  • Color scheme/Box color scheme: Switch between dark and light scheme
  • Icon color: Set your custom icon color. By default the icon color corresponds to the ones given by the dark and light scheme
  • Custom Box Background Color: Set your custom box color for the boxed layout. The default colors are given by the dark and light scheme
  • Icon Size: Set your icon size in pixels

Layout variants:

Sub Simple Listing

The simple listing element can be used to show open positions/jobs and in the press page to show a list of articles / downloads and many more.

Listem Item

  • Title: Title of Simple Listing
  • Description: Text shown in the simple listing, e.g. to describe the job position
  • Link: Add a link to the simple listing. This is optional
  • Link Icon: Icon shown next to the link in the simple listing
  • Additional Info: Shows a custom information built using a text and an icon

Layout

  • Layout: Choose between box and text layout (see examples below)
  • Centered: Switch between left and center aligned content
  • Always show link?: Unhides the link for the text layout by default.

Style

  • Color Scheme/Box color scheme: Switch between dark and light color scheme
  • Box Color: If the box layout is selected, you will see this option to set a custom box color here

 

Layout variants

Sub Stats

With this sub-module numerical stats can be shown in a simple way. The numbers are animated (counting up) once the section is visible to the user.

Stat

  • Number: Set the number, which should be shown and animated
  • Suffix: Optional number suffix, e.g. 12.34M or 12.34k, 12.34%, etc.
  • Title: Text shown below the number

Layout

  • Centered: Switch between center and left-aligned content

Style

  • Color scheme: Switch between dark and light color scheme. For the dark color scheme the text will be shown in a light color and vice versa.
  • Text Color: Optionally set a custom font color here. If no color is set, the default colors defined by the two color schemes will be used.

 

Preview:

Sub Steps

This sub-module creates a representation of various information. The content contains an element (number, icon or graphic), a title and a description.

Step

  • Title: Title of Steps sub-module
  • Description: Text shown in the steps sub-module used to describe this information
  • Icon: Used only for icon-layout. Choose an icon from the icon-picker provided.
  • Icon Image: Alternatively, use a custom uploaded image or image icon.
  • Step Value: For step-counter-layout use this number to numerate the different steps

Layout

  • Layout: Choose between step-counter, icon-layout, image-layout or text-only-layout (see examples below)
  • Centered: Switch between center and left-aligned content

Style

  • Color Scheme: Switch between dark and light color scheme.
  • Overwrite title color: Set custom color for the title. Leave blank for default colors defined by the dark and light color scheme
  • Icon size: Set your custom icon size, if icon-layout or image-layout is selected.

Step-layout:

Sub Team

This sub-module is used to show a team member. The team box can be linked to a team-member page, which we also provided in this theme.

The following options can be configured:

Team

  • Name
  • Image
  • Job Title
  • Description: Can be used as a bio text. Only applies to the full layout.
  • Contact: If activated, you can define many contact options (phone, mail, social media, etc.). These will be shown only in the full layout.
  • Link: Optionally you can link the team member box to another page.

Layout

  • Layout: Choose between full and reduced layout (see examples below)
  • Centered: If activated the content is centered, otherwise left-aligned.

Style

  • Color Scheme: Switch between light and dark color scheme.
  • Image Vertical Position: Shift the image horizontally by this value in percentage.
  • Image Horizontal Position: Shift the image vertically by this value in percentage

 

Layout variants:

Sub Video Box

The video box sub-module provides a visualization for video libraries, webinar pages and sections.

Video Box

  • Title: Title of Video Box
  • Description: Text shown in the video box describing the video
  • Link: Optionally add a link to the image box. The link only works, if no video is selected.
  • Image: Image shown in the video box
  • Video *.mp4: Select an mp4 file from your file manager or upload a new mp4-file. The video will open in a lightbox.
  • Video – Youtube: Simply copy paste a youtube video link here. The video will open in a lightbox.

Layout

  • Centered: Switch between centered and left-aligned content.

Style

  • Box color scheme: Switch between dark and light color scheme
  • Custom Box background color: Set your custom box background color
  • Image background position: Positioning of the image shown in the video box. Select among left, right, top, bottom, center

 

Preview:

Mini Modules

Mini CTA

Other than HubSpots default CTA module this module offers theme related styling options and style sets for the CTA. Feel free to use the following options:

CTA

Select a CTA, generated using HubSpots CTA editor. Please note, that while creating the CTAs, you would need to select “no style” in HubSpots CTA editor.

Layout

  • Alignment: Choose an alignment within the DnD column for this CTA: Left, Center, Right
  • Margin Top: Optional custom margin at the top
  • Margin Bottom: Optional custom margin at the bottom
  • Margin Right: Optional custom margin at the right
  • Margin Left: Optional custom margin at the left

Style

  • CTA Style: Choose one of our predefined styles for the CTA. Solid Primary, Solid Regular, Solid Regular for Primary Background, Border Primary, Border Regular, Link
  • CTA Size: Defines the width of the CTA. Regular, Long and Full Width. Full-Width spans the current column

Preview:

Mini Icon

Icon

  • Icon: Choose an icon from the icon library
  • Icon Image: Upload your custom icon as jpg, png or svg.

Layout

  • Icon Type: Choose icon from icon library or custom uploaded image icon
  • Alignment: Sets the alignment of the icon within the column
  • Margin Top: Adds an additional, optional margin to the top
  • Margin Bottom: Adds an additional, optional margin to the bottom
  • Margin Right: Adds an additional, optional margin to the right
  • Margin Left: Adds an additional, optional margin to the left

Style

  • Icon Style: Choose among no background/shape, circle and square style.
  • Border Radius: If square is selected, you can round the corners of the square using this value in pixels
  • Color Scheme: Switch between dark and light color scheme
  • Background Color: Defines the background color of the icon shape
  • Icon Size: Sets the size of the icon in pixels
  • Icon Color: Sets the color of the icon itself (does not apply to image icons)
  • Custom Padding: Sets the padding within the icon shape

Preview:

Mini Tag

Tag

  • Text: Text shown in tag.
  • Icon: Select an icon from the icon library
  • Icon Image: Upload your custom icon as jpg, png or svg.

Layout

  • Layout: No icon, Icon, Image
  • Alignment: Sets the alignment of the tag within the column
  • Full-width: Sets the width of the tag to the column width in the DnD area

Style

  • Color Scheme: Switch between dark and light color scheme
  • Background Color: Defines the background color of the tag
  • Icon Size: Sets the size of the icon in pixels
  • Icon Color: Sets the color of the icon itself (does not apply to image icons)
  • Custom Padding: Sets the padding within the icon shape

Preview:

Section Modules

Section Accordions

The accordion module can e.g. be used for frequently asked questions (FAQ).

Accordion Questions:

Click on “Add” or edit the existing question to get to the question and answer editor.

Once you are done editing the question and answer, click on “Back to Section Accordion”. The questions will be aligned automatically if a 2-column layout is selected.

Layout:

1 Column Layout

2 Column Layout

Section Breadcrumbs

On your website, breadcrumb navigation is a way to show the users their current location and how they got there. It also helps your visitors to find high-level pages faster, if they landed on your page from a direct link or search result.

The following options can be configured in this module:

Breadcrumb:

  • Breadcrumb Title
  • Link

Note that multiple breadcrumb element can be created representing the depth of the breadcrumb navigation.

Section Client Logo Slider

Client Logos

For each client logo, add one entry in the option above.

Upload or add an image from your file library. Once uploaded, width and height can be adjusted manually. We suggest a width of 300px. Also make sure that all your logos have the same size.

Autoplay

If active, the client logo slider rotates automatically. The autoplay duration can be set manually in milliseconds.

Navigation – Arrows

Turns on navigation arrows on the sides of the slider.

Navigation – Bullet Points

Activates bullet points below the slider:

How many images should be shown?

Number of logos that should be shown at once / per slide.

Section Company Values

3-column section row to e.g. show the mission, vision and manifesto of your company.

Values

Edit texts and background images through the value entries.



Section CTA

CTA

Choose the predefined CTA here. CTAs can be configured through HubSpot CTA-Editor. Jump to
→ this chapter to learn how to create HubSpot CTAs. Once a CTA is selected one can edit the CTA directly by clicking on “Edit call-to-action”.

Layout

We have provided multiple CTA Layouts. Of course, each of the layouts can be customized by changing the color theme and the → background options.

Horizontal:

Vertical:

CTA only:

Section Device Mockup

Mockup

Select the mockup graphic you want to show in this module. Make sure the image has a transparent background.

Form

If a form should be included next to the graphic the form switch needs to be activated. Once activated, select a form.

CTA(s)

One or more CTAs can be added through the CTA picker here:

Layout

Choose if the mockup graphic should be placed on the left-hand-side or right-hand-side.

Full width

Activating this will position the mockup graphic at the border of the window as seen in the samples above.

Mockup Width in %

Actual width of the mockup shown on the website in percent.
Note that this value can be set such that the graphic overlaps with the content area. Some mockup graphics have huge shadows in the background. With this method the shadow is positioned behind the content area.

Max Mockup Width in Pixel

For very large screens we included this parameter to limit the size of the mockup. Make sure the entered value is in pixels.

Content Width in %

Actual width of the content area shown on the website in percent.

Hide Mockup for Mobile

Activating this switch hides the mockup graphic on mobile screens.

Section Form

This module is used to embed HubSpot forms. HubSpot forms can be created through the HubSpot form editor. Jump to → this Section to learn more on how to create HubSpot forms.

Form

Select the form which should be shown in this module.

What will a visitor see after submitting your form?: You can either choose to redirect to another page or display an inline thank you message.

Furthermore, you can add the form to an existing workflow. Note, that this functionality is deprecated by December 5th 2019, because contacts are not being enrolled in the set workflow.
To enroll users into a workflow based on form submission, set the workflow’s enrollment criteria to be triggered by a form submission. This is done directly in the workflows tool itself.

Another option is to send a follow-up email after form submission. Simply select your configured follow-up email here.

Layout

Horizontal 50/50:

Horizontal 60/40:

Horizontal Boxed:

Vertical Wide:

Vertical Narrow:

Section Hero

This module can be used as the intro-section. Multiple applications with this module are possible. It can be used as a hero section or as a title bar. Please note that this module can only be used once per website. Multiple hero modules on one specific site are not possible.

Height

Choose between different heights – large, regular, small and extra small.

Large

Regular

Small

Extra Small

Title Extra Large

Activating this option will provide the extra-large layout seen below.


Description Large

This switch increases the size of the description text below the title in the hero section

Regular:

Large:

Basic Information

Our template also allows to place basic information below the hero title, consisting of an icon and a short text.

This is the result you get from the configuration above.


The hero module can also be used to generate more creative section as seen below.

Only custom background image.

Only title.

Note: In this last example the color of “SERVICES LOREM” was set with css inline styles. This is not an official option of the template.

Section Image Boxes

This module is very versatile and can be used in many different ways – gallery, portfolio overview and many more.

Layout: 6 different layout options are possible

3 Column Grid

3 Column Grid Smaller Height

4 Column Grid

3 Column Masonry

3 Column Masonry Smaller Height

4 Column Masonry

No Gutter: This option removes the spacing between the columns and rows.

Box Style: Puts the text content above or below the box.

Box Style – Content Below

Box Style – Content Overlay

Smaller Font Size and Padding: reduces the padding and font size of the text content.

Use Overlay on Box Front: adds a transparent overlay on the boxes to make the text content above more readable.

Hide Info on Box Front: Removes all text content in the front page. Text will only be shown on hover.

Overwrite Box Colors: This enables you to change the background color and font color of the box style: “Content Below” with box style variant “with Background”

Use as gallery? With this option, the images are shown in a lightbox popup, when the user clicks on them.

Filtering: Comma separated categories can be configured for each image box. If image boxes shall be grouped in the same category, make sure to specify the same category names.
You can choose to show the category “All” and which category should be active on page load in the module settings.

Section Image Slider

This module represents a simple image slider, i.e. it can be used for image slideshows.

Image: Add here the images which should be displayed.

Autoplay: If turned on, the image slider rotates automatically.

Autoplay – Interval Timeout: Autoplay time in milliseconds.

Navigation – Arrows: Adds arrows on the sides for navigating through the image slider.

Navigation – Bullets: Adds Bullet points below the image slider

Navigation – Bullets as Overlay: If activated the Bullets are shown directly on the images.

Layout: We offer three different layouts for the image slider.

Mulitple:

One by one / One by one (custom height):
If One by one is selected the image is shown in the same proportions as given. The Custom height option offers additionally a height parameter to enforce image to a specific height.

Section Map

This module is used to show Google maps, optionally with additional information. This module is based on using a Google maps embed code or preferably using an embed code generated with “Snazzy Maps”. → snazzymaps.com
We recommend Snazzy Maps because you can easily configure your map, add custom styling, markers, etc.

To be able to generate your specific embed code, follow these steps:

1. Visit the snazzy maps website: → snazzymaps.com

2. Create an account on snazzy maps.

3. Click on “Build a map” in the main navigation and follow the steps there.

4. Once you are done click on “View Code”

5. You will be asked to enter a map name and a google maps API key. Follow the instructions here: https://developers.google.com/maps/documentation/javascript/get-api-key to create your own API key. This is always needed to embed a Google Map on your own website. If your API is not valid Google will block the rendering on your website.

6. Once you finish entering the needed information, you can copy the embed code and paste it in the module settings.

Contact Info: Once you have embedded your snazzy maps code, one can add contact information which can be displayed in many ways. You can add your address, email and phone number.

CTA: Additionally, you have the possibility to add a HubSpot CTA.

Form: If you want to show a form instead of the contact info, activate this switch and select the desired HubSpot form.

Layout: We offer 5 different layouts:

1. Map left:

2. Map right

3. Map only

4. Content-Box left

5. Content-Box right:

Section Height (px): Define the height of this module in pixels. This value applies on the desktop version. For smaller screens and mobile versions, the height is scaled by the content.

Section Media Content Split

The media content split module is used to render a module which shows a 50:50 split-screen layout.

One side of the module always contains a single image or video. The video can be uploaded in mp4 format in HubSpot or one can link videos from YouTube.

The other side can include a title, description combination, a testimonial quote with a company logo, CTAs or Social Icons.

Is a testimonial: If turned on, the description will be rendered as a quote and additional parameters will appear, such as name and job title.

Name: Name of the quoted person.

Job Title: Job title of the quoted person.

Image / Logo: Include an image here, i.e. company logo of the quoted persons company.

Social- / Contact Icons: Create and define one or multiple icons. You have the option to link the icons, i.e. for social accounts.

CTAs: Select one or multiple HubSpot CTAs.

Layout: Here you have the option to flip the order of the content. Either show the image/video on the left or right.

1. Image Right + Testimonial

2. Image Left + Title + Description + CTAs

Section Pricing Tables

The POWER template offers a pricing table module. This module can display up to 3 pricing blocks in one row.

The specific pricing boxes need to be created separately here:

Creating and editing these pricing boxes will yield these parameters:

Title + Description: This is the intro part of each box.

Price: The main price of each pricing box. Numbers and Text is possible.

Feature: Each parameter set represents a feature.

Each feature has the option to be deactivated:

CTA: Add one HubSpot CTA.

Highlighted: If activated, the pricing box is highlighted in the accent color.

Recommended: If activated, a “recommended” tag is displayed above the pricing box.

Layout: Defines the layout of the pricing boxes.

Reduced: shows only the title, description, price and CTA

Full: shows the pricing boxes with all the pre-configured features

Table Style: Defines different table styles for the “Full” layout version

Style 1:

Style 2:

Of course, there is also a dark version:

Combinations with background images and videos are also possible, as in almost every module.

Section Schedule

This module offers a visualization of a time schedule. One can create daily schedules for multiple days, implemented as tabs.

If you want to use more than one daily schedule, make sure to activate the “Use Tabs?” switch before.

Tab: Create one set for each day.

Each configured set offers the following options:

Each event has a deeper set which can be configured as:

Dark version of the schedule module.

Section Services

This module visualizes services in 4 different layout options. Firstly, all services need to be defined here:

You can configure each service with the following options.

1. Icon: Choose an icon from the predefined list of icons

2. Or upload a custom image instead:

3. Title + description:

4. Link: If needed, you can link each service to another content page, external page, files, email addresses or blogs/blog posts.

Layout: We have provided multiple layout options for this module

1. Icon Top + Border

2. Icon Left

3. Boxed

Section Simple Listing

In the POWER template pack the simple listing module is used as an overview for the career-page to show open positions/jobs and in the press page to show a list of articles / downloads. However, these are just examples.

The following options can be configured.

1. List items: These are sub-elements which contain further configurations for the single elements of the list.
One can define a title, description, the link of the element, additional custom information (custom icon + custom text) and a category.

2. Layout: Choose between the following layout options:

1. Box

2. Text

3. Box Color: Additonally, we have provided the option to overwrite the box color (box layout).

4. Different Filter Style: One can also individually change the style of the category bar.

Filtering: Comma separated categories can be configured for each element. If elements shall be grouped in the same category, make sure to specify the same category names.
You can choose to show the category “All” and which category should be active on page load in the module settings.

Section Stats Counter

With this module multiple numerical stats can be shown in a simple way. The numbers are animated (counting up) once the section is visible to the user.

The stats can be configured here:

Each element contains the following options to configure a stat:
1. Number: The number which will be shown
2. Suffix: The suffix of the stat. Leave blank for no suffix.
3. Title: The name of the title shown below the number.

Section Steps

This module creates a multi-column layout of various information. The information in each column contains an element (number, icon or graphic), a title and a description.

The following things can be configured in the design manager.

1. Step: Here the content of each column is defined

Each element contains the following options:
1. Title: The title of each step
2. Description: The subtitle/description which is shown below the title
3. Icon: The icon shown in the icon layout of this module
4. Image: The image shown in the image layout of this module

2. Layout: 4 layout options are possible:

1. Step Counter

2. Icon

3. Image

4. Text only

Section Team

This module is used to show the team members of your company.
Each team member can be linked to a team-member page, which we also provided in this template.

The following options can be configured:

1. Team: The information for each team member is stored in these elements.
IMPORTANT: If you would like to use tabs, make sure to activate the tab-layout BEFORE creating the team members.

Each element contains the following options:
1. Name
2. Image
3. Title
4. Description
5. Contact: Activating this option, shows a variety of contact information for the “full”-layout version.
6. Link

2. Layout – Tabs: Activating this option enables a tab-system, where the team members can be nested additionally. The title of each tab can be defined individually in the tab-section:

3. Layout: We have provided the following 2 layout-options

1. Full (Tabs or without tabs)

2. Reduced (Tabs or without tabs)

Section Testimonial

For customer testimonials, we have provided multiple layouts.

The following options can be configured in the testimonial module:

1. Testimonial: All content/information for the testimonials are stored in this sub-elements

Each sub-elements contains the following options:
1. Name
2. Job-Title
3. Image: Can be used for portrait photos of the quoted person or company logo
4. Quote

2. Autoplay: Automatically rotate through the testimonial slider after the defined autoplay interval time

3. Arrows: Turns on navigation arrows of the testimonial slider

4. Bullets: Shows bullets below the testimonial slider as an additional navigation aid

5. Layout: We offer the following 5 layouts:

One by One – Style 1

One by One – Style 2

Multiple

2 Column Listing

3-Column Layout

Section Text

For basic text sections we have created this text module. The text module offers multiple layouts. Each paragraph text can be customized using the rich-text editor.

The following options can be configured in the module:

1. Title, Title Header Type and Content. “Content or Left Content” is used for 1 column layouts. For 2 column layouts it represents the left side. An additional rich-text field “Right Content” will be shown for 2 column layouts and the layout “Title Left, Text right”

2. Layouts: We have provided the following 6 layouts:

Title top, Text 1 column

Title top, Text 2 column

Title left, text right

Text Tabs – Vertical centered

Text Tabs – Vertical

Text Tabs – Horizontal

Text Tabs

The text tabs module offers the option to add tabs to the section. The tabs can be placed horizontally or vertically.

The following options can be configured in the module:

 

Here, the following options can be configured:
1. Title
2. Title Header Type
3. Left and Right Content (paragraphs)
4. 1 / 2 column layout option. Activating the switch will switch to a 2-column layout.

2. Layout: The following 3 layout-options are possible:

Text with TOC / Pillar Page TOC

The Table-of-Content Element offers the possibility to have a floated overview on the side of the website or an overview above the content. The contents of the TOC are pulled automatically from the page/module content.

This element is used in two different modules:

1. “Pillar Page TOC”: This module was designed for the usage on pillar pages. The whole content of the pillar page is covered if this module is included on the page somewhere.

Here, one has two options:
Positioning the TOC above the content

… or fixed at the side of the webpage

2. “Text with TOC”: Only the content created within this module is covered in the table-of-content.

Note that either module can only be used once per template / webpage.

Section Timeline

This timeline module can be used for your company history. It allows to show images, title and description for each time step. The time steps are positioned left and right, automatically.

The following options can be configured:

1. Timeline: All the essential information for each time step is stored in one of these sub-elements

The following options can be configured here:
1. Title
2. Description
3. Image
4. Image Background Position: Center, Left, Right, Top, Bottom

2. Centering: One has the option to center the whole section and/or the timeline content elements.

Section Video

This module offers different ways to visualize videos on your website.

There are two ways to configure your video:
1. For self-hosted videos, select your *.mp4 video via the file manager of HubSpot.
Please make sure that the file size is not too big. A general rule of thumb is to keep reducing the file size until it starts to noticeably be degraded. Try to export videos in 720p and with a bitrate under 700kb/s ( preferably 500kb/s ).

2. If you would like to embed your video via YouTube, use the YouTube link or ID. The YouTube video will overwrite a configured self-hosted video.

If the user clicks on the title or button, the configured video opens in a light box. Of course you can configure an additional muted video in the background like in all of our section modules.

Other than that, the following options can be configured:

1. Layout: We have provided 3 different layouts for the video section:

1. Video Title

2. Button only

3. Content: Video with text overlay

2. Section Height: Sets the height of the video section in pixels.

Section Video Boxes

The video boxes module provides a visualization for video libraries, webinar pages and sections.

The following options can be configured in this module:

Video Box: All the necessary information for each webinar preview is stored in these sub-elements.

The following options can be configured here:

  • Title
  • Description
  • Link
  • Image

Filtering: Comma separated categories can be configured for each webinar. If webinars shall be grouped in the same category, make sure to specify the same category names.
You can choose to show the category “All” and which category should be active on page load in the module settings.

Blog

HubSpot Knowledge-Base:
→ How to apply a theme template to your blog

Setup

In order to use blog and blog post templates one must configure them in the settings area. Simply navigate to “Settings” → “Website” → “Blog” → “Templates”. There you will find two drop-downs to select a Blog Post template and a Blog Listing template. Feel free to choose the respective POWER Theme templates here.

Additionally, you can set other parameters, like the number of posts on the listing page, etc.

Of course, all the blog listing and blog post templates are fully configurable. The templates are built using the following modules.

Previous/Next Navigation

At the top of each blog post you will find a small navigation area. This allows the user to navigate to the previous or next blog post. By clicking on the icon in the middle the user is led to the blog listing area.

The links are included automatically, so no further technical configurations are needed.

Regarding the design, many options are possible. A light and dark version is available. Additionally, one can define custom colors. The background color can be set directly in the module settings..

Dark Version:

Light Version:

Blog Listings

We offer many options for blog listings which can be configured in the theme options under “Settings” → “Website” → “Themes” → “POWER THEME” → “Blog” → “Blog Listing”. Read more about the theme options → here.

The options include:

  • Show Filter Bar: Shows/Hides the bar containing the blog categories/tags
  • Layout: Choose between a 1 column, 2 column 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 post by clicking on a “load more” button.

Have a look at the layout options:

1-Column:

2-Column:

3-Column:

Blog Posts

HubSpot Knowledge Base:
→ Create and publish blog posts

For the blog posts we offer a few settings. Some of them can be found in the theme options: “Settings” → “Website” → “Themes” → “POWER THEME” → “Blog” → “Blog Post”

  • Show Navigation Bar: Shows/Hides the navigation bar for jumping to the next/previous post or blog overview
  • Show related Posts: Shows/Hides the related posts section below the main blog post body.

Additionally, you can configure the blog posts directly in the blog post template or blog post (content editor). Once you have setup a blog post you will find several modules in the left sidebar of the content editor in HubSpot:

Within the Blog Post module you will find the following options:

  • Social Sharing – AddThis Script Link:
    In order to get the fixed scrolling social sharing icons, you need tho use AddThis. You can create your own AddThis Script on the AddThis website: https://www.addthis.com/
    In the AddThis dashboard, add the tool Share Buttons and make sure to use the tool type Inline. Furthermore choose the following settings: “Style” = “Standard Responsive”, “Size” = “Large (32×32)”, “Hide Network Names” = “Yes”, “Share Counter Type” = “None”. Once, you have configured the tool click the button “Get the code”. There you will find your AddThis script link that is needed to configure in the module, e.g. //s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR_ID.
    If you use AddThis, please make sure to deactivate all HubSpot social sharing buttons for your blog in the settings. “Settings” → “Blog” → “Social Sharing” → “Social Sharing Buttons”.
  • Layout → Float AddThis Social Sharing Items: By activating this options you get the floating/fixed scrolling effect on the AddThis social sharing icons.
  • Layout → Show Author Box?: Activating this shows an author box at the end of the blog post.

Blog Post Preview

In the blog post template you will also find the Blog Post Preview module, which simply shows blog post previews. You can use it here to add related posts to your blog post or simply use it on any other page to preview your blog posts.

Within this module the following options can be configured:

1. CTA: A custom HubSpot CTA can be picked here. Usually this CTA leads to the blog overview/listing page.

2. Layout: We have prepared multiple layouts for the blog post previews:

1. Posts Standard

2. Posts Large – Horizontal Layout

3. Posts Large – Vertical Layout

4. Posts Small – Horizontal Layout

5. Posts Small – Vertical Layout

6. Posts – Text only

3. Number of Posts to show. Only has an effect on layouts “Posts – Large – Vertical Layout”, “Posts – Small – Horizontal Layout”, and “Posts – Small – Vertical Layout”

4. Show Author: Displays the author name in the blog post previews, if activated. Only for layout “Standard” and “Text only”.

5. Show Date: Display the date in the blog post preview, if activated. Only for layout “Standard” and “Text only”.

6. Show Reading Time: Display the estimated (internally calculated) reading time of the blog post, depending on the length of the blog post content. Only for layout “Standard” and “Text only”.

7. Show summary: Displays the excerpt text on the listing page. Only for layout “Standard” and “Text only”.

8. 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.

9. Truncate summary: limits the length of the excerpt text to a given number.

10. Post Filter: Here, the set of blog posts which should be shown can be defined. Defining this set is based on multiple options:

10.1 Blog: Choose the blog (if you have more than 1) from which the blog posts should be pulled.

10.2 Tags/Categories: Select up to 3 different tags and categories.

10.3 Authors: Posts from specific authors. Please enter the exact name as configured in HubSpot. You can configure several ones by separating them by comma without whitespace.

10.4 Always show this posts: Blog posts which always should show up in the returned listing, despite all other filters. Enter the IDs of the blog posts. You’ll find the ID in the URL while editing the specific post. You can configure several ones by separating them by comma without whitespace.

Portfolio

Previous/Next Navigation

The same module used for the blog post navigation can also be used for other cases, e.g. the portfolio navigation. The user can jump to the next or previous portfolio item or go back to the portfolio overview.
Please note, that the links to next, previous and to the overview must be configured manually here.

Image Boxes

Most of the portfolio overview pages consist mainly of image boxes in different styles (the image box module is VERY powerful). Jump → here to get more details about the image box module

See some examples below:

3 column with text below the box

3 columns with hidden text on the front and visible text on hover

3 columns with hidden text on front, visible text on hover and masonry style. The size of the elements can be configured in the sub-elements (boxes)

System Pages

HubSpot uses a collection of system pages, which will also be delivered with the POWER template pack. The following system pages are used in HubSpot:

1. Error Page 404

2. Error Page 500

3. Password Prompt

4. Search results page

5. Email Subscription Preferences

6. Email Unsubscribe Page

7. Email Subscription Confirmation

For each of these pages we have created a page template. In order to use the templates you can assign them in the settings here: “Settings” → “Website” → “System Pages” and here “Settings” → “Marketing” → “Email” → “Subscriptions”

Support

If you have any further questions regarding the templates, customizing the templates and other website/email services, we’d be happy to help you any time.

→ Get in touch