Design Mode Sidebar

• Design Mode Sidebar
  • Selecting a Layer to Edit
  • Design Mode Tabs

Design Mode Sidebar

The Design Mode Sidebar is accessed by going to the Module Editor, then the Right Sidebar, and clicking the Design icon ¹ in the Mode Switcher to enter Design Mode. The Module Editor opens in Design Mode, so the sidebar is already showing when a module is first opened. Entering Design Mode from Animation Mode closes the Timeline, and the Stage Top Bar changes to show Design Mode.

The Design Mode Sidebar is where a layer's content, styling, layout and behavior are edited. Its settings are divided across eight panels, opened one at a time from the row of tabs at the top of the sidebar, and each panel has its own document.

Selecting a Layer to Edit

The sidebar shows the settings of the currently selected layer. Until a layer is selected the tabs are disabled and the sidebar below them is empty. Select a layer by clicking it on the Stage, or by clicking its entry in the Layers sidebar.

To edit the Slide Background, click an empty part of the slide on the Stage, or click Slide Background at the bottom of the Layers sidebar list. Switching from one layer to another keeps the current tab open. If the Slide Background is selected while a tab it does not support is open, the sidebar switches to the Layer tab.

Design Mode Tabs (Tab Select)

Set which of the eight Design Mode panels is shown in the sidebar. The Layer tab is shown when the Module Editor opens. The Style, Interaction, Visibility and Accessibility tabs are disabled while the Slide Background is selected, since those panels do not apply to it.

Options:

• _Layer: Opens the Layer panel, for the layer's content, its position and size, its layout behavior, and how it resizes between devices. For the Slide Background it holds the background's content type and color.
• _Style: Opens the Style panel, for the layer's typography, background, border and spacing.
• _{Extra Style}: Opens the Extra Style panel, for three dimensional rotation, opacity, blend and filter modes, glass and blur effects, shadows, strokes, and spikes cut into the layer's edges.
• _Interaction: Opens the Interaction panel, for how the layer responds to the visitor's pointer, including movement that follows the cursor and styling and transforms applied on hover.
• _Parallax: Opens the Parallax panel, for moving the layer in response to page scroll and pointer movement.
• _Visibility: Opens the Visibility panel, for which device layouts the layer appears on, whether it appears only while the module is hovered, and, for layers on the Static Slide, which range of slides it spans.
• _Attributes: Opens the Attributes panel, for the HTML attributes placed on the layer, on its media, and on the element that wraps it.
• _{Accessibility}: Opens the Accessibility panel, for how screen readers treat the layer, including whether it is hidden from them, its semantic role, and its ARIA labels.