Modules

⚠️ If you purchased the full pack instead of the theme, please read the documentation of the full pack here

Module Types

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

power-theme-documentation-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.

doc_img_79

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 CTAs

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

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