The UIKit includes a Footer component, which is placed at the bottom of the site templates. The footer includes footer navigation, social network links and two text fields that can be used for additional information.

Configuring the footer component

The Footer component has configurable settings that allow you to make changes to the footer without modifying the Footer component. To configure the Footer component, navigate to Site Studio > Templates > Master templates. The Footer component needs configuring in both the Site template and the Site template - Boxed.

Configuration options available:

Content on right

Content on right - Use the WYSIWYG to enter your content. This shouldn’t be too long - something like an address is ideal.

Content on left

Content on right - Use the WYSIWYG to enter your content. This shouldn’t be too long - something like copyright info is ideal.

Footer

Footer color theme - Choose from Light, Dark and Colored. The selected theme corresponds to a custom style class that is applied to the footer element.

If you would like to update the theme with different colors to match your brand, you can do one of the following:

• If you know the colors being changed need to be changed everywhere on the site, change them in Website settings > Color palette. This will then update all uses of the changed color.
• If you only want the changes to apply to this component, add any new colors to your color palette so they can be reused, then update the relevant footer theme custom style. 

Desktop menu settings

Modifier classes are added to the footer element to achieve these behaviors. They affect the display of the footer menu at breakpoints laptop and above.

Footer menu position - Choose from Left, Center and Right. The footer menu will be horizontally-aligned according to the option selected. Menu links may wrap onto multiple lines if there isn’t enough horizontal space. If you do not want this to happen, consider reducing the number of top-level links in your menu.

Modifying the Footer component

If the configuration options (listed above) don't meet your requirements, you can make changes directly to the Footer component. Before making any changes to the Footer component, read the information below to understand how it is built and the best way to make modifications.

The footer component layout canvas can be split into multiple parts:

• The footer element - a container that wraps around all other footer content.
• The primary row (with class .primary-row) containing three sibling containers labelled left, centre and right.
• The secondary row (with class .secondary-row) containing two sibling containers labelled left and right.

Let’s go into these in a bit more detail.

Primary row - left, center and right containers

• The left container is currently empty. It grows in size to accommodate a center and right-aligned menu, and shrinks to zero width to accommodate a left-aligned menu.
• The center container houses the footer menu.
• The right container houses the social links component. It grows in size to accommodate a center and left-aligned menu, and shrinks to actual size to accommodate a right-aligned menu.

These sibling containers are critical for footer menu alignment options to work correctly and must not be deleted, as they grow and shrink with CSS Flexbox properties to support this. The contents within these containers can be changed.

Secondary row - left and right containers

Both the left and right containers house a WYSIWYG element and are 50% width at breakpoints tablet and above.

Updating the Primitives UIKit site footer

Desktop menu settings

Modifier classes are added to the footer element to achieve these behaviors. They affect the display of the footer menu at breakpoints laptop and above.

Footer menu position - Choose from Left, Center and Right. The footer menu will be horizontally-aligned according to the option selected. Menu links may wrap onto multiple lines if there isn’t enough horizontal space. If you do not want this to happen, consider reducing the number of top-level links in your menu.

Modifying the Footer component

If the configuration options (listed above) don't meet your requirements, you can make changes directly to the Footer component. Before making any changes to the Footer component, read the information below to understand how it is built and the best way to make modifications.

The footer component layout canvas can be split into multiple parts:

• The footer element - a container that wraps around all other footer content.
• The primary row (with class .primary-row) containing three sibling containers labelled left, centre and right.
• The secondary row (with class .secondary-row) containing two sibling containers labelled left and right.

Let’s go into these in a bit more detail.

Primary row - left, center and right containers

• The left container is currently empty. It grows in size to accommodate a center and right-aligned menu, and shrinks to zero width to accommodate a left-aligned menu.
• The center container houses the footer menu.
• The right container houses the social links component. It grows in size to accommodate a center and left-aligned menu, and shrinks to actual size to accommodate a right-aligned menu.

These sibling containers are critical for footer menu alignment options to work correctly and must not be deleted, as they grow and shrink with CSS Flexbox properties to support this. The contents within these containers can be changed.

Secondary row - left and right containers

Both the left and right containers house a WYSIWYG element and are 50% width at breakpoints tablet and above.