woman-about-impact

AAG Footer

Developer Notes

Footer:

  • The Footer will be displayed on all pages of the site at the bottom of the page.
  • The Footer has been implemented using Partial Designs. It is located here - /sitecore/content/EH/AAG/Presentation/Partial Designs/Footer.
  • This partial is added to the Page Design.
  • The Bottom Right section of the Footer consists of Link "Back to top" which resides inside "Link" under the variant Back to Top.  
  • The Logo section consists of Logo which resides inside  the Media tab in the toolbox by the name Image(Reusable)
  • The list section consists of 3 types of lists:
    • The list with links and plain-text is made up of Component which resides under Page Content tab by the name Rich text Reusable. Example:-Address & Locations. It has a snippet associated with it called as Helpful Numbers
    • The list with all links and no plain text is made up of Components which resides under the EH Navigation tab by the name EH Link List
    • The list with no-heading is made up of Component which reside under the EH Navigation tab by the name EH Link List and select the variant as Footer link no heading 
    • The list is divided into 4 columns which are managed by Grid settings
  •  The bottom section consists of Description, Copyright, and Footer-Logo section
    • Description  - resides under the Page Content tab by the name Rich text (Reusable)
    • Copyright - resides under Page Content tab by the name Rich text (Reusable)
    • Footer Logo- Resides inside the Media tab in the Toolbox by the name Image(reusable)

Content Author Notes

1. Navigate to Presentation to Partial Designs to Footer

2. Right click Footer, Open in Experience Editor 

3. To manage the first two columns, click over the text and you will see the text dialog populate. You can open the RTE by clicking the pencil icon. 



Notes: The first two columns are managed by Rich Text Editor Fields and the last two columns are managed by EH Link Lists 

4. Click on the EH Link List Component 

5. Select a link to edit, a dialog box will pop up to edit/delete and manage the link

6. Click the edit link icon and another dialog box will populate to manage the links. Content Authors will be able to add internal links, media links, external links, anchors, mail and add javascript if needed. Link properties include: 

  • Link Description (Text) 
  • URL 
  • Target Window 
  • Style Class 
  • Alternate Text 

7. Content Authors can manage the placement of links in EE. Ensure you have design view enabled. (Located in the View Tab). Once the design mode is enabled, you will see the following dialog box populate. 

Link Options:

  • Add Link 
  • Delete Link
  • Move Up
  • Move Down
  • Move First
  • Move Last

8. Ensure all changes are saved and published.

 

Requirements

AAG Footer:

  • The Footer will be displayed on all pages of the microsite at the bottom of the page. 
  • The Footer should contain the following elements:
    • Image link (logo)
    • 4 Column layout (max 4)
      • Col 1 Heading (RTE)
      • Col 2 RTE (Click to call link)
      • Col 3 Link list
      • Col 4 Link list
      • RTE
        • Should include for copyright
      • Image logos (2 links)
  • Create partial OOB SXA components using RTE
  • Underline on hovering designated links and phone numbers
  • Eyebrow under heading.
  • Primary logo links to home page
  • Secondary logos link externally.
  • Follow  live site  for design and follow: AAG Brand Guidelines
  • This component must follow accessibility standards for alt text, and keyboard navigation.

Mobile:

  • Content is stacked on mobile
  • Image should fall under copyright

 

* Breakpoints will differ from the live site:

 

Breakpoints