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
I could see myself going crazy with sidebars. What are the best practices I should follow?
- 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
What are some uses for sidebars?
- 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
- Enable the Sidebar checkbox located beneath the content WYSIWYG
- Select the Type (see examples below)
- Select a Style (see examples below)
- Enter a Heading (optional)
- Following the steps below for the sidebar type selected
- Click the plus sign (+) to add another sidebar, repeat steps 2-6
Sidebar in the page edit interface.
An Event List is used for promoting events or highlighting deadlines. Each event listing may contain a link for additional information.
- Select Add Events (note: the Import RSS Feed option is not currently supported)
- Specify Start Date; use End Date (optional) if the event spans multiple days
- Insert Event Title or Description
- Add Link (optional) to link to a page with additional event details
- Select Choose File to link to a page or file on your site; use the Link Chooser to browse and select the page or file
- Select URL to link to an external site; insert the Link URL
- For links to an external site or to a document (e.g., PDF) enable the checkbox for Open in New Window
- Click the plus sign (+) to add another event, repeat steps 2-6
- To provide a link to a full calendar or events page, complete the steps for More Events Link (optional)
The example above uses the Left Rule style which contains a white background and a grey vertical line at the left.
A WYSIWYG is an open content area for text, images, media, and more.
- Add content to the WYSIWYG
The example above is styled with a blue background.