Footer Experience Fragment

Component name: Footer

Authors who can use: Admin only

Templates/page types that can use component: all

Required or optional: required

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.

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.

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.

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

1. From the landing Navigation page, 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.

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.

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

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 (note- if not authored, no Contact Center will appear in the Footer)

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

ii. 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.

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.

4. Optional Text Container tab (note- if not authored, no container will appear in the Footer)

a. Pre-Title field: Add a pre-title to appear in the container.

b. Title field: Add a title to appear in the container.

c. Description text area: Add description text. Formatting options and internal/external linking are available. Recommended to enter maximum of 3 sentences.

5. 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.

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

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

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.

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.
5. Optional text container appears to the right of navigation links. It is designed for Footers with 0-2 columns of navigation. If 3 or more navigation columns are needed, please contact Sapient.