On this page
The Layout Designer is the heart of content creation in Xibo. Each time a new Layout is added, or an existing one needs a design change, the Layout Designer is used.
Xibo makes layout design simple through the use of drag and drop,interactive previewing and design flexibility. On adding a new Layout, the Layout Designer will open:
A status indicator is shown to the left of the top toolbar to show you the current ‘play’ status of the selected Layout:
- This Layout has not been built yet.
- This Layout is valid and can be scheduled once Published.
- This Layout is invalid and will not be Published for scheduling.
- This Layout contains media that can only be assessed Player side, and can be scheduled once Published.
The total Duration of the selected Layout is displayed here in seconds, which updates each time a Media item is added or an existing Duration is edited, along with the Layout Dimensions applied from the selected Resolution on the Edit Layout form.
The Layout selector provides easy navigation between all Layouts the logged in User has permission to edit without having to leave the Layout Designer page. Use the dropdown menu to change the Layout you are currently viewing/editing.
Located next to the Layout Selector is a menu of options that can be performed for Layouts, depending on the status of the Layout.
Layouts in a Draft status have the following:
Once you are happy with your designs, set your Layout to Publish ready to be Scheduled.
Layouts can be set to be Published straight away with updates automatically pushed to Layouts that are in the schedule. A Publish Date can also be selected to Publish a Layout at a specified date and time.You can also use the Row Menu for a selected draft Layout to set to Publish immediately or on a set date..Published Layouts can be viewed in a read-only mode and ‘Checked out’ to create a draft Layout to make any edits needed.
Any changes made to the Layout can be completely discarded, reverting the Layout to the previous Published version.
Clicking on Discard will delete the draft and leave the Published version untouched.
Unlock Layout (visible when another User is attempting to edit the same Layout)
If a User attempts to edit a Layout that is already being edited by a User, the Layout will lock. The User will be locked out from editing the Layout for a specified amount of time (as shown in the lock message) or until the Layout is unlocked.On selecting the Unlock Layout button, the User will be redirected to the Layout Grid.
Layouts in a Published status have the following:
Enable editing by putting the published Layout into a draft status.
Schedule published Layouts onto one or more Displays directly from the Layout Designer.
Use your design as a Template for creating additional Layouts.
As you create your Layout, the Layout View will update so that you can view all the elements as you go to ensure the correct positioning of Regions and the correct ordering of Widgets, so it will play as you intend.
Edit Layout Mode
All new Layouts, by default, have one full screen empty Region, represented as a semi-transparent overlay. Use the Edit Layout Mode to add, position and resize Regions, by clicking on the Edit icon to open the editor.
Clicking on a Region in the opened editor, opens the Region Options form which allows for refinement of Positioning and the application of Exit Transitions for when the Region finishes as well as configuring Actions for the Region.
Use the arrow, in the bottom left corner of this window, to return to the Layout View.
Play a full Preview of your Layout by clicking on the Play button located at the bottom left of the Layout View window.
Click on a Widget to view the media content and use the arrows to cycle through all Widgets that have been assigned to that Region.
Return to the Layout View by clicking on the back arrow at the bottom left of the Preview screen.
Edit aspects of your Layout,Regions and assigned Widgets using the available options in the **Edit **forms.
Once assigned, click on Widgets from the Timeline to open the available options in the Edit form for that media item.
The Layout Timeline displays the duration of individual Widgets and gives you an overview of how your configured media will play on the Layout.
Located under the Timeline, the Interactive Drawer is used to add Widgets to be used when configuring Interactive Actions.
Add Widgets or Library items in the same way as adding to Regions by clicking to add or by drag and drop.
Once added, set a Target Region and configure using the available Edit options.