Unit Footer

This component allows you to include a Folwell themed footer on your site. A footer is the place a visitor goes to when they are lost on your site, are looking for contact information, or are looking for supplemental navigation on your site.

The University’s required footer includes the copyright, Equal Employment Opportunity (EEO) statement, and a privacy policy link. It will appear below your unit footer. Including this information within the unit footer is planned as a second phase for the unit footer component.

Usage, Best Practice, and Accessibility

Examples

Folwell offers five different variations of the unit footer and it’s been built with flexibility so you can easily display the content you need.

View Folwell Unit Footers

 


Usage

To add a unit footer block, follow the steps below. Drupal Lite users should follow these steps.

  1. Click on Extend in the Drupal menu bar.
  2. Filter for "folwell" and click on the checkbox to enable the Folwell Unit Footer module. Scroll down to the bottom of the page and click "Install." Note: You may need to install the Webforms module, if you haven't already. If you're prompted to install this module, Click "Continue" and filter for "webforms." Enable this module in the same way as the unit footer module.
enable folwell unit footer module example
  1. Go to Content, and select the "Blocks" tab.
A screenshot showing the top of the custom library page
  1. Click “Add content block” and select “Unit Footer” block type from the list of custom blocks
unit footer block example
  1. Select “Add Unit Footer: Full Width Title” to add a full width title to the unit footer.
add unit footer full width example
  1. Fill out the department name and parent unit on the fields provided.
department name example
  1. Check “Include Top Gold Bar” checkbox if you want to add a top gold bar to the footer.
  2. Choose the footer background color under the “Footer Background Color” section.
footer background color example
  1. Select and add the number of columns you want to create, under the “Number of Columns” section.
number of columns example
  1. Under each column, you have an option to add the following paragraphs.
footer column choices example
  • Unit Footer: Button
    Add the URL and link text to add a button to the column.
footer button link example
  • Unit Footer: Wordmark
    Add the wordmark title and image file to add wordmark to the first column. The wordmark should only be added to the first column or the far left column of the footer.
footer wordmark example
  • Unit Footer: Text 
    This gives you the option to add text to the column. The text title is considered the heading for the section of content in the footer.
footer text example
  • Unit Footer: Links
    Fill out the URL and link text field to add links to the column.
footer links example
  • Unit Footer: Contact
    Fill out the address fields to add contact information to the column.
footer address example
  • Unit Footer: Social Media Links
    Select the social media name from the “social media platform” dropdown and add the link to your social media channel/page.
footer social media example
  • Drupal webform
    This gives you the ability to embed any form that was built in the Drupal webform module. You can select the form from the “Webform” dropdown and embed it to your footer column.
footer webform example
  1. Save the custom block.
  2. Go to the “Block layout” page (structure > block layout) and place the unit footer block in Footer Bottom region
footer bottom example
  1. Save blocks
Best Practice
  • The unit/wordmark combination may be placed in the far left column of the footer. Consistent placement of this element, when used, will enhance user experience across our sites.
  • The unit footer provides a consistent location and style, allowing University site visitors to quickly determine where to find common information such as contact information.
  • The unit footer reinforces the University's brand in a precise, yet effective, manner while allowing units to customize information to their specific unit.
  • Links to disclaimers and policy content is often placed in the footer. Be selective about including content that will give the impression of “disclaimer bloat.”
  • When needed on a site, it’s recommended that Give buttons be included in the footer.
Accessibility
  • Use plain language and a clear information hierarchy when adding text to the footer.
  • Contact information should include social media channels that are regularly maintained as well as phone and email that are clickable
  • links that can be dialed or emailed from a mobile device.
  • The footer design has a proper contrast ratio.