Difference between revisions of "Layout Panels"

From unroole CMS wiki
Jump to: navigation, search
(Created page with "<gallery widths="178px" heights="100px"> File:Page Editor with theme preview options.png|Layout editor preview bar. File:Page Editor with in-page preview refresh button highli...")
 
 
(8 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
<noinclude>
 +
{{also|Layouts}}
 +
{{for|more information|Layout Editor}}
 +
</noinclude>
 +
 +
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.
 +
 +
{| class="wikitable"
 +
|-
 +
! 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 Layouts|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.''
 +
 +
<br />
 +
 +
These screenshots display the key components of the layout editor discussed above.
 +
 
<gallery widths="178px" heights="100px">
 
<gallery widths="178px" heights="100px">
−
File:Page Editor with theme preview options.png|Layout editor preview bar.
+
File:Layotu Editor Topbar.png|The layout editor topbar. From left to right, update messages, layout object name, box/divider/section buttons, template saving, previews and back button.
−
File:Page Editor with in-page preview refresh button highlighted.png|Layout editor in-page preview button highlighted.
+
File:Layout Editor Sidebar.png|The sidebar allows for the majority of property changes on elements of a layout.
−
File:Page Editor with external page preview button highlighted.png|Layout editor end user preview button highlighted.
+
File:Layout Editor Properties Panel.png|The properties of the current layout. These options can be changed via the pencil icon.
−
File:Preview of a page with the theme removed.png| In-page preview with theme removed.
+
File:Layout Editor Box and Widget Area.png|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.
 +
File:Layout Editor box panel.png|The sidebar panel displaying the actions available for a box.
 +
File:Layout Editor Expanded Box panel.png|Expanded box properties panel.
 +
File:Layout Editor Expanded Widget Panel.png|The widget additional panel displaying widgets that can be added to a box.
 +
File:Layout Editor Expanded Widget Properties Panel.png|The properties panel of an asset widget. Properties can change depending on the widgets functionality.
 +
File:Layout Editor Sidebar Position Elements.png|From left to right the alignment, lock and close icons used to position the sidebar.
 
</gallery>
 
</gallery>
 +
 +
{{clear}}

Latest revision as of 08:47, 18 July 2012

See also: Layouts
For more information, see Layout Editor.


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.

Retrieved from "https://wiki.unroole.com/index.php?title=Layout_Panels&oldid=1513"