POWER Documentation

Documentations are never easy to read. We have created tutorial videos and images to help you get through this documentation easier and setup your HubSpot template.

mockup-docu-09

Version 1.4.1 – 05-26-20

INTRODUCTION

We understand the importance of documentations. We also understand that documentations are tiring. So, we have tried to make our instructions as pleasing as possible and provide the best way to start off with your POWER HubSpot website template.

POWER is a multipurpose HubSpot website template pack created to provide 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 template 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 template pack, you will find all the templates in your HubSpot portal. The template-files are named with the prefix “POWER”. By searching for that term, you will find all the templates in your HubSpot design manager.
This pack contains all the necessary website and landing page templates in many variations, ready to build your well-designed, converting inbound website.
Visit our demo-page to check out all the pages and modules we created.

This documentation offers a basis to get started. In order to get a deeper understanding of the template this documentation also contains a reference guide for all the custom-coded POWER-modules. All possibilities of customization are documented here.

Important: To make sure that the POWER template is displayed and working correctly, please configure the settings under “Settings” → “Website” → “Pages” as follows:

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 a massive documentation, if you need to learn more about the HubSpot Design Manager and the HubSpot CMS.

→ HubSpot Documentation

BASICS

As previously mentioned, all the templates will be available in the HubSpot Design Tools. Navigate to “Marketing” → “Files and Templates” → “Design Tools”. Here you will find all the modules and website templates of the POWER template pack.

However, most editing work can be done through HubSpot’s Page Editor. Creating website pages, landing pages, blogs, blog posts and portfolios can be done here. See how it works:

 

Once the website is created you can edit the website content, the order of the website content through the page editor.

CUSTOMIZATION

CSS

For customizing the design of your website on a deeper level, we have prepared two CSS-files: pwr-style-settings.css and custom-styles.css. Both files can be found in the “Coded Files” folder.

Style Settings

In the pwr-style-settings.css file you can easily adjust your website colors, fonts, effects and styles and layout options. The file shows a well structured table of contents, which will help you navigate through the CSS-file faster. Simply search for the search terms (e.g. #bcd) and you will be navigated directly to the proper css definitions.

Basic Colors

These colors are used throughout the POWER template. The colors are configured in the HEX format. You can find or convert your color with the help of a tool like Photoshop, Gimp or online tools like colorpicker.com
A color in the HEX format looks like this: #2254FE

Change the HEX values inside the single quotation marks:

Specific Colors

In this section you have the possibility to set more specific colors for common elements like text, titles, buttons, etc.
You can either set HEX values like above or use the variable names on the left to reuse colors you have already defined. The latter is done by default and you can already save and have a look how your previous color changes affect your site.

Fonts

In this section you can configure the web-font(s) you would like to use.
A lot of free and commonly used fonts are available at Google https://fonts.google.com/
There you can select the font and font-weights and use the suggested @import statement here.

If you have a custom or purchased font, upload the files via file-manager and reference the font format(s) in the @font-face statement

You’ll find examples for both cases below

Round Edges

This section lets you configure rounded edges for the objects used in the website.

Effects

Here, you can add a 3D-Hover effect to boxes with embedded links and a “switch” hover effect to the buttons and CTAs.

Layout

In this part of the style settings only layout-related configurations can be applied. Such as the positioning of the header menu, the general content width, paddings, breakpoints for responsive options and font scalings.

Once finished, the new values can be applied by clicking on “publish”. Now, the styles are applied to all the templates, websites and landing pages.

Custom Styles

For deeper and additional style definitions we definitely advise to code them in a separate CSS-file: custom-styles.css

All CSS-files can be attached globally to the website through “Settings” → “Website” → “Pages” → “Templates” under “CSS & Stylesheets”.

Header

The whole header is separated into 2 modules: “POWER Header Top Bar” and “POWER Header”.

Starting with “POWER Header”, you can configure the following elements:

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

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:

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.

Style

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

1. Color Scheme: 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. Transparent: Turning on this option removes the background color of the header bar. The underlying visual (background color, background image or video) will be visible.

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

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

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

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

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

POWER Header Top Bar

Menu

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

Social Icons

The configured social icons will be shown on the right-hand side of the top bar.

Style

This section focuses on the visual appearance of the top bar.

1. Color Scheme: 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.

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

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

Footer

POWER has four different footer modules. Each of them can be configured in many ways:

Footer Full

This footer is recommended for showing a lot of information.

Options:

1. Show Company Info: Turning this option on 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

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

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:

POWER System

The POWER template is made with the user in mind. We focused to create a template system which can be used by marketing specialists, designers or developers to create modern websites.

Each section is based on one single module, no additional structures, columns, custom classes, etc. are needed. Everything is handled in the module configurations.

Structures like this are no longer needed:

Instead you can build the whole structure with POWER like this:

You see? Much easier, no groups, no additional CSS-classes, just modules.

General Options

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.

Content Modules

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

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.

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.



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:

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.

Divider

This module can be used as a spacer. Alternatively, one can include a background color, image or video to use it to show visual content.

Section Height (px): Set the height of this section in pixels. The sample below shows a background image of a divider with the height of 200px.

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:

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.

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.

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.

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.

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

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.

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.

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

This module represents a list of links. The main purpose is to generate an alternative version for the portfolio overview page. However, it can be also used for other use cases. Sizing, colors, etc. can be configured directly in the module.

You can configure each simple link with the following options.

1. Links: These are sub-elements which contain further configurations for the listed links.

In these sub-elements one can define the link-text, the font-size (h1 – h4) and the link.

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.

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.

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

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)

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 3 layouts:

1. One by One – Style 1

2. One by One – Style 2

3. Multiple

Testimonial Listing

Additional to the testimonial slider module, one can choose this module made for separate testimonial pages. The testimonials are configured the same way as in the testimonial slider module.

This module offers the following two layouts:

1. 2-column layout

2. 3-Column Layout

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 3 layouts:

1. Title top, Text 1 column

2. Title top, Text 2 column

3. Title left, text right

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:

1. Tab: The tab name and the content displayed in this tab are stored in this sub-element.

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:

1. Vertical centered

2. Vertical

3. Horizontal

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.

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.

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.

Webinars

The webinars module provides a visualization for webinar pages and sections.

The following options can be configured in this module:

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

The following options can be configured here:
1. Title
2. Description
3. Link
4. 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

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

Blog listings or blog overview pages consist of multiple modules. The two most important ones are Blog Listing Filter and Blog Listing.

Blog Listing Filter simply adds a filter area which groups all blog posts according to their categories / tags.

The Blog Listing module represents basically on how the blog posts are shown on this page.

The following options can be configured:

1. Layout: We have prepared the following 3 layout variations:

1. One Colum (+ Sidebar)

2. 2 Columns (+ Sidebar)

3. 3 Columns

2. Show Author: Displays the author name in the blog post previews, if activated.

3. Show Date: Display the date in the blog post preview, if activated.

4. Show Reading Time: Display the estimated (internally calculated) reading time of the blog post, depending on the length of the blog post content.

5. Show summary: Displays the excerpt text on the listing page.

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

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

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

9. Sidebar: If at least one side bar element is configured, the sidebar will be shown.

The sidebar content elements contain the following options:
1. Widget Type: Text, Recent Blog Posts, Categories and Newsletter Signup
2. Title
3. Description

Depending on the widget type other parameters like number of blog posts will appear.
Note that the newsletter signup form can only consist of one email field and the submit button.

Blog Featured Post

On the blog listing/overview page you will find either a hero module (see image)

or a featured post module (see image)

If you decide to use the featured post version, you will have the following options to configure in the module settings:

1. Post ID: Pull this number from the URL while editing the blog post:

In this case the ID would be: 6060018383. The previous number in the URL represents your HubSpot ID.

2. Show summary/Truncate summary: If show summary is activated it display an excerpt text, which can be truncated using the given number of characters

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

You will find the options to overwrite the blog post image with any other image or video. If no other image or video is selected the graphic is pulled from the blog post directly.

Blog Posts

This module represents the body of each blog post. It contains the following options:

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

2. Show Author: Activating this shows an author box at the end of the blog post.

3. Float Social Sharing item: By activating this options you get the floating/fixed scrolling effect on the AddThis social sharing icons.

Blog Post Preview

This module is used to tease blog posts on non-blog pages.

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)

Simple Link List: Jump → here for more information

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”

Email

We have also included 2 email templates in our template pack. We have optimized the templates for most email clients. You will get top notch email templates, which are ready to be used!

You can create a new email by going to “Marketing” → “Email” → “Create Email”. In the next screen you will find the two POWER email templates: “POWER Email 01” and “POWER Email 02”. Select one and follow the instructions.

CTA: You can use HubSpot CTAs in the email templates. Please make sure to set the CTA style as here:

Footer Company info:
The info shown in the email footer needs to be set up in the settings: “Settings” → “Account Defaults” → “Branding” → “Company Info”.

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