The layout editor is a tool that is used to edit Layouts. It is composed of a topbar, sidebar and edit area. Through the layout editor much of the content of Pages and Channel Layouts can be edited. The layout editor also features in-place editor previewing, end user preview testing and template creation.(depending on type of layout)
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.
|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.
| NBZqTP3-zAo | 300 | left | A introductory video to the layout editor.
The following sections outlines the various quick handles for different elements of the Layout Editor.
Each box provides a few different quick update properties that can be used in the layout editor. These include the following:
|(x) Delete||Removes the box and all of its content from the layout.|
|(+) Add Widget*||Bring up the widget add panel for this box.|
|(>) Orientation*||Aligns this box to either the left or right of the layout. The default is left aligned.|
|Box > "name"||The name of the box.|
|Width Dropdown*||Used to change the width of this box relative to the layout.|
|(Bottom of Box) Drag Handler||Can be used to force a minimum height to the box. Useful when trying to produce a specific layout or when the content can vary widely.|
* Not available on all boxes. (ex: Divider)
Moving boxes around a layout is a straightforward process. To move a box follow the steps below:
- Select the box you wish to move by clicking on it once.
- Click and Hold on the empty area of the topbar of a box.
- Drag the box around the layout and position the outlined area where you would like it to be placed.
- Let go to finalize moving the box. The indicator in the top left of the layout editor will update to denote a successful move.
Each widget provides three quick update handles that can be used to modify certain properties of the widget. These handles are described below:
|Edit (Yellow)||Opens the edit panel used to modify widget properties.|
|Move (Blue)||Used to drag a widget around a layout either within a box or in-between boxes.|
|Remove (Red)||Remove the widget from the layout entirely.|
* Some widgets may not have these properties. Ex:Widgets that are locked may not have an edit or remove handle within the layout editor.
Widgets can be moved around either the box it already belongs to or into the content area of a different box. To move a widget follow the steps below:
- Select the blue move handle of the widget.
- Click and hold while dragging the widget around the layout. Note that you should drag slowly as sometimes boxes will jump when the widget is added to them.
- Let go to finalize moving the widget. The indicator in the top left of the layout editor will update to denote a successful move.
Depending on your level of knowledge with HTML/CSS/JS, unroole pages can be designed in one of three ways.
- Standard - Good for someone with little to no HTML/CSS/JS knowledge to build a page using theme style only.
- Static - Good for pages that don't fit within the page box model and admins who have a high level of HTML/CSS/JS knowledge.
- Composite - The best of both worlds mixes both standard and static content. Good for someone with limited HTML/CSS/JS knowledge.
In the images to the right we see a simple page with the default top section, a single full sized box and an HTML widget which takes up the space of the box. The HTML that was used to create this static design is shown to the right and includes a sample of the unroole content markup used to display the 'tiger eye' image seen for this layout.
Composite design blends the idea's of Standard Layout Design and Static Layout Design together. It uses a combination of standard pre-made widgets in a layout but then provides additional functionality through targeted HTML widget. Composite designs are good for adding in functionality without having to create a specific widget. This is particularly useful if the functionality only exists in one layout and can be done without an system deployments or updates.