Carnegie Mellon University


A service provided by the University CMS Team


A sidebar is an area of content that can be added to a Content WYSIWYG. Sidebars appear alongside the main content area in desktop view, and below the main content area in mobile view (more on mobile responsiveness).

Sidebars are useful because:

  • You can utilize a variety of content including text, images, links and calendar events
  • They come in a variety of colors and styles
  • You can add multiple sidebars on one page
  • Bio Index and News Index pages have the option to feature a Jump Menu as a sidebar which provides links to different sections on the page

There are three types of sidebar, one of which being WYSIWYG which functions the same way as Content WYSIWYG. Additionally you can choose to format your sidebar as a Link List or an Event List.

Follow these best practices to ensure your sidebars aren't overwhelming your page.

  • Stick with 1-3 sidebars per page
  • Use sidebars to complement the information in the main content area, not as the main content element itself
  • Use sidebars to draw attention to important information, like a deadline or a contact method
  • Avoid lengthy content in sidebars; if you have a lot to say about something, consider placing it in the main content area
  • Having many color options is exciting, but try to be careful not to let colors distract from the content of your page; use color sparingly and intentionally
  • Helpful links
  • Contact information
  • Calendar events & deadlines
  • X feeds
  • Quick tips
  • Images

Add a Sidebar

  1. Enable the Sidebar checkbox located beneath the content WYSIWYG
  2. Select the Type (see examples below)
  3. Select a Style (see examples below)
  4. Enter a Heading (optional)
  5. Following the steps below for the sidebar type selected
  6. Click the plus sign (+) to add another sidebar, repeat steps 2-6
Adding a sidebar.

Sidebar in the page edit interface.