Layout Editor

From unroole CMS wiki
Revision as of 15:44, 30 July 2012 by Mbasset (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


Layout boxes.png

The layout editor with a few widgets and boxes.

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)

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.

Editing

{{#ev:youtubehd

 | 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.

Boxes

Layout Editor Box Handles.png

Highlighting the layout editor box quick update handles.

Each box provides a few different quick update properties that can be used in the layout editor. These include the following:

Property Description
(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)


Layout Editor Moving Box.png

A box being moved around in the layout editor. The outlined area denotes where the box will be placed once released.

Moving boxes around a layout is a straightforward process. To move a box follow the steps below:

  1. Select the box you wish to move by clicking on it once.
  2. Click and Hold on the empty area of the topbar of a box.
  3. Drag the box around the layout and position the outlined area where you would like it to be placed.
  4. Let go to finalize moving the box. The indicator in the top left of the layout editor will update to denote a successful move.

Widgets

Layout Editor Widget drag handles.png

Highlighting the widget handles available in the system. Yellow: edit, Blue: Move, Red: Remove

Each widget provides three quick update handles that can be used to modify certain properties of the widget. These handles are described below:

Property Description
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.


Layout Editor Moving Widget.png

A box being moved around in the layout editor. The outlined area denotes where the box will be placed once released.

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:

  1. Select the blue move handle of the widget.
  2. 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.
  3. Let go to finalize moving the widget. The indicator in the top left of the layout editor will update to denote a successful move.

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

Layout Editor Standard Design.png

A page designed strictly with widgets, themes and content from the CMS. No HTML widgets or external files are used.

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

Layout Editor Static Design.png

A layout with a number of standard widgets and an HTML widget (highlighted) providing additional functionality through custom JS/CSS and HTML.

Layout Editor Static Design Code.png

The following is the code used in an HTML widget to produce the screenshot above as part of a static design on the 'Tiger eye' 404 page.

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 Layout.png

A layout with a number of standard widgets and an HTML widget (highlighted) providing additional functionality through custom JS/CSS and HTML.

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.