Editor's Corner: Mastering the Contextual Sidebar

As part of our ongoing training for content creators at UI Suite, we've been highlighting the power of the contextual sidebar in Display Builder. This set of panels, which appears when a component or block is selected, is the key to unlocking fine-grained control over the layout.

The most frequently used panel is the "Contextual form," which allows editors to configure the selected component. This is where they can change the text of a heading, select an image, or set the destination URL for a button. It replaces the often-clunky modal dialogs found in other systems with a clean, always-present interface.

Just as powerful are the "UI Styles" and "UI Skins" panels. "UI Styles" allows editors to apply utility classes from our design system directly to a component—for example, to add extra padding, change the text alignment, or hide the component on mobile devices. The "UI Skins" panel goes a step further, allowing them to override specific CSS variables for a single component, providing yet another layer of targeted visual control. Mastering these panels is the key to moving from a basic content editor to a true layout artist.