Footer

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

Introduction

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

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

contents-power-footer

Once you have accessed the global module, you will have the choice to setup 3 variations for the footer:

global-content-footer

The PAGE footer is the default for website pages and some system page templates, the LANDING PAGE footer is the default for landing pages and other system page templates, and the BLOG footer is the default for the Blog Listing and Blog Post templates.

With POWER you can also switch between the regular "page" footer, "landing page" footer, even the "blog" footer using “Page Settings”.

Note: If you have already made this change for the header, the same page type will be applied for the footer.

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

 

Footer Full

This footer is recommended for showing a lot of information.

Options:

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

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

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

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

For a full navigation we recommend 6 columns:

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

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

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

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

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


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

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

 

Footer Reduced

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

Options:

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

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

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

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

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

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

 

Footer Simple Link

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

Options:

1. Link Text: the shown link text. hello@power.com 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.