Skip to content

Global Footer Settings

How to configure the footer for your HubSpot website theme

icon-module-footer

WEBSITE FOOTER

One of the key building blocks for your website, the footer is at the very bottom of the page and provides your site visitor with helpful links.

footer-example

Page Speed Impact

LOW

The footer module has very little impact on page speed.

MEDIUM

Logo size and file format can impact your page speed if not sized appropriately.

The subscription form in the footer will add a slight increase in load time (limited to the email field only for this reason).

TIPS

For the best quality, we recommend SVG for your logo sized at 120px wide.

Consider creating a section containing your newsletter subscription outside of the footer and only placing it on key conversion pages.

FAQ

Where can I change the copyright text in the footer?

The copyright text can be configured directly in the footer module. Please watch this video for further details.

 

 

The Submit button is overlapping the form fields in the footer, how can I fix this?

The footer is designed to contain a Subscription Form that has just one field for Email Address.

Adding additional fields breaks the styling and is not recommended due to the impact on page speed.

Learn more about using Forms.

How do I set up the Advanced Footer from v25?

Step-by-Step Instructions coming soon for the Advanced Footer, please submit a ticket if you have questions.

Setup Instructions

Page Editor → POWER Footer

To access the global footer module, the easiest way is to create a website test page, select your child theme and a template, then click the Contents tab and choose "POWER Footer" to open the Global Content Editor.
 
POWER-footer-settings

POWER Footer → Global Content

Once you have accessed the global module, you will have the choice to set up 4 variations for the footer.

global-footer-types

We recommend configuring the footer for all page types at the beginning, even if you don't plan on using one of them (i.e. blog or landing pages) so that you have a consistent starting point if anything changes.

It is also possible to override the default footer for an individual page, so an unused footer type could be styled for this situation.

 

Footer Types for POWER Theme

  • PAGE Footer is the default for website pages
  • LANDING PAGE Footer is the default for landing pages
  • BLOG Footer is the default for the Blog Listing and Blog Post templates
  • SYSTEM PAGE Footer is the default for the 404, 500, and Search templates

While Subscription templates are system pages and they typically use the LANDING PAGE Footer, some accounts are using the PAGE Footer for these pages with no clear explanation from HubSpot.

Each footer type includes the option to include a Copyright Bar.

Settings → Account Defaults → Branding → Company Info

A Legal Notice is included in the Footer and consists of your legal menu (Terms of Use, Privacy Policy, etc.), the Year and Company Name.

pwr-feature-footer-minimal

Publishing the Global Footer

When you're ready to publish the Global Footer, you'll click the orange Publish to X Assets button in the upper right corner. The number of assets corresponds to the total number of assets using this specific child theme that contains any of the footer types.

publish-global-footer

It is important to note that if you make a change to the BLOG Footer, you'll have to publish the footer to ALL assets, not just the blog assets. This is true for each footer Type, whether you are configuring every footer or making a change to an individual setting - until you Publish to X Assets, your changes will not be visible on your preview pages and live site.

Module Options

There are some settings that are only visible based on previous choices, if you do not see the option available, it does not work with the layout or selections you've already made.

These settings are available for each Footer Type. We recommend opening a second browser window once you have the PAGE Footer configured to make it easier to apply the same settings for the other footer types and modify as needed.

POWER Footer → Logo

The footer uses the same pre-configured global logo that you added when setting up the header.

Option to Override default logo and Override Logo Sizes.

footer-logo-setup

Option to Override Logo Link allows you to replace the preconfigured link from the global HubSpot settings.

override-footer-logo-link

POWER Footer → Link Type

Configure the Link Text and Link To if using Layout → Footer Simple (this setting won't be visible until you change the layout).

Options for Link To are: External, Content, File, Email Address, and Blog.

simple-footer-link-text

Option to Use CTA instead if you would like to use a CTA, you'll need to add the class "pwr-link" in the CTA settings, learn more about setting up CTAs for POWER theme.

POWER Footer → Statement

The Statement allows you to include a company description in the Footer when using the Footer Full layout.

Company-description-statement-setting

POWER Footer → Social Icons

The footer includes 3 pre-configured social icons for Twitter, LinkedIn, and Instagram.

Make sure you update the URL to your social accounts or remove ours. :)

footer-social-icons

POWER Footer → Menu

Choose your navigation menu from the Menu dropdown to select your footer navigation. Help with Navigation Menus.

Footer-Menu-settings

The number of columns in your navigation will affect the layout of the footer module.

To create a footer with full navigation (Layout → Footer Full), we recommend a menu with 6 columns:

pwr-feature-footer-full

To create a footer with logo/company info/social icons (Layout → Footer Full), we recommend 4 columns:

pwr-feature-footer-full-4

POWER Footer → Menu Right

Choose your navigation menu from the Menu Right dropdown to select your footer navigation if using Layout → Footer Reduced (this setting won't be visible until you change the layout). Help with Navigation Menus.

menu-right-footer-reduced-setting

POWER Footer → Subscription Form

Edit Subscription Title to include a title for your Subscription Form in the Footer.

Choose your Subscription Form or create a new form.

The number of navigation columns should be limited to 2 when using the Subscription Form.

If you have chosen the Footer Full layout type. The Subscription Form Type allows you to set the layout type for your subscription form. The options here are for an email-only input, which has a higher conversion type for subscription forms, or a full form. 

POWER Footer → Subscription Form → Form Content

Set the field titles, Placeholders and help text that will display on your form. For more advanced form editing along with drag and drop on your fields the HubSpot form editor should be used. 

A custom button text and Data privacy options can be customised in this section.

POWER Footer → Subscription Form → Thank You

Choose to have your form redirect to another page or display a thank you message when submit. 

POWER Footer → Subscription Form → Form Automation

Choose to always create new contacts for a new email address. This will ensure cookies do not overwrite contact records if the email is new. There may be some considerations to enabling this. 

Edit Subscription Hint to include any relevant information regarding your Subscription.

subscription-hint-footer

POWER Footer → Legal Menu

Edit Legal Notice to include your copyright or other legal information that will be separated with a "|" (vertical pipe) from the Menu Legal.

Choose your legal menu from the Menu dropdown to select your legal menu for the website footer. Help with Navigation Menus.

Legal-menu-in-footer

POWER Footer → Layout → Select Footer Type

This is where you will choose the layout of the footer

Choices are Footer Full, Footer Full Advanced, Footer Reduced, Footer Simple Link, and Footer Copyright Bar.

POWER Footer → Layout → Footer Full Advanced

The Advanced Footer allows you to create a custom footer layout.

Step-by-Step Instructions for setting up the Advanced Footer.

POWER Footer → Layout → Footer Full

This is where you'll choose the layout of your footer.

Check Hide Company Info to omit the Statement from the Footer Full layout.

Check Hide Subscription Form to omit the Subscription Form from the Footer Full layout.

select-footer-type-layout-settings

  • Footer Full - recommended for showing a lot of information

pwr-feature-footer-full-4

  • Footer Full - with Subscription Form

pwr-feature-footer-full-2

POWER Footer → Layout → Footer Reduced

reduced-footer-layout

  • Footer Reduced -a more compact way of presenting a short about text and a simple menu

pwr-feature-footer-reduced

POWER Footer → Layout → Footer Simple Link

Check Centered to center the link in the layout, otherwise left-aligned.

footer-simple-link-layout

  • Simple Link - shows a prominent link or email in combination with a minimal copyright bar and social icons

pwr-feature-footer-email

POWER Footer → Layout → Footer Copyright Bar

Check Centered to center the link in the layout, otherwise left-aligned.

footer-copyright-bar

  • Copyright Bar - the most reduced, showing only the copyright bar with an additional simple menu next to it

pwr-feature-footer-minimal

POWER Footer → Style

Footer-style-settings

POWER Footer → Style → Color Scheme

Choice of Light or Dark for the main Footer.

The light scheme shows a light background color and a dark font and the dark scheme shows a dark background color and a light font color as defined in the Theme Settings for your child theme.

light color scheme footer

dark color scheme footer

POWER Footer → Style → Content Full Width

Check Content Full Width to stretch the Footer content to the window borders instead of the container width (not recommended).

full width dark scheme footer

POWER Footer → Style → Background

Choice of Background Color, Background Image/Video, Background Gradient, or Transparent. Refer to Settings that apply to all Section Modules for more details about these choices.

POWER Footer → Style → Background Image/Video

Choice to add a primary background image or placeholder image for your video. Additional background images can be set for mobile and tablet specifically. If these are empty the primary image will be used across all screen sizes. 

A background video for your footer can be uploaded or a youtube/vimeo link can be used. 

Options to add a colour or gradient overlay and it's opacity can be set here. 

POWER Footer → Style → Shape Divider

Optional Shape Divider(s) can be added to the top or bottom of this module. Refer to Settings for configuring Shape Dividers for more details about these choices.

Configurations

6 Column Navigation

pwr-feature-footer-full

Layout > Choose Layout

Footer Full

Hide Company Info

Hide Subscription Form

Menu

6 Columns

Style > Color Scheme

Dark

4 Column Navigation + Logo + About Text

pwr-feature-footer-full-4

Layout > Choose Layout

Footer Full

Hide Subscription Form

Menu

4 Columns

Style > Color Scheme

Dark

2 Column Navigation + Logo + About Text + Form

pwr-feature-footer-full-2

Layout > Choose Layout

Footer Full

Menu

2 Columns

Style > Color Scheme

Dark

Reduced Layout

pwr-feature-footer-reduced

Layout > Choose Layout

Footer Reduced

Menu Right

Top-level menu only, 4 items

Style > Color Scheme

Dark

Minimal Layout

pwr-feature-footer-minimal

Layout > Choose Layout

Footer Copyright Bar

Menu Legal

Legal Notice and Menu Legal

Centered

Style > Color Scheme

Dark

Big Email Layout

pwr-feature-footer-minimal

Layout > Choose Layout

Simple Link

Link

Email

Centered

Style > Color Scheme

Dark

Examples

configura-footer-example
marvia-footer-example
altaskifer-footer-example
ocean-io-footer-example
bokashi-organko-footer-example
dallas-footer-example
spot-on-sciences-footer-example
vere-footer-example
growth-london-footer-example
talent-point-footer-example
cadesignform-footer-example
ander-footer-example
nodalview-footer-example
keylight-footer-example
humanex-footer-example

Next Steps

With your Header and Footer complete, you're ready to update the templates for your system pages and email subscription pages.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.