Difference between revisions of "Layout Editor"
Tommy.leung (Talk | contribs) (→Design Practices) |
|||
| Line 21: | Line 21: | ||
{{:Layout Panels}} | {{:Layout Panels}} | ||
| + | |||
| + | == Editing a Layout == | ||
| + | |||
| + | {{:Layout Editing}} | ||
== Design Practices == | == Design Practices == | ||
Revision as of 08:57, 18 July 2012
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)
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.
Editing a Layout
Design Practices
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.
Standard
The unroole layout editor has been designed to allow for the majority of content to be entered and managed through the CMS with little to no knowledge of HTML, CSS or JavaScript. Building layouts in the CMS using only content from within the CMS and without adding or modifying the strcuture of the layout through HTML widgets is referred to as standard design. Using a standard design allow for maximum compatibility and reduces the chance of layout rendering error. The standard design approach allows the widgets to generate the HTML/CSS/JS of a layout themselves, whereas the Static Layout Design or Composite Layout Design can corrupt the page with invalid user syntax.
Static
A static design of a website functions much like other CMS's and allows a content editor to add any HTML code to a page instead of using the pre-built widgets. This can be useful when designing pages which have dynamic content that does not conform to the rest of the site structure or theme. A simple content markup allows certain types of content to be linked within HTML widgets, Stylesheets, JavaScripts and other text areas to manage the inclusion of content to these static text areas. To read more about this syntax see unroole Content Markup.
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
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.
