--- title: "Footer" description: "The Footer can consists of three Components: Footer Section, Footer Grid (with Site Links and Contactlist), and Footer Bar." path: https://www.eonshowroom.eon.com/en/page-elements/footer.html lastModified: 2026-09-22T10:07:30.350Z --- # Footer # Footer Paragraph 1: Lorem ipsum dolor sit amet At vero eos et accusam Paragraph 2: Another paragraph hits the ground. [Private Customers](https://www.eon.com) [Home Energy](https://www.eon.com) [eMobility](https://www.eon.com) [Solar Power](https://www.eon.com) [E.ON Home App](https://www.eon.com) [E.ON Drive](https://www.eon.com) [Business Customers](https://www.eon.com) [Challenges](https://www.eon.com) [Energy Solutions](https://www.eon.com) [Sectors](https://www.eon.com) [Success Stories](https://www.eon.com) [Optimum](https://www.eon.com) [Events for Investors](https://www.eon.com) [Analyst Estimates](https://www.eon.com) [Stock](https://www.eon.com) [Creditor Relations](https://www.eon.com) [Contacts for Investors](https://www.eon.com) [+44 189 876 87 for support](tel:+44 189 876 87) [+44 189 876 87 for complaints](tel:+44 189 876 87) [Mail](mailto:contact@eon.com) [YouTube](https://www.youtube.com/watch?v=pWB5JZRGl0U) [LinkedIn](https://www.linkedin.com/) [E.ON](https://www.eon.com) [https://www.facebook.com](https://www.facebook.com) [https://www.instagram.com](https://www.instagram.com) [https://www.twitter.com](https://www.twitter.com) [https://www.pinterest.com](https://www.pinterest.com) [https://www.youtube.com](https://www.youtube.com) [https://www.linkedin.com](https://www.linkedin.com) [Imprint](https://www.eon.com/en/imprint.html) [Privacy Policy](https://www.eon.com/en/privacy.html) [Terms of Use](https://www.eon.com/en/terms-use.html) [Contact](https://www.eon.com/en/contact.html) [PKI](https://www.eon.com/en/pki.html) ![E.ON Logo](https://www.eonshowroom.eon.com/content/dam/foundationNG/logo/logo-eon-red.svg) [How to Configure](#how-to) ### Description The Footer consists of two Parts, the Footer Sections Part, and the Footer Bar. In Footer Section Part multiple Footer Section Layouts (with Footer Grids) can be used to hold Components as wanted, while Footer Bar is a full Component under Footer Section Part for Logo and important Links. - Consists of two Parts: Footer Sections and Footer Bar - Special Footer Components inside Footer Grid: Site Links and Contactlist (but other Components are also possible) - It needs to be maintained as Experience Fragment [Check out Footer Section on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-section--used-as-footer) [Check out Footer Bar on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/docs/page-structure-footer-bar--docs) ### Inspirations Footer Bar without Footer Section: [https://www.facebook.com](https://www.facebook.com) [https://www.instagram.com](https://www.instagram.com) [https://www.twitter.com](https://www.twitter.com) [https://www.pinterest.com](https://www.pinterest.com) [https://www.youtube.com](https://www.youtube.com) [https://www.linkedin.com](https://www.linkedin.com) [Imprint](https://www.eon.com/en/imprint.html) [Privacy Policy](https://www.eon.com/en/privacy.html) [Terms of Use](https://www.eon.com/en/terms-use.html) [Contact](https://www.eon.com/en/contact.html) [PKI](https://www.eon.com/en/pki.html) ![E.ON Logo](https://www.eonshowroom.eon.com/content/dam/foundationNG/logo/logo-eon-red.svg) [Check out Live Example of a Page with fully reduced Web Navigation and Footer](https://www.eonshowroom.eon.com/en/page-elements/page-reduced-footer-and-header.html) ### Usage Rules & Features ##### Features - Consists of two Parts: Footer Sections and Footer Bar - Special Footer Components inside Footer Grid: Site Links and Contactlist (but other Components are also possible) ##### Properties - Logo Size can be adjusted per Viewport - It needs to be maintained as Experience Fragment - In Footer Bar Component, Social Media Links, normal Links (without Icon), some Copyright Information, and a Logo can be maintained ##### Design - Multiple Footer Grids are addable - Footer Grid has similar Grid Layout Options as normal Grid plus additional ones ##### In which Grid Columns does it fit? A Footer needs to be maintained as Experience Fragment and loaded in to the Pages via [FoundationNg Global Elements Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-global-elements-config.html). Footer can be used in a Grid serving additonal components. ##### DO's - Add Footer Bar as last Element - DL 2+2+2+2+2+2 | D 3+3+3+3 | T 6+6 Footer Grid Layout should be used for Site Link and Contactlist - Large Size should mainly be used on Landing Pages, Page Header Section or on Images ##### DONT's - Do not adjust Logo Size if using E.ON Logo ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![Empty Experience Fragment](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer_add-footer-section-01%3A2-1?fmt=webp) ### Add Footer Section In empty Experience Fragment Page, Editor needs to insert the Footer Section and choose Color Scheme of it. Inside this Footer Section, at least one Footer Grid needs to be added to add Components to the Footer. A Footer Grid is maintained similar to [normal Grid](/content/foundationNG/en/page-elements/grid.html). **Keep in Mind:** For the two special Footer Components, called Site Link and Contactlist, only "DL 2+2+2+2+2+2 | D 3+3+3+3 | T 6+6" Footer Grid Layout should be used. ![Add Footer Section](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer_add-footer-section-02%3A3-4?fmt=webp) ![Add Footer Grid](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer_add-footer-grid%3A3-4?fmt=webp) ![Configure Footer Grid](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer_configure-footer-grid%3A4-3?fmt=webp) ### Configure Footer Grid A Footer Grid is maintained similar to [normal Grid](/content/foundationNG/en/page-elements/grid.html). But additional, Editor can add Bottom Margin (checked by Default). This is especially usefull if using more than one Footer Grid in a Footer Section. **Keep in Mind:** For the two special Footer Components, called Site Link and Contactlist, only "DL 2+2+2+2+2+2 | D 3+3+3+3 | T 6+6" Footer Grid Layout should be used. ###### Available Column Layouts are: | Name of the Layout | Columns on Desktop Large | Columns on Desktop | Columns on Table | Columns on Mobil | | --- | --- | --- | --- | --- | | **D/T 12** | 12 | 12 | 12 | 12 | | **D 3+9 \| T 4+8** | 3+9 | 3+9 | 4+8 | 12/12 | | **D 9+3 \| T 8+4** | 9+3 | 9+3 | 8+4 | 12/12 | | **D/T 8+4** | 8+4 | 8+4 | 8+4 | 12/12 | | **D/T 4+8** | 4+8 | 4+8 | 4+8 | 12/12 | | **D/T 6+6** | 6+6 | 6+6 | 6+6 | 12/12 | | **D 3+3+6 \| T 6+6+12** | 3+3+6 | 3+3+6 | 6+6/12 | 12/12/12 | | **D 3+6+3 \| T 2+8+2** | 3+6+3 | 3+6+3 | 2+8+2 | 12/12/12 | | **D 6+3+3 \| T 12+6+6** | 6+3+3 | 6+3+3 | 12/6+6 | 12/12/12 | | **D/T 4+4+4** | 4+4+4 | 4+4+4 | 4+4+4 | 12/12/12 | | **D 4+4+4 \| T 12** | 4+4+4 | 4+4+4 | 12/12/12 | 12/12/12 | | **D/T 5+5+2** | 5+5+2 | 5+5+2 | 5+5+2 | 12/12/12 | | **D 2+4+4+2 \| T 6+6** | 2+4+4+2 | 2+4+4+2 | 6+6/6+6 | 12/12/12/12 | | **D 3+3+3+3 \| T 6+6** | 3+3+3+3 | 3+3+3+3 | 6+6/6+6 | 12/12/12/12 | | **D 3+3+3+3 \| T 12** | 3+3+3+3 | 3+3+3+3 | 12/12/12/12 | 12/12/12/12 | | **D 2+2+2+2+2+2 \| T 12** | 2+2+2+2+2+2 | 2+2+2+2+2+2 | 12/12/12/12/12/12 | 12/12/12/12/12/12 | | **DL 2+2+2+2+2+2 \| D 3+3+3+3 \| T 6+6** | 2+2+2+2+2+2 | 3+3+3+3/3+3 | 6+6/6+6/6+6 | 12/12/12/12/12/12 | ¹ The highlighted Grid Column Layouts are especially created for the Footer. ## Site Links Keep in Mind For Site Link, the first Page needs to be configured and all Pages, comming on Hierarchie Level below, are added automatically. But it is also possibe to set these Links manually, if needed. ### Add Site Links Site Links can be added inside Footer Grid. It is configured by setting the Link URL to a Page. All Pages on Hierarchy Level below will be added as Site Links to the Page by default. Editor needs to configure a Headline for those Links, as well as a Mobile Link Name. Moreover, if the Editor wishes to configure Pages manually, this is provided by selectig the Checkbox "Configurable Footer Links". ![Site Link editor Dialog for including all Child Pages](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/sitelink_dialog-automatic%3A3-4?fmt=webp) ###### Add Footer Links automatically If not selecting the Checkbox then all Child Pages, which do not have hide in Footer Navigation Option set on Page Properties, will be included automatically. ![Selecting Footer Links manually](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/sitelink_dialog-manual%3A3-4?fmt=webp) ###### Add Footer Links manually On selecting the checkbox "Configurable Footer Links", Editor needs to configure the Link Attributes i.e Link Text & Link URL. With this Configuration the configured Links will be shown as Site Links. ## Contact List Keep in Mind The Contact List can contain several Links and some additional Information. ### Add Contact List Contact List can also be added inside Footer Grid. Editor can add a Headline and some additional Information in the Editor Dialog. The Component itself contains a Parsys, where Editor can add the Contact List Links. ![Contact List editor Dialog](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contactlist_dialog%3A1-1?fmt=webp) ![Contact List Parsys](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contactlist_parsys%3A1-1?fmt=webp) ![Contact List Links Editor Dialog](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contactlist-link_dialog%3A4-3?fmt=webp) ### Add Contact List Links For the Contact List Links, Editor needs to configure Link Text, Link Title and URL. To get the correct Icons for Phone, Mail, and Social Media Links, Editor needs to set Link URL like for [normal Links](/content/foundationNG/en/content-elements/link.html). Beside that, Editor can check open in a new Window Option, if the Link should not open in same Window. ## Footer Bar Keep in Mind After the Footer Section, Editor can add Footer Bar Component. The Editor Dialog of Footer Bar Component consists of three Tabs. ![Configure Social Links](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer-bar_social-links%3A1-1?fmt=webp) ### Configure Social Links In first Tab of Footer Bar, Editor can add Social Links which will be displayed as Icons, if maintained. ![Configure Footer Links](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer-bar_footer-links%3A3-4?fmt=webp) ### Configure Footer Links In second Tab of Footer Bar, Links can be entered. These Links are called Footer Links. If an Usercentrics-ID is added to Configuration Page, a Link in Footer Bar can be configured to open Cookie Law Banner1. Therefore, corresponding Checkbox in Footer Bar Editor Dialog (Footer Links Tab) needs to be checked for the configured2 Link that should open it. 1 The Cookie Law Banner itself and other Settings for Usercentrics needs to be configured outside of AEM. Therefore, get in touch with [Platform Service Owner](mailto:urs.kramer@eon.com) again. 2 Link Text, Link Title, and URL should be configured. [Read more about Usercentrics](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-usercentrics-consent-config.html) ![Configure Logo Link and Copyright](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer-bar_logo-copyright-new%3A3-4?fmt=webp) ### Configure Logo Link and Copyright In last Tab, Editor can set Logo Link and Copyright Information. Here the URL is the Path to the Logo File, while the Logo should get an Alt-Text (by Default it is "Company Logo) and a Title. In Copyright Field Editor can also use a Placeholder for Year to automatically update it each Year. For Example *© E.ON ${year}* or *© ${year}*could be used. Furthermore, Logo Size can be adjusted per Viewport. ###### Adjust Logo Size It is possible to adjust Footer Size by configuring Logo Width per Viewport. **The default Values are perfectly fitting for E.ON Logo** and it is recommended to **not change them for E.ON Logo**. But with different Logos changing Size might be needed. Size should be added in Pixel, so please append px on your value, like 82px. **Default Sizes per Viewport are:** | Viewport | Default Logo Width | | --- | --- | | Desktop | 82px | | Desktop Large | 82px | | Tablet | 55px | | Mobile | 55px | ![Publish Footer Experience Fragment](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer_publish%3A2-1?fmt=webp) ### Footer Appearance For making the Footer appear on the Pages, Editor first need to publish the Experience Fragment. Afterwards, a Configuration Page needs to be maintained. If the Footer should be used on all Pages, it can be configured in Homepage Configuration Page. On the Configuration Page, Editor needs to set the Path to the Footer Experience Fragment at FoundationNG Global Elements Config. After publishing the Configuration Page, the Footer appears on all Pages that are on Hierarchie Level of one before the Configuration Page, and all after, till another Configuration Page changes this Configuration. [Read more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)