Sidebar
Last updated: September 28, 2023
Overview
The sidebar feature allows Super Admins to manipulate Page and Activity layouts in creative new ways.
At its core, the sidebar is a column that is created “outside” of page content but displays within the margins of the page.
It can be asked to display on the same layers as page content (think of an extra Multi Column Row column) or display on a layer “above” the page content (like a fixed menu banner).
This allows for new layout choices. Some examples:
- Content that spans the height of multiple rows
- Content that overlaps other layout choices
- Customizable activity page layouts
- “Pinned” content that follows the user as they scroll past a specified point
Sidebar position or content may be controlled by Customizable Activity Templates. If the sidebar options are inaccessible from the activity page Sidebar tab, revisions will need to be made at a template level.
Sidebar Functions
Sidebar can be enabled from the Sidebar tab in the Page or Activity editor.
The sidebar has a wide variety of appearance and function customizations. Differences between Activity sidebars and Page sidebars are noted in the sections below.
Defaults:
- The sidebar will automatically be placed on the right side of the page as high as possible.
- It does not scroll with the user unless told to.
- The sidebar matches Corner Rounding styles from Look and Feel.
- The sidebar has no visible border or background until customized.
- Nothing will be visible in page preview until there is at least one block placed within the Sidebar Blocks tab.
- The sidebar will displace, but not limit, the columns in Page Content or the Layout tab for activity pages.
Sidebar Options
Sidebar Options control the styling, width, placement, scrolling, and handheld display of the sidebar.
Sidebar Options are not available for:
- Activity Pages without rows placed in the Layout tab
- Activity Pages using the Default Activity Content row
The standard activity sidebar is applied here. Blocks and backgrounds can still be customized.
Main Options
Shift the sidebar vertically
Allows more specific vertical sidebar placement by filling out the pixel field that appears when this option is checked.
The sidebar can be positioned any amount below top-alignment by entering a positive number and can be positioned starting in the row above by entering a negative number.
The sidebar only displaces content for rows included in the “Which row does the sidebar begin/stop?” fields.
If you overlap a row not included there by filling out this field, the sidebar may block out content. Be sure to preview your sidebar before publishing to be sure all content is visible.
Render the sidebar on the left of the page
Swaps the sidebar to the left side of the screen compared to the right-aligned default. Content will be displaced to the right.
Wants sticky sidebar
The sidebar will scroll with the user once the sidebar begins to leave the user’s view.
If the sidebar has enough content to be taller than the user’s viewport, it will follow the user once the bottom of the sidebar is visible.
The page area that the sidebar can scroll through or occupy is controlled by the Placement options: “Which row does the sidebar begin/stop?”
Give the sidebar shadow
Outlines the sidebar with a shallow darkening effect to appear as though it is ‘above’ page content (like Headings can with text shadow).
Mobile Options
This section controls the position of the sidebar content when asked to display on handheld devices.
Hide this content on mobile devices.
Removes the sidebar content like any other “Hide on handhelds” option for blocks, columns, or rows.
Render above the row where sidebar begins
This moves the sidebar content to appear at the top of mobile pages, before all page content. The Page or Global background will display beneath the Sidebar Background.
Render below the row where sidebar stops
This moves the sidebar content to appear at the bottom of mobile pages, after all page content. The Page or Global background will display beneath the Sidebar Background.
Width of Sidebar
Similar to using the Multi Column Row, the sidebar’s column can occupy 1/2 of the page’s area, 1/3 of the page’s area or 1/4.
Important Note: Regardless of how wide the sidebar is, the number of columns available from Page Content or the Layout tab is not affected.
For example: A full Multi Column Row (4 columns) paired with a 1/2 page sidebar will display each column’s content at 1/8 page width rather than 1/4.
Overlap Amount
This field controls the starting position of the sidebar and only appears when “shift the sidebar vertically” is selected from Main Options. The sidebar can be positioned any amount below top-alignment by entering a positive number and can be positioned starting in the row above by entering a negative number.
The sidebar only displaces content for rows included in the “Which row does the sidebar begin/stop?” fields.
If you overlap a row not included there, the sidebar may block out content. Be sure to preview your sidebar before publishing to be sure all content is visible.
Sidebar Placement
The “Which row does the sidebar begin” and “Which row does the sidebar stop” fields tell the sidebar where it can appear on the page. The numbers entered here must correspond with a row from Page Content or the Layout tab – exact numbers for each row can be seen to the left of their Row Title.
Each row included in these fields will have its content displaced to accommodate the sidebar.
Sidebar height is determined by block content, not by placement. Even if the sidebar is not asked to follow the user while scrolling, rows included here will have their content displaced.
Blocks
The block selection for sidebars is the same as the selection for rows with a few exceptions:
- No activity grids
- No card grids
- No blog posts
All other blocks are available and function identically when used in Page sidebars.
Unique Activity Sidebar Blocks
Unique blocks with an “Activity: Field” format are available in this sidebar. These blocks display information put into an existing activity template field. Most are directly named after their fields, for example “Activity: Buttons” block will display the blocks created from the Buttons tab.
Exception:
Activity: Upsell: Displays the Quick Details (taxonomies, quick detail info, and quick detail rich text content)
Padding and Alignment
Blocks will be top-aligned within the sidebar by default.
Full-width options (like an Image block at 100% image size or a Button block asked to occupy the entire column’s width) will stretch to each side of the sidebar with no margin.
To allow whitespace in the sidebar, a new padding checkbox has been added to each sidebar block’s Options tab. To separate blocks from the top or bottom border of the sidebar, small (20 px), transparent Separator blocks could be placed.
Background
Sidebars have the same background options as most rows/columns.
Transparent Background
The sidebar will not have a background, instead revealing the row or page background beneath sidebar content.
In handheld view, sidebar content will only display the page background instead of any row background.
Custom Background
All options for custom row or column backgrounds may be applied to sidebars. Solid or semi-transparent colors, images, gradients or a combination of background effects are available.