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.

 

HubSpot Video

 

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.

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 Footer is designed to work with a form that has just one field for Email Address, adding additional fields will break the styling and you will see the button in the wrong spot.

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

Subscription-Form

Edit What will a visitor see after submitting your form to Redirect to another page or Display an inline thank you message.

subscription-form-redirect

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 Reduced, Footer Simple Link, and Footer Copyright Bar.

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.

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

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

Next Steps

Now that your footer is set up, it is time to bring your brand to life by updating the theme settings.

Next up:

NEVER MISS A POWER UPDATE

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