Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Sidebar

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

Sidebars are super because:

  • You can put a variety of content in them including text, images, links, calendar events, and lovable yet loopy characters
  • They come in a variety of colors and styles
  • You can add multiples on a 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
We understand, we love them too! It's easy to think that sidebars are like post-its for miscellaneous content. However, there is a thing as too much sidebar! Follow these best practices to ensure your sidebars aren't taking center stage.

  • Stick with 1-3 sidebars per page
  • Use sidebars to complement the information in the main content area
  • Use sidebars to draw attention to something quickly, 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 color options is nice, but try to be tasteful; a rainbow of sidebars may distract from the content
  • Helpful links
  • Contact information
  • Calendar events & deadlines
  • Twitter feeds
  • Quick tips
  • A nice picture. Tip: did you know you can use any picture from CMU's Flickr account on your website? You're welcome!

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.