Version:

    Updating the Sections UIKit site footer

    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:

    1. 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.
    2. 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.

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.