Most likely the wrong version of jQuery is configured in your HubSpot settings.
Please follow the instructions here to configure the proper version of jQuery.
It looks like the wrong version of jQuery is configured in your HubSpot settings.
Please follow the instructions here to configure the proper version of jQuery.
This happens because of an old bug. We fixed the issue and released an update on February 16. 2021.
Please have look at our changelog for further details. If you purchased before that date, please update the theme.
Some of the images used in the modules are configured as background-images. This way, we can guarantee that the area which should be filled with the image, is always covered completely.
The downside of this method is that depending on the dimensions of the container-element and the image itself, parts of the image can be cropped.
You can set the background position for the image which allows you to control where the focus of the image is, which becomes the new anchor point of the image when it is cropped for smaller screens.
In the section settings under "Style" you'll find an option set a background image/video, when this is enabled you will see an additional setting to control the anchor point for the image.
For example, if the focal point of your image is on the right, you could set the Background Position to right. Doing this would result in the left side of the image being cropped and retains the focal point of your image on the right side.
In this example, the focal point is the woman on the right.
By setting the background image to "right" the image would be cropped on the left side to retain the focus on the right.
By default the logo images are top-aligned with the option to vertically align (v22).
Please make sure that the logo images all have the same dimensions. We recommend a height of 200px. The width depends on the number of visible logos.
There are some modules where the layout and HTML structure don't work with the code required for the shape divider to function properly.
These modules don't have the shape divider feature:
- Sec Content Split
- Sec Breadcrumbs
- Sec Values
- Pillar Page TOC
- Mini CTA/button
- Mini Icon
- Mini Tag
- All "Sub" Modules
Because "Sub" Modules can be combined to create a single section, it would create conflicts in the code to have shape dividers for these modules. An example is the Sub Team module.
Sometimes when new features get added to a module, we can't modify existing settings without impacting live sites for existing customers.
In these situations, we create a new setting that allows for the new features and flag the old setting as DEPRECATED.
Doing so avoids any disruption to existing customers and allows all customers to take advantage of new features.
For modules that have default text, you will find a setting in the Content tab for "STANDARD TEXT / TRANSLATION" - default text items are text that have to be coded into the theme for the module to display correctly.
The Standard Text / Translation allows you to change the wording of the default text or add a translation for your language (translation.html also included to override these defaults across the entire child theme).
Learn more about using multiple languages or settings for non-English website.
With Theme Settings, you have the POWER to transform the theme into your brand's website. And with our custom modules, you'll discover the POWER to create professionally designed layouts in less time!
Module Types
There are three main types of modules: Section Modules, Sub Modules, and Mini Modules.
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 vary 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 to add 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 on 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 on the press page to show a list of articles/downloads and many more.
LIST 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 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 schemes. 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 schemes.
- 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 schemes.
- 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 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 HubSpot's 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 HubSpot's CTA editor. Please note, that while creating the CTAs, you would need to select “no style” in HubSpot's 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 elements can be created to represent 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?
The 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 is 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 is 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 placing 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 Images (previously Sec Image Slider)
This module contains 3 layout options (updated in v23): image slider, image comparison, and image hotspots.
Image Slider
The first layout is a simple image slider, i.e. it can be used for image slideshows.
Image: Add the images here 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.
Image Comparison
The second layout is for Image Comparison, also known as before and after images, and offers additional layout choices for the comparison to show with a slider, toggle, or on hover.
Once selected from the dropdown, an additional settings menu will appear above Layout called "Image Comparison" where you can set up the images and update the options accordingly.
Image (Left) is for the first image and will be on the left for the slider option, it is also the default for the toggle option and hover option.
Image Alt (Right) is the second image and will be on the right for the slider option, it is displayed when the toggle is activated or on hover.
Label Left is used to identify the first image (example: Before).
Label Right is used to identify the second image (example: After).
Below these options are settings for "Layout" and "Style"
Comparison Variant is where you can define the style of the image comparison to be slider, toggle, or hover.
Image Hotspots
The third layout is for Image Hotspots, and allows you to create targets within an image that the user can interact with.
Image is where you will add the image that is the background for the hotspots.
Hotspot(s) is where you add one or more hotspots to the image.
Hotspot Text displays on hover.
The position of the hotspot is based on an X and Y grid - think of the upper left corner as 0,0 and the bottom right as 100,100. The middle of the image is 50,50.
Position X is the horizontal placement, with far-left being 0 and far-right being 100.
Position Y is the vertical placement, with the very top being 0 and the very bottom being 100.
In Layout → Max Width - determine the max-width for the image to display. The image will still be responsive based on device size.
In Style → Icon Style - choose whether to have the "+" or a number/character to display in the circle.
Check the box to overwrite the icon color if you want it to select an alternate color.
Icon Color Scheme - can inherit from the section or you can change between light or dark scheme to change the color of the "+" or number/character so that it is legible against the chosen color.
Animation - choice of none or pulse.
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.