User Guide

Footer Experience Fragment

The Footer is a fundamental navigational Experience Fragment (XF) for PA.gov that displays consistently at the bottom of each page. It acts as the catch-all section that helps residents navigate and provides enterprise-level general and legal information.

 

The Footer is classified as an Experience Fragment rather than a component. This means that it is built of several different components, saved as one experience, and applied in multiple places across the site (in this case, on all pages). Because it is an Experience Fragment, editing in one location will affect the Footer in all locations

.

The Social Media component is part of the Footer Experience Fragment. The rest of the Footer is exclusively known as the Footer component. Guidelines for editing both are below.

Sample PA.gov Footer

Overview

Component name: Footer

Authors who can use: Admin only

Templates/page types that can use component: all

Required or optional: required

Authoring Fields

Creating a new Footer Experience Fragment

There is only one Footer for PA.gov, which has already been created. In nearly all circumstances, Admins should edit the existing version, rather than create a new one. To edit, skip to “Editing the Footer Experience Fragment- in general” section below.

For testing purposes, the steps to create a new Footer are below.

1. From the landing Navigation page, click on Experience Fragments.

AEM's landing page, the Navigation page, with the option to click on Experience Fragments.

2. To create new a Footer XF, click through the folders of the site that needs a Footer. In this example, that folder is CoPA PWP PAGov Fragments. Click on the language folder, then “Global.”

3. Click “Create” and “Experience Fragment” from the top right menu.

The Experience Fragment site hierarchy page, with the Global folder selected and the "Create" dropdown opened.

4. On the Create Experience Fragment page, click “Web Variation,” then “Next.”

5. Add a title, then click “Create.”

6. Click “Open.” The XF editing page will open in a new tab.

7. Hover over "Drag components here" so it highlights blue. Click the plus sign. From Insert New Component, select Global Footer.

Adding the Footer Experience Fragment to the page

The Footer is built into all AEM-managed PA.gov pages. It appears at the bottom of pages by default. 

Editing the Footer Experience Fragment- in general

1. From the landing Navigation page, click on Experience Fragments.

AEM's landing page, the Navigation page, with the option to click on Experience Fragments.

2. To edit the main PA.gov Footer, click on CoPA PWP PAGov Fragments folder.

a. To edit another Footer, such as the Web Content Management (WCM) site, click on that site’s folder and follow the same directions below.

3. Click through the folders until “Footer” is reached. Click the checkbox, then click “Edit” from top navigation.

The Experience Fragment site hierarchy page, with the Footer selected.

4. On screen is the Edit page, with only the Footer displayed. Editing the Footer here will affect the Footer on all PA.gov pages.

Editing the Footer Experience Fragment- main Footer

1. Hover over the blue outline of Footer. With the edit wrench, open the component.

Footer toolbar, featuring the edit wrench.

2. General tab

a. Return to Top field: Text here displays next to the button that sends residents to the top of the page upon click.

b. Logo Details accordion

i. Logo pathfinder: Click the folder icon. Select the image that should display as the logo.

ii.  Logo Alt Text field: Add alternative text for accessibility.

iii. Logo URL: Click the folder icon. Select the page that residents should be redirected to upon clicking the logo. This is typically the homepage.

c. Description field: Text here displays below the logo.

d. Contact Center accordion

e. Title field: Text here displays as the title above the contact mechanisms.

f. Contacts fields

i. Phone Number/Email field: Either a phone number or an email address can be typed here. A phone number will open the phone app on phone-enabled devices. An email address will open the email app on all devices.

 ii. Select different type of contact types dropdown: Select either “Phone Number” or “Email” for the desired formatting of the above contact mechanism.

The Contact Center accordion, with a phone number example, an email example, and an empty field example.

3. Footer Navigation tab

a. Add button: Add primary navigation field. There is a max number of four primary navigation columns.

b. Primary Navigation Title field: Add a title for the primary navigation column (ex. “Top Services”), under which a list of secondary navigation links will appear.

c. Footer Secondary Nav Section

i. Add button: Add secondary navigation field.

ii. Footer Secondary Nav Label field: Add a title for the secondary navigation (ex. “Register to Vote”). These labels will be clickable links. They will appear under the Primary Navigation Title added above.

iii. Footer Secondary Nav Link field: Add a link for the secondary navigation. The link may be internal or external.

d. Continue adding secondary navigation links to the same primary navigation column until done.

e. Continue adding primary navigation titles, repeating Steps 3.b – 3.d, until done.

Footer Navigation tab in Footer authoring dialog. Under Primary Navigation Title, author entered "Top Services." Under Footer Secondary Nav Section, author entered "Register to Vote" and a link.

4. Copyright and Legal Info tab

a. Copyright Text field: Add text here with the copyright disclaimer.

b. Legal Links fields

i. Add button: Add legal links fields. There is no max number of legal links (four currently display on the PA.gov sites).

ii. Legal Link Text field: Add a label for the legal info. These labels will be clickable links.

iii. Legal Link URL field: Add a link for the legal info. The link may be internal or external.

Copyright and Legal Info tab in Footer authoring dialog. Copyright Text field is filled. One Legal Links field is filled, with a link label and link.

Editing the Footer Experience Fragment- Social Media component

1. Hover over the Footer. Specifically hover over the Social Media component until it has a blue outline. Click on the edit wrench.

Social Media toolbar, featuring the edit wrench.

2. Edit the Social Media component as normal. For editing details, reference the Social Media component user guide.

Footer example

Sample Footer, with Social Media icons, navigation links, and copyright info/legal links. Figure A: sample Footer, with Social Media icons, navigation links, and copyright info/legal links.

Accessibility

1. Landmark regions have been built into the Footer to allow users with assistive technologies to quickly move through the Footer options.

2. Keyboard support has been built into the Footer to move keyboard focus across the Footer Navigation.

Other tips

1. Use the Emulator widget to test Footer size on different devices.

2. No part of the Footer should be changed on a regular basis.

3. Primary Navigation Titles are not clickable links.

4. Links can be internal or external. External links have an external icon, and will open a new tab when clicked.