Working in the Layout Editor

From unroole CMS wiki
Jump to: navigation, search

Contents


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