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.
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 - Use the WYSIWYG to enter your content. This shouldn’t be too long - something like an address is ideal.
Content on right - Use the WYSIWYG to enter your content. This shouldn’t be too long - something like copyright info is ideal.
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:
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.
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:
Let’s go into these in a bit more detail.
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.
Both the left and right containers house a WYSIWYG element and are 50% width at breakpoints tablet and above.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Mar 26 2025 01:07:54 GMT+0000 (Coordinated Universal Time)