Page Designs and Sub Navigation

Basics

Page Designs determine the overall template and layout of a page. Make sure you assign the correct page design to any new pages you create. The following page designs are currently available.

  1. Article 1 Col: Main Content: Single column article layout that displays the main content field with a placeholder underneath it to add more components.
  2. Article 2 Col: Left Nav + Main Content: Two column article layout with a narrow left column for holding a sidebar navigation component, and the main content field in the larger right column.
  3. Article 2 Col: Main Content + Right Sidebar: Two column article layout with a large left column that displays the main content field, and a smaller right column for holding miscellaneous components (images, videos, CTAs).
  4. Article 3 Col: Left Nav + Main Content + Right Sidebar: This layout has all 3 columns from the other article layouts.
  5. Category Page: A full-width hero section at the top of the page that includes breadcrumbs, a large background image, H1 tag, and other text content. The area underneath the hero has a flexible placeholder area for creating unique layouts. (Note: If you decide to use this design, make sure you assign the page a body class of .template-category-page)
  6. Full Width: This template is mostly blank and provides the most flexibility. Feel free to drag column splitters into the main content area to create your own custom layouts.
  7. Location Details: This design is used on all the location detail pages. This helps enforce consistency by including the same location component in the right sidebar as part of the template.
  8. Service Details: Full Width: This design is used on all service detail pages. This helps enforce consistency by including the same service list and search component at the bottom of the template.
  9. Service Details: Left Nav + Main Content: Identical to the full width service details template, but also includes a narrow left column for adding a sidebar navigation (useful for service pages that also have child pages).
  10. Service Details: Full Width + Location:  This design is used for any service detail pages that are also be tied to a single location.  The right-hand column is used to add a "Location Details" component that can be configured to display location information about any single location item under the site's "Data > Locations" folder or its sub-folders. ( More about the Location Details Component )
  11. Service Details: Left Nav + Main Content + Location:  Identical to the full width + location service details template, but also includes a narrow left column for adding a sidebar navigation (useful for service pages that also have child pages).  The right-hand column is used to add a "Location Details" component that can display address, phone number, map, contact points for a single location item under the site's "Data > Locations" folder or its sub-folders. ( More about the Location Details Component )
Setting a page design in the content editor
Setting a page design in the experience editor

Changing the Page Design of Existing Pages

Be careful when changing the page design of existing pages. The structure of each design is different, so any components that have been added to placeholders may disappear. The content will still exist in the Data folder under that page in the Content Editor, but the component will need to be re-added to the page within the new placeholder structure. You can do this by dragging the same type of component onto the page and pointing the Associated Content to the old content item in the Data folder. You can also find the existing component in the Presentation Details menu and update the placeholder path.

Fixing lost components - method 1
Fixing lost components - method 2

Sidebar Navigation

A sidebar navigation can be added to any page design with a left column. The sidebar nav is used to display child pages underneath the current page, or if the page doesn't have any children, it's used for displaying sibling pages in the same section. After adding the navigation component to the left column, you will need to configure a few fields in the component properties window.

Add and configure the sidebar nav