Layout Panels
The layout editor is broken down into a few key components. The following chart outlines common panels/button available in the layout editor and their function.
| Element | Location | Purpose |
|---|---|---|
| Activity Indicator | Topbar | Displays success/failure status of different activities in the layout editor. |
| Layout Container Name | Topbar | The name of the object for which this layout applies. Ex: Pages, Channel Layouts |
| Box | Topbar | Creates a new box on the bottom of the layout. See Boxes |
| Divider | Topbar | Created a new divider box on the bottom of the layout. See Boxes |
| Section | Topbar | Adds a new section to the bottom of the layout. see Sections |
| Content | Topbar (*) | Allows placing of a content box on certain types of layouts. See Boxes |
| Save as template | Topbar (*) | Gives the ability to save the layout (and containing object) as a template. |
| Hide Editor Styles | Topbar | Hides some of the custom layout styles necessary for editing for a quick preview of the layout. |
| Preview | Topbar (**) | Allows a content admin to preview the layout with channel layout and theme of choice applied. The 'in-page' (↻) preview button to refresh the theme within the layout editor. The 'end user' (→) preview button to be taken to the end-user version of that page with the theme applied. |
| Back | Topbar | Will navigate back to the containing object admin panel. |
| Sidebar Breadcrumbs | Sidebar -> Top Nav | Provides a breadcrumb to allow a content admin to navigate back up the hierarchy of the sidebar. |
| Layout properties | Sidebar -> Top Area | Displays the layout properties such as width and columns and allows for editing by content admins. |
| Box/Section/Widget area | Sidebar -> Bottom Area | Displays the hierarchy of the page for easy browsing and editing. |
| Box Actions | Sidebar -> Layout -> Box, Content Area-> Box -> Topbar | Displays the actions available on a box such as adding widgets, editing properties or removing from layout. The content area provides some quick property changes. |
| Box Properties | Sidebar -> Layout -> Box -> + | Displays the actions available on a box such as adding widgets, editing properties or removing from layout. |
| Box Widgets | Sidebar -> Box, Content Area -> Box | Displays all of the widgets that are contained in a box. |
| Widget properties | Sidebar -> Box -> Widget -> Edit, Content Area -> Box -> Widget -> Edit | Displays the properties of a a widget that can be changed. |
* Does not apply to all layouts.
** Provides different functionality per layout containing object.
These screenshots display the key components of the layout editor discussed above.
The layout editor topbar. From left to right, update messages, layout object name, box/divider/section buttons, template saving, previews and back button.
The sidebar allows for the majority of property changes on elements of a layout.
The properties of the current layout. These options can be changed via the pencil icon.
The layout area where boxes and widgets in the layout are displayed. Clicking on a box or widget shows the sub-panel for that element.
The sidebar panel displaying the actions available for a box.
Expanded box properties panel.
The widget additional panel displaying widgets that can be added to a box.
The properties panel of an asset widget. Properties can change depending on the widgets functionality.
From left to right the alignment, lock and close icons used to position the sidebar.
