Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

ADVANCED FOOTER

How to configure the Advanced Footer Full layout for your website

maka-icon_feature-adv-footer

ADV. FOOTER

Design a custom footer for your website pages with a flexible 12 column layout.

advanced-footer-layout-example

Page Speed Impact

LOW

The advanced footer itself will not have a significant impact on page speed.

MEDIUM

Additional impact on desktop if images are added to the rich-text editor without being properly sized and compressed.

An image background can also impact page performance.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Vector images (SVG) also help keep file sizes to a minimum and can be used for graphics like logos and icons.

FAQ

How do I apply the Advanced Footer to all global footers?

If you've built the Advanced Footer full for your PAGE footer and would like to apply it to other page types, you will have to build it for each variation.

The easiest way to do this is to open the global module in two windows so that you can see the settings for the PAGE footer while you build the other footer(s).

Setup Instructions

 

The Advanced Footer is configured from the Global Footer and has to be set up independently for each page type where you would like to use this feature.

global-content-footer-types

When you're ready to publish the Global Footer, you'll click the orange Publish to X assets button in the upper right corner. 

publish-global-footer-1

Once published all changes are visible on all live pages with the corresponding footer

You can continue to build your Advanced Footer without publishing by clicking Back to page editor and leaving with unpublished changes.

footer-progress-saved

You will need to set up individual menus to be used within the columns if you are using the Menu content type.

The layout of the advanced footer is based on a 12-column grid, this allows for the most flexible layout to work with a variety of content elements and design layouts.

If you're not familiar with a 12-column grid in design, imagine 12 columns in a spreadsheet and you get to pick how many of those columns should be included in each of the menu columns.

For example, if you want your menu to have 2 columns, you could divide the 12 columns out to have 3 and 9, 4 and 8, 6 and 6, 8 and 4, or 9 and 3. These numbers form the width of the two columns where your content will go.

Within each column, you can create groups of content within a wrapper. The wrapper allows you to apply style and layout settings to unify the contents and create rows within the columns. You can have multiple contents in a wrapper, and multiple wrappers in a column.

Use these links to jump to the corresponding configuration settings below.

Footer Full Advanced = the layout that provides the overall structure of the footer, where you activate the Advanced Footer

Column(s) = the main structure of the Footer; can be 1 to 6 columns

Wrapper(s) = a grouping of content within a column; at least 1 per column

Content(s) = choice of content type to be added to the wrapper; at least 1 per wrapper

Sub Area Top = an area above the main footer for additional content, can be one to three columns, each with one content item; only 1 can be added

Sub Area Bottom = an area below the main footer for additional content, can be one to three columns, each with one content item; only 1 can be added

Use these links to jump to the corresponding style settings below.

Footer Style = overall style of the Footer, the background here is the furthest layer back

Column Style = individual style settings per column, this layer is on top of the Footer background

Wrapper Style = style settings for individual wrappers within a column, this layer is on top of the Column and all content within the wrapper sits on top of the wrapper styles

Sub Area Top Style = independent of the Footer Style settings, on the same layer as the Footer background

Sub Area Bottom Style =independent of the Footer Style settings, on the same layer as the Footer background

Module Options

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 configure the Advanced Footer for any additional page types needed.

Activating the Advanced Footer

POWER Footer → Layout → Select Footer Type

To access the settings for the Advanced Footer, the Layout needs to be set to Footer Full Advanced.

Footer-full-advanced-layout-setting

POWER Footer → Layout

The settings will open to the Layout section first, this is where you will define the basic structure of your Footer.

footer-layout-settings

POWER Footer → Layout → Width of Content

Choice of Content Width or Full Width.

If set to full width, the footer spans the whole window width. If set to content width, the footer spans only the content area width.

POWER Footer → Layout → Column Layouts & Widths

The column layout is based on a 12-column grid. The numbers in brackets are the column widths based on the total being 12.

Column Layouts & Widths available include:

  • 1 Column - [ 12 ] 
  • 2 Columns - [ 3 | 9 ] 
  • 2 Columns - [ 4 | 8 ] 
  • 2 Columns - [ 6 | 6 ]
  • 2 Columns - [ 8 | 4 ]
  • 2 Columns - [ 9 | 3 ]
  • 3 Columns - [ 2 | 2 | 8 ]
  • 3 Columns - [ 2 | 8 | 2 ]
  • 3 Columns - [ 8 | 2 | 2 ]
  • 3 Columns - [ 3 | 3 | 6 ]
  • 3 Columns - [ 3 | 6 | 3 ]
  • 3 Columns - [ 6 | 3 | 3 ]
  • 3 Columns - [ 4 | 4 | 4 ]
  • 4 Columns - [ 2 | 2 | 2 | 6 ]
  • 4 Columns - [ 2 | 2 | 4 | 4 ]
  • 4 Columns - [ 2 | 4 | 2 | 4 ]
  • 4 Columns - [ 2 | 4 | 4 | 2 ]
  • 4 Columns - [ 3 | 2 | 2 | 5 ]
  • 4 Columns - [ 3 | 3 | 3 | 3 ]
  • 4 Columns - [ 3 | 5 | 2 | 2 ]
  • 4 Columns - [ 4 | 2 | 2 | 4 ]
  • 4 Columns - [ 4 | 2 | 4 | 2 ]
  • 4 Columns - [ 4 | 4 | 2 | 2 ]
  • 4 Columns - [ 6 | 2 | 2 | 2 ]
  • 5 Columns - [ 2 | 2 | 2 | 2 | 4 ]
  • 5 Columns - [ 2 | 2 | 2 | 3 | 3 ]
  • 5 Columns - [ 3 | 3 | 2 | 2 | 2 ]
  • 5 Columns - [ 4 | 2 | 2 | 2 | 2 ]
  • 6 Columns - [ 2 | 2 | 2 | 2 | 2 | 2 ]

POWER Footer → Layout → Compensate Outer Column Padding

Choice of None, Left, Right, or Left & Right.

This makes the most sense for layout = content width. If the most left or right column does not have a background style, this setting allows to better align its content to the other content of the page.

We recommend building the footer columns first and coming back to see if this setting is needed.

POWER Footer

At the top (above layout) are the settings where you'll start building the structure for your footer.

We recommend building out the structure and contents and then going back to review the style and alignment options to refine the design and layout.

power-footer-column-structure

In addition to the main column layout, you have the option to configure a Sub Area on Top and a Sub Area on Bottom; these settings essentially allow you to add an additional row of content above and/or below the footer.

It is important to note that these sub-areas have different settings and some limitations compared to the main columns; this is not how you would create rows within the columns, which is done by adding more than one wrapper to a column.

Jump to Footer Style Settings ↓

Skip Sub Area Top settings (jump to column setup) ↓

Adding a Sub Area on Top

POWER Footer → Show Sub Area on Top

To activate the Sub Area on Top, check the box to enable the settings.

show-sub-area-on-top-mega-menu

POWER Footer →  Sub Area Top

The settings will open with the Layout section set to 3 Columns, this is the max number of columns for the Sub Area Top.

sub-area-top-settings

POWER Footer →  Sub Area Top → Column Layouts & Widths

The column layout is based on a 12-column grid. The numbers in brackets are the column widths based on the total being 12.

Column Layouts & Widths available include:

  • 1 Column - [ 12 ] 
  • 2 Columns - [ 3 | 9 ] 
  • 2 Columns - [ 4 | 8 ] 
  • 2 Columns - [ 6 | 6 ]
  • 2 Columns - [ 8 | 4 ]
  • 2 Columns - [ 9 | 3 ]
  • 3 Columns - [ 2 | 2 | 8 ]
  • 3 Columns - [ 2 | 8 | 2 ]
  • 3 Columns - [ 8 | 2 | 2 ]
  • 3 Columns - [ 3 | 3 | 6 ]
  • 3 Columns - [ 3 | 6 | 3 ]
  • 3 Columns - [ 6 | 3 | 3 ]
  • 3 Columns - [ 4 | 4 | 4 ]

POWER Footer →  Sub Area Top → Vertical Alignment

The Vertical Alignment of sub-content (how the content aligns within the Sub Area Top).

Choice of Top, Middle, or Bottom.

POWER Footer →  Sub Area Top → Padding Top and Padding Bottom

Choice of Standard or None.

POWER Footer →  Sub Area Top → Column 1 -3

For each column, you can configure the Content and Layout.

In the Sub Areas, it is only possible to add one content item per column.

sub-area-top-footer-alignment

POWER Footer →  Sub Area Top → Column 1 -3 → Content

Choice of Empty, Button/Link, CTA, Menu, Logo, Social Icons, or Rich Text Field.

POWER Footer →  Sub Area Top → Column 1 -3 → Content → Alignment Horizontal

Choice of Left, Center, or Right for Desktop, Tablet, and Mobile.

Determine where the content should be positioned within the column.

Sub Area Top Style Settings

POWER Footer →  Sub Area Top → Style

The style settings for the Sub Area Top apply to all columns.

sub-area-style-settings

POWER Footer →  Sub Area Top → Style → Color Scheme

Choice of Light, Dark, or Inherit.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

POWER Footer →  Sub Area Top → Style → Border

Choice of Top, Bottom, or None.

POWER Footer →  Sub Area Top → Style → Background

Choice of Background Color, Background Image, Background Gradient, Glassmorphism/Blur, Transparent.

POWER Footer→  Sub Area Top → Style → Background → 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.

style-mega-menu-background-color

POWER Footer →  Sub Area Top → Style → Background → Background Image

Select an Image for the Sub Area Top background.

mega-menu-background-image

POWER Footer →  Sub Area Top → Style → Background → Background Image → Background Position

Choice of Bottom, Center, Left, Right, or Top.

For the Image, you can choose where the focal point is within the content area. 

POWER Footer →  Sub Area Top → Style → Background → Background Image → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

background-image-overlay

POWER Footer →  Sub Area Top → Style → Background → Background Gradient → Background Gradient Direction

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.

background-gradient

POWER Footer →  Sub Area Top → Style → Background → Glassmorphism/Blur

Define the background color by the color hex code or use HubSpot’s color picker to be used to create the Glassmorphism/Blur effect. Additionally, the opacity of the background color can be configured.

For browsers that do not support this effect, a non-blur version will be set.

glassmorphism-blur-background

POWER Footer →  Sub Area Top → Style → Background → Transparent

If set to transparent, the content on the page behind the Sub Area Top will be visible.

Configuring Columns

POWER Footer → Column 1 -6

For each column, you need to add at least one Wrapper.

Jump to Wrapper settings ↓

power-footer-advanced-column-settings

POWER Footer → Column 1 -6 → Layout → Alignment Vertical

Choice of Top, Middle, or Bottom for Desktop and Tablet.

Aligns the wrappers within the column.

column-layout-aligment-footer

Column Style Settings

POWER Footer →  Column 1-6 → Style

The style settings for the Column apply to the entirety of the column; each column can be styled independently otherwise the style settings from the Footer will be inherited.

Column styles are layered on top of the Footer styles, which can then be layered on top of with Wrapper styles.

sub-area-style-settings

POWER Footer →  Column 1-6 → Style → Color Scheme

Choice of Light, Dark, or Inherit.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

POWER Footer →  Column 1-6 → Style → Border

Choice of Top, Bottom, or None.

POWER Footer →  Column 1-6 → Style → Background

Choice of Background Color, Background Image, Background Gradient, Glassmorphism/Blur, Transparent.

POWER Footer →  Column 1-6 → Style → Background → 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.

style-mega-menu-background-color

POWER Footer →  Column 1-6 → Style → Background → Background Image

Select an Image for the Column background.

mega-menu-background-image

POWER Footer →  Column 1-6 → Style → Background → Background Image → Background Position

Choice of Bottom, Center, Left, Right, or Top.

For the Image, you can choose where the focal point is within the content area. 

POWER Footer →  Column 1-6 → Style → Background → Background Image → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

background-image-overlay

POWER Footer →  Column 1-6 → Style → Background → Background Gradient → Background Gradient Direction

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.

background-gradient

POWER Footer →  Column 1-6 → Style → Background → Glassmorphism/Blur

Define the background color by the color hex code or use HubSpot’s color picker to be used to create the Glassmorphism/Blur effect. Additionally, the opacity of the background color can be configured.

For browsers that do not support this effect, a non-blur version will be set.

glassmorphism-blur-background

POWER Footer →  Column 1-6 → Style → Background → Transparent

If set to transparent, the background of the Mega Menu behind the Column will be visible.

Configuring a Wrapper

POWER Footer → Column 1 -6 → Wrapper(s)

A wrapper is how you will group items within the column and allows you to apply additional styling. You can create multiple wrappers per column to separate content, but you will need at least one wrapper to add content to the column.

You can create rows across multiple columns by creating wrappers that contain the same content elements with the same height.

mega-menu-column-wrapper

POWER Footer → Column 1 -6 → Wrapper(s) → Internal Name

If left blank the Internal Name will default to "Wrapper(s) 1, and continue in sequential order for each wrapper in the column.

We recommend adding a name for your own sanity.

Jump to Content settings ↓

wrapper-internal-name

POWER Footer → Column 1 -6 → Wrapper(s) → Layout

Settings for Height and Horizontal and Vertical Alignment of the content within the wrapper for Desktop, Tablet, and Mobile.

footer-wrapper-layout

POWER Footer → Column 1 -6 → Wrapper(s) → Layout → Height

If left empty or set to 0, the height will dynamically change based on the content inside the wrapper.

Can be configured separately for Desktop, Tablet, and Mobile.

POWER Footer → Column 1 -6 → Wrapper(s) → Layout → Alignment Horizontal

Choice of Left, Center, or Right.

This is how you would like the content to align within the wrapper.

Can be configured separately for Desktop, Tablet, and Mobile.

POWER Footer→ Column 1 -6 → Wrapper(s) → Layout → Alignment Vertical

Choice of Top, Middle, or Bottom

This will only have an effect if the configured wrapper height exceeds the height of the wrapper content.

Can be configured separately for Desktop, Tablet, and Mobile.

For example, if you set the wrapper height to 100px and your content is only 50px tall, then you can choose whether you want it aligned at the top, middle, or bottom of the wrapper which will determine where the remaining 50px will be distributed.

Wrapper Style Settings

POWER Footer→  Column 1-6 → Wrapper(s) → Style

The style settings for the Wrapper apply to the entirety of the wrapper; each wrapper can be styled independently otherwise the style settings from the Column will be inherited.

Wrapper styles are layered on top of the Column styles, which are layered on top of Footer Styles.

wrapper-style-settings

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Color Scheme

Choice of Light, Dark, or Inherit.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Add Padding to Wrapper?

Option to add padding to the wrapper. This will add additional padding around the content within the wrapper.

By default, the content will span from edge to edge of the wrapper, if you are using a background you would use this setting to keep the content from touching the edge.

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Add Border Radius to Wrapper?

This will apply a border radius to the wrapper to round the corners to match the style in your theme settings; otherwise, the default is square edges.

Border Radius value is set in Theme Settings → Styling → Corners → Overwrite for Boxes.

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Background

Choice of Background Color, Background Image, Background Gradient, Glassmorphism/Blur, Transparent.

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Background → 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.

style-mega-menu-background-color

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Background → Background Image

Select an Image for the Wrapper background.

mega-menu-background-image

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Background → Background Image → Background Position

Choice of Bottom, Center, Left, Right, or Top.

For the Image, you can choose where the focal point is within the content area. 

POWER Footer →  Column 1-6 → Wrapper(s) → Style → Background → Background Image → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

background-image-overlay

POWER Footer→  Column 1-6 → Wrapper(s) → Style → Background → Background Gradient → Background Gradient Direction

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.

background-gradient

POWER Footer→  Column 1-6 → Wrapper(s) → Style → Background → Glassmorphism/Blur

Define the background color by the color hex code or use HubSpot’s color picker to be used to create the Glassmorphism/Blur effect. Additionally, the opacity of the background color can be configured.

For browsers that do not support this effect, a non-blur version will be set.

glassmorphism-blur-background

POWER Footer →  Column 1-6 → Wrapper(s) Style → Background → Transparent

If set to transparent, the background of the Column behind the Wrapper will be visible.

Adding a Content to a Wrapper

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s)

Adding Content is how you will add content items to your Footer.

Choice of Title, Menu, Button/Link, CTA, Icon, Social Icons, Logo, Line, Rich-Text-Field (default), or Spacer.

content-default-settings

POWER Footer → Column 1 -6 → Wrapper(s) → Internal Name

If left blank the Internal Name will default to "Content(s) 1, and continue in sequential order for each content in the wrapper.

We recommend adding a name for your own sanity.

content-internal-name

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Title

Add a Title to your Wrapper using the default style. To customize the style of the Title in your Footer, use the Rich Text Field content type.

title-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Menu

Add a Menu to your Wrapper to add a series of links as you would have in a typical menu.

Click Create new to configure an advanced menu for the links needed for this column wrapper.

menu-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Button/Link

Add a Button or individual Link to your Wrapper that can be styled using any of the CTA/Button Styles, including the Link style.

button-link-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → CTA

Add a CTA to your Wrapper that can be styled using any of the CTA/Button Styles, including the Link style.

We recommend using the Button/Link content type if you do not need to track conversions. Adding multiple CTAs can cause an impact on your page speed due to the amount of code needed for the HubSpot tracking code.

CTA-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Icon

Add an Icon to your Wrapper with the option to use the icon library or load your own image icon.

Please use an image with dimensions 30x30 px or 60x60 px for retina displays

Icon-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Social Icons

Add Social Icons to your Wrapper by adding the External URL and choosing the Icon from the icon library.

When selected, 4 social icons will be added as a starting point.

This can be used to create any icon with a link configured.

footer-social-icon-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Social Icons → Column Social Icons

Configure the Link and Icon for each Social Icon added.

add-social-icon-footer

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Social Icons → Column Social Icons → Flip Icon Horizontally

Option to flip the icon horizontally.

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Logo

Add your logo to the Footer with the option to override the default logo and logo link.

add-logo-to-footer

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Line

Define the line color, opacity, height, and padding for the top and bottom of the line.

line-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Rich Text Field

The Rich Text Field is the most flexible option for adding content to your Footer. There is so much you can do!

rich-text-content-type

POWER Footer → Column 1 -6 → Wrapper(s) → Content(s) → Spacer

Set the height of the Spacer in pixels.

Add a spacer to the wrapper to separate content or align with content in other columns.

content-type-spacer

Adding a Sub Area on Bottom

POWER Footer → Show Sub Area on Bottom

To activate the Sub Area on Bottom, check the box to reveal the settings.

sub-area-bottom

POWER Footer →  Sub Area Bottom

The settings will open with the Layout section set to 3 Columns, this is the max number of columns for the Sub Area Bottom.

sub-area-bottom-settings

POWER Footer →  Sub Area Bottom → Column Layouts & Widths

The column layout is based on a 12-column grid. The numbers in brackets are the column widths based on the total being 12.

Column Layouts & Widths available include:

  • 1 Column - [ 12 ] 
  • 2 Columns - [ 3 | 9 ] 
  • 2 Columns - [ 4 | 8 ] 
  • 2 Columns - [ 6 | 6 ]
  • 2 Columns - [ 8 | 4 ]
  • 2 Columns - [ 9 | 3 ]
  • 3 Columns - [ 2 | 2 | 8 ]
  • 3 Columns - [ 2 | 8 | 2 ]
  • 3 Columns - [ 8 | 2 | 2 ]
  • 3 Columns - [ 3 | 3 | 6 ]
  • 3 Columns - [ 3 | 6 | 3 ]
  • 3 Columns - [ 6 | 3 | 3 ]
  • 3 Columns - [ 4 | 4 | 4 ]

POWER Footer →  Sub Area Bottom → Vertical Alignment

The Vertical Alignment of sub-content (how the content aligns within the Sub Area Bottom).

Choice of Top, Middle, or Bottom.

POWER Footer →  Sub Area Bottom → Padding Top and Padding Bottom

Choice of Standard or None.

POWER Footer →  Sub Area Bottom → Column 1 -3

For each column, you can configure the Content and Layout.

In the Sub Areas, it is only possible to add one content item per column.

Screen Shot 2022-08-29 at 12.40.03 PM

POWER Footer →  Sub Area Bottom → Column 1 -3 → Content

Choice of Empty, Button/Link, CTA, Menu, Logo, Social Icons, or Rich Text Field.

POWER Footer →  Sub Area Bottom → Column 1 -3 → Content → Alignment Horizontal

Choice of Left, Center, or Right for Desktop, Tablet, and Mobile.

Determine where the content should be positioned within the column.

Sub Area Bottom Style Settings

POWER Footer →  Sub Area Bottom → Style

The style settings for the Sub Area Bottom apply to all columns.

sub-area-style-settings

POWER Footer →  Sub Area Bottom → Style → Color Scheme

Choice of Light, Dark, or Inherit.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

POWER Footer →  Sub Area Bottom → Style → Border

Choice of Top, Bottom, or None.

POWER Footer →  Sub Area Bottom→ Style → Background

Choice of Background Color, Background Image, Background Gradient, Glassmorphism/Blur, Transparent.

POWER Footer →  Sub Area Bottom → Style → Background → 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.

style-mega-menu-background-color

POWER Footer →  Sub Area Bottom → Style → Background → Background Image

Select an Image for the Sub Area Bottom background.

mega-menu-background-image

POWER Footer →  Sub Area Bottom → Style → Background → Background Image → Background Position

Choice of Bottom, Center, Left, Right, or Top.

For the Image, you can choose where the focal point is within the content area. 

POWER Footer →  Sub Area Bottom → Style → Background → Background Image → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

background-image-overlay

POWER Footer →  Sub Area Bottom→ Style → Background → Background Gradient → Background Gradient Direction

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.

background-gradient

POWER Footer →  Sub Area Bottom → Style → Background → Glassmorphism/Blur

Define the background color by the color hex code or use HubSpot’s color picker to be used to create the Glassmorphism/Blur effect. Additionally, the opacity of the background color can be configured.

For browsers that do not support this effect, a non-blur version will be set.

glassmorphism-blur-background

POWER Footer →  Sub Area Bottom → Style → Background → Transparent

If set to transparent, the content on the page behind the Sub Area Bottom will be visible. 

Mega Menu Style Settings

POWER Footer →  Style

The style settings for the Footer apply to the entirety of footer and is the background for all Columns, Wrappers, and Contents.

Footer-style-settings-1

POWER Footer →  Style → Color Scheme

Choice of Light, Dark, or Inherit.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

POWER Footer →  Style → Background → 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.

style-mega-menu-background-color

POWER Footer → Style → Background → Background Image

Select an Image for the Wrapper background.

mega-menu-background-image

POWER Footer →  Style → Background → Background Image → Background Position

Choice of Bottom, Center, Left, Right, or Top.

For the Image, you can choose where the focal point is within the content area. 

POWER Footer →  Style → Background → Background Image → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.

background-image-overlay

POWER Footer →  Style → Background → Background Gradient → Background Gradient Direction

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.

background-gradient

POWER Footer →  Style → Background → Glassmorphism/Blur

Define the background color by the color hex code or use HubSpot’s color picker to be used to create the Glassmorphism/Blur effect. Additionally, the opacity of the background color can be configured.

For browsers that do not support this effect, a non-blur version will be set.

glassmorphism-blur-background

POWER Footer → Style → Background → Transparent

If set to transparent, the background of the Column behind the Wrapper will be visible.

POWER Footer → Style → Background → 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

5 COLUMN Footer with Images

advanced-footer

POWER Footer → Layout → Width of Content

Content Width

POWER Footer → Layout → Column Layouts & Widths

5 Columns - [ 3 | 3 | 2 | 2 | 2 ]

POWER Footer → Layout → Compensate Outer Column Padding

None

Sub Area Top

None

Sub Area Bottom → Layout → Column Layouts & Widths

3 Columns - [ 3 | 6| 3 ]

Sub Area Bottom → Layout → Vertical Alignment

Middle

POWER Footer →  Style → Color Scheme

Dark

POWER Footer → Column 1-5

Each Column has 1 wrapper; images are added with Rich Text Field Content Type

Next Steps

Kudos on creating a custom footer for your website! If your brand uses a custom font or two and you didn't set it up while updating theme settings, you can start the font setup next.

NEVER MISS A POWER UPDATE

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