The Sidebar block is a custom HRS block that provides a theme-friendly method for displaying content in a sidebar-style layout. The Sidebar block provides a 70-30 split content area with the option to place the narrower sidebar section on the right or the left.

The two Sidebar columns will stack vertically on narrow screens. The wider of the two columns is the same width as the primary content area of the HRS theme, providing a seamless transition from sidebar block to main content when set to align wide.

In each column you can insert any other blocks you want, including additional columns.

How to Use

  1. Select Add block and choose Sidebar from the list (under the Layout Elements category).
  2. The Sidebar block will default to standard width and present two columns for you to enter content in.
  3. You can fill in your content by either inserting blocks using the add block buttons or dragging existing blocks into the columns.

Additional Options

The Sidebar block has two styles to choose from in the Styles panel of the block settings sidebar: Sidebar on left and Sidebar on right. These will switch which of the two columns is the narrow one.

You can also adjust the alignment (and width) of the Sidebar block by toggling wide or full alignment in the block toolbar. Wide and full alignment will expand to fill the content area, with or without margins.

Examples

A default sidebar on right style sidebar block with default alignment of none

A paragraph block in the first column of the sidebar block, followed by an image block.

A rocky beach under an overcast gray sky.
Cape Blanco, OR.
  • A list block in the second column of a sidebar element
  • List item two.
  • List item three.
Sign up

A sidebar on left style sidebar block with default alignment of none

A paragraph block in the first column of the sidebar block, followed by an image block.

A lot of pumpkins.
  • A list block in the second column of a sidebar element
  • List item two.
  • List item three.
Sign up

A sidebar on right style sidebar block with wide alignment

A paragraph block in the first column of the sidebar block, followed by an image block.

Two people in a field feeding a baby bear from a bottle.
  • A list block in the second column of a sidebar element
  • List item two.
  • List item three.
Sign up

Source

This is an HRS-created block provided as part of the HRSWP Blocks plugin.