Right Sidebar

What is a Right Sidebar?

In WordPress, a sidebar is a static column of widgets (small pieces of content and functionality) that appears next to the main site content.

These widgets are tidbits of information that direct visitors to take certain actions or provide extra information that may interest them.


Advantages and Disadvantages

Advantages

  • A tool for user experience: Depending on your design, using the right sidebar to offer your users multiple pathways enables them to discover relevant content on your site. By making it easier for users to find content they’re interested in, you can increase your chances of engagement which can lead to repeat visitors.
  • Flexibility: Designers are able to utilize their block library and groups to customize their right sidebar widget. Please refer to best practices in order to create an impactful design.

Disadvantages

  • Content limitations: Adding a right sidebar can limit space for your content which can result in a long page in order to accommodate a lot of content.
  • Possibly Distracting: Some, find the right sidebar distracting from the content on the page that they want users to focus on.

Right Sidebar Placement and Previews

When viewing your website on a desktop device, a WordPress sidebar appears to the right of your content. If someone views your website on a smaller device like a phone or tablet, it usually appears below the content.

Desktop Preview

Small Device Preview

How to Add a Right Sidebar

Sidebar widgets will only show up on pages using the Sidebar template. That is done by editing the page and selecting Page Attributes in the Document Settings on the right, then selecting Sidebar Template from the Template dropdown.

How to Edit your Right Sidebar

A right sidebar is accomplished via “widgets.”  WordPress role “Designer” is required in order to edit the sidebar.

You can now add any block to your site’s widget areas.

  1. From your dashboard left side menu, select Appearance > Widgets.
  2. To get started, select the toggle block inserter icon near the top toolbar.
  3. From the left side of the screen, your block library will appear. You choose any of these blocks to add to your Sidebar.
  4. On the middle of the screen, you’ll see a place to add widgets to the Primary Sidebar.
  5. You can add widgets to the Sidebar by dragging them from the left side and dropping them on the Primary Sidebar area. We recommend limiting the number of widgets to 3 or 4.
  6. Like with all blocks, use the right sidebar for more settings specific to the block you have chosen.

Tip: Do you want to create distinguishable sections within sidebar content? Use the group block to segment blocks together!

Best Practices

Keep it Simple and Uncluttered

Although you can use your sidebar in a lot of different ways, you don’t want to go overboard and cram it full of too much content.

If you make your sidebar too cluttered, visitors will feel overwhelmed and struggle to use it effectively. It can also distract users from your main content, which you should always try to avoid.

Instead, try to keep your sidebar uncluttered by only focusing on including the most important elements for your use case.

Design with Harmony and Consistency


Because your sidebar is a very visible part of your site (on desktop at least), it’s important that the content and style of your sidebar matches the rest of your site.

Common Blocks

Remember, you’re free to include all types of content in your right sidebar. With that being said, it might be difficult to get started. Here are some common blocks used in right sidebars at K.

  • Group block: Allows SCEs to create distinguishable sections within your right sidebar by segmenting blocks together.
  • Search box – Provides a search box where users can search any term, phrase, etc. within your website.
  • Social Media Links – SCEs can add links to their department’s social media pages to grow their following.
  • Call to Action – A section that encourages visitors to take action such as subscribing to your website’s blog posts, sign in to a K College system (e.g. Hornet Hive, Campus Calendar, Handshake, and more).
  • Buttons – A single button block to encourage users to take action.