Sidebar

The sidebar is an often-used element with useful properties:

• With a sidebar, the main content space is narrower.
• The reduced width makes text sections more readable.
• The page column provides dedicated space for e.g. metadata and other secondary elements.
• With the secondary elements out of the main space of the page, readers reach the primary call to action (conversion) earlier.
• Readers who are specifically interested will find the more detailed information in the side column.

However, there are also pitfalls that should be avoided at all costs:

• The sidebar is not to be read parallel to the content. The reading direction is primarily from top to bottom in the main column as well as in the sidebar.
• Do not place primary calls to action in the side column, as it is often overlooked or actively ignored by regular readers.
• The side column appears on mobile between content and footer.
• Specifically, we recommend not placing forms in the side column.

The side column is typically used for the following types of content, for example:

• Teaser with link to parent page or topic
• Author profile
• Metadata
• Related articles

If a content starts with a hero element, it is placed above the column across the entire width. This behavior can be disabled in the design.

If multiple pages share the same sidebar, a generic sidebar can be used. As long as the sidebar is not overridden on the specific page, the content takes over the generic page column of the parent term (e.g. of an article type or page type).

This allows you, for example, to display the page column with the address and other contact data of the public relations office on all articles of the article type "Press releases". This is also automatically taken over for new articles with the sidebar layout.