--- title: "Template Structure" description: "There is only one Template available for Pages. This is structured in different Areas." path: https://www.eonshowroom.eon.com/en/aem-basics/template-structure.html lastModified: 2025-01-23T15:44:15.686Z --- # Template Structure # Template Structure There is only one Template available for Pages. This is structured in different Areas. - Only one Page Template - Consists of different Areas - In Content Area always include Content as: Section -> Grid -> Component ### Structure of Page Template The Page Template consists of different Areas with fixed Order: - Navigation (including Flyouts) - Experience Fragment / Config Page - Third Level Navigation (optional) - Experience Fragment - Hero Component (optional) - Breadcrumb (optional) - Context Aware Config / Page Properties - Content Area (12 Columns) - Anchor Navigation (optional) - Page Properties - Footer Section with Footer Grid - Experience Fragment / Config Page (optional) - Footer Bar - Experience Fragment / Config Page - Bottom Drawer (optional) - Experience Fragment ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/template-overview-clickable%3A3-4?qlt=90&fmt=webp) digit 1 light Navigation ##### Navigation (including Flyouts) Experience Fragment / Config Page The Navigation consists of three Parts: - Meta Navigation - Toolbar Navigation - Main Navigation [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 2 light Third Level Navigation ##### Third Level Navigation (optional) Based on an Experience Fragment The Third Level Navigation Component can have multiple Entries, as well as a Button or a Link. [Third Level Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/3rd-level-navigation.html) digit 3 light Hero Component ##### Hero Components (optional) A Hero Component can be a: [Content Header](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header.html) [Multi Content Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage.html) [Campaign Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/campaign-stage.html) [Classical Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage.html) [Carousel](https://www.eonshowroom.eon.com/en/content-elements/carousel.html) [Hero Section](https://www.eonshowroom.eon.com/en/teasers-and-highlights/hero-section.html) digit 4 light Breadcrumb ##### Breadcrumb (optional) Context Aware Config / Page Properties The Breadcrumb Navigation includes the current Page as the last Item in the Breadcrumb Trail. But this last Item (the current Page) is not a Link, while all others are Links. [Breadcrumb in Showroom](https://www.eonshowroom.eon.com/en/page-elements/breadcrumb.html) digit 5 light Content Area ##### Content Area Content Area consists of 12 Columns. In this Area most Components can be included to build the Content of the Page. Inside Content Area the following Structure is necessary: > Section -> Grid -> Components [Section in Showroom](https://www.eonshowroom.eon.com/en/page-elements/content-section.html) [Grid in Showroom](https://www.eonshowroom.eon.com/en/page-elements/grid.html) digit 6 light Anchor Navigation ##### Anchor Navigation (optional) Page Properties The Anchor Navigation provides an optional Navigation that can be included on any Page. With this Navigation Users have a better Orientation on very long Pages. [Anchor Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/anchor-navigation.html) digit 7 light Footer Sitemap ##### Footer Sitemap (optional) Experience Fragment / Config Page In Footer Sitemap is build in following Structure Inside Content Area the following Structure is necessary: > Footer Section Layout Flexibel or Static -> Footer Grid -> Footer Components [Footer in Showroom](https://www.eonshowroom.eon.com/en/page-elements/footer.html) digit 8 light Footer Bar ##### Footer Bar Experience Fragment / Config Page Footer Bar is added after Footer Sitemap and contains Social Links, some other Links like Legal Links, as well as Logo and Copyright. [Footer in Showroom](https://www.eonshowroom.eon.com/en/page-elements/footer.html) digit 9 light Bottom Drawer ##### Bottom Drawer (optional) Experience Fragment The Bottom Drawer Component is a powerfull Sales Component which can be added to any Page as a fixed Element at the Bottom of a Page. This ensures that this Click to Action Element is always visible for any User. [Bottom Drawer in Showroom](https://www.eonshowroom.eon.com/en/content-elements/bottom-drawer.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_composition%3A2-1?fmt=webp) digit 0 light Web Navigation Container ##### Navigation (including Flyouts) Experience Fragment / Config Page The Navigation consists of three Parts: - Meta Navigation - Toolbar Navigation - Main Navigation [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 1 light Web Meta Navigation ##### Meta Navigation Experience Fragment / Config Page Inside the Navigation Component, there are three Components. One of it is Meta Navigation. For Meta Navigation Editor can add Meta Navigation Links. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 2 light Web Toolbar Navigation ##### Toolbar Navigation Experience Fragment / Config Page Toolbar Navigation can contain Icon Links and Logo. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) digit 3 light Web Main Navigation ##### Main Navigation Experience Fragment / Config Page Main Navigation can contain Titles for Flyouts or direct Links, as well as Icon Links and Logo. While Flyout Navigation can be connected to Main Navigation via Navigation Flyout Experience Fragment. [Navigation in Showroom](https://www.eonshowroom.eon.com/en/page-elements/web-navigation.html) ### Area of Navigation The Web Navigation (0) consists of three Parts: - Web Meta Navigation - Web Toolbar Navigation - Web Main Navigation Each Web Main Navigation Link can open a Secondary Web Navigation Flyout. [Go to "Navigation" Description](https://www.eonshowroom.eon.com/en/page-elements/new-web-navigation.html) ### Area of Third Level Navigation The Third Level Navigation Component is based on an Experience Fragment. It can have multiple Entries, as well as a Button or a Link. [Go to "Third Level Navigation" Description](https://www.eonshowroom.eon.com/en/page-elements/3rd-level-navigation.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/hero-area-new%3A2-1?fmt=webp) ### Area of Hero Component A Hero Component can be a: [Content Header](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header.html) [Multi Content Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/multi-content-stage.html) [Campaign Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/campaign-stage.html) [Classical Stage](https://www.eonshowroom.eon.com/en/teasers-and-highlights/stage.html) [Carousel](https://www.eonshowroom.eon.com/en/content-elements/carousel.html) [Hero Section](https://www.eonshowroom.eon.com/en/teasers-and-highlights/hero-section.html) ### Area of Breadcrumb The Breadcrumb Navigation includes the current Page as the last Item in the Breadcrumb Trail. But this last Item (the current Page) is not a Link, while all others are Links. [Go to "Breadcrumb" Description](https://www.eonshowroom.eon.com/en/page-elements/breadcrumb.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/template-overview-clickable%3A16-9?fmt=webp) ### Area for Content Content Area consists of 12 Columns. In this Area most Components can be included to build the Content of the Page. Inside Content Area the following Structure is necessary: > Section -> Grid -> Components [Go to "Section" Description](https://www.eonshowroom.eon.com/en/page-elements/content-section.html) [Go to "Grid" Description](https://www.eonshowroom.eon.com/en/page-elements/grid.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/anchor-nav%3A4-3?fmt=webp) ### Area of Anchor Navigation The Anchor Navigation provides an optional Navigation that can be included on any Page. With this Navigation Users have a better Orientation on very long Pages. [Go to "Anchor Navigation" Description](https://www.eonshowroom.eon.com/en/page-elements/anchor-navigation.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer-area-clickable%3A2-1?fmt=webp) digit 1 light Footer Sitemap ##### Footer Sitemap (optional) Experience Fragment / Config Page In Footer Sitemap is build in following Structure Inside Content Area the following Structure is necessary: > Footer Section Layout Flexibel or Static -> Footer Grid -> Footer Components [Footer in Showroom](https://www.eonshowroom.eon.com/en/page-elements/footer.html) digit 2 light Footer Bar ##### Footer Bar Experience Fragment / Config Page Footer Bar is added after Footer Sitemap and contains Social Links, some other Links like Legal Links, as well as Logo and Copyright. [Footer in Showroom](https://www.eonshowroom.eon.com/en/page-elements/footer.html) ### Area of Footer The Footer Area consists of two Areas. One is named a Footer Sitemap *(no. 1 in Image)* and the other one is the Footer Bar *(no. 2 in Image)*. There are two Footer Section Layouts available for Footer Sitemap Area: - Footer Section - Static Layout The "Footer Section - Static Layout" is a static Layout. It contains only one Grid automatically where Grid Layout can not be choosen by Editor. There, other Components can be added. - Footer Section - Flexible Layout The "Footer Section - Flexible Layout" is a flexible Layout. It contains at least one "Footer Grid", where Grid Layout can be choosen by Editor. There, other Components can be added. [Go to "Footer" Description](https://www.eonshowroom.eon.com/en/page-elements/footer.html)