Sidebars with the Group Block

Right Sidebar

This is a default right hand sidebar with a border.

Sidebars are available to float to the left or right of content. We recommend using a right alignment, unless a left is necessary.

Sidebars are created using the Group block with different variations. You can add sidebars to your page or post content by clicking the + sign to bring up your block palette, and typing “sidebar” to see your options.

The variations include:

  • Right sidebar with border – a right-hand sidebar with a border (default sidebar block)
  • Left Sidebar with border – a left-hand sidebar with a border (default sidebar block)
  • Right sidebar with background – a right-hand sidebar with a gray background
  • Left Sidebar with background – a left-hand sidebar with a gray background
  • Right sidebar (no background) – can only be accessed with the “Group” block selected through the transform to variation dropdown menu
  • Left sidebar (no background) – can only be accessed with the “Group” block selected through the transform to variation dropdown menu
  • Sidebar style (no alignment) – can only be accessed with the “Group” block selected through the transform to variation dropdown menu. This is useful for using the sidebar style within a column (see last example)

Options for sidebar width are available in the block sidebar under the Other Helper Classes panel. The sidebar can be made wider or narrower.

Left Sidebar

Mobile Order

Sidebars will display in the order that they are within the content on a mobile device. If you would like a sidebar to display at the very end of the content or at the end of a content group, you can select the order with the Mobile Order Priority dropdown under the Mobile Options panel.

By default, items with this selection will move to the bottom of the content area. If you want to group content together and display it at the end of the group, it is important that you toggle OFF the “Inner blocks use content width” option or the sidebar will not display correctly on desktop or mobile.

As an example, the sidebar to the left will display under this paragraph on mobile.

Alignment/Float Helpers

Right sidebar with gray background

This is an example of a newsletter sign-up form in a sidebar.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. Sidebars and aligned images use this CSS property. Floating items on a page can sometimes lead to undesirable results in the elements next to or after it. We have some classes under the Other Helper Classes panel that can fix these style issues.

Clear Float

If a block after the floated element intersects or does not sit well with the floated element, we recommend “clearing the float” with a class from the Clear Float dropdown. You can clear both (left and right) only left or only right.

Float Margin

There are times that surrounding elements may not have the proper margins next to a float. This often happens with list items next to a left floated element. Also, a few words might be widowed after the floated element. To fix these design issues, select the appropriate option under the Float Margin dropdown. For example, if the sidebar is floated to the right without any extra container width selections, select Right Margin.

A sidebar can be created using the column block. To retain sidebar styles such as smaller text, you can add a group with the variation “Right/Left Sidebar (no styles).”

Unlike aligned elements, this sidebar does not extend beyond the content container.

Sidebar style with no alignment

This group style is used within the column block to mimic the sidebar styles. The width of this sidebar depends on the column width.

This is an example of a global CTA

Supporting Text for the global CTA

Call to action