# Improved Layout Designer in 2.3.0-alpha

**URL:** https://community.xibo.org.uk/t/improved-layout-designer-in-2-3-0-alpha/21498
**Category:** Guides
**Created:** [January 8, 2020, 12:11pm UTC](https://community.xibo.org.uk/t/improved-layout-designer-in-2-3-0-alpha/21498 "2020-01-08T12:11:52Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![natasha](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/natasha/32/18270_2.png) [@natasha](https://community.xibo.org.uk/u/natasha)
#### Post date: [January 8, 2020, 12:11pm UTC](https://community.xibo.org.uk/t/improved-layout-designer-in-2-3-0-alpha/21498/1 "2020-01-08T12:11:52Z")

</div>

## Guidance as to the improvements that have been made to the Layout Designer for the 2.3 alpha release.

In 1.8 many elements of the Layout Designer were hidden from view, such as the available **Edit Options** for media, **Timeline** of content for Regions and all the available **Media** options which resulted in many screen clicks to get to where you needed to go. Based on feedback gathered from users of 1.8, we improved the Layout Designer to make design features more visible and more easily accessible for users.

As before, on first adding a Layout, the **Layout Designer** will open, now with a more simplified view:

 ![layout_designer](https://community.xibo.org.uk/uploads/default/original/2X/8/8ae062265dcf3f823222b259db875776db7ddc9e.png)

Following the release of v2 of the CMS and the feedback received since that release, we have made improvements in an effort to make the user experience more intuitive, smoother and much easier when using the new look Layout Designer of v2.

Click on the **Edit Layout** icon to put into an ‘edit mode’ to add and configure **Regions**.

 ![edit_layout](https://community.xibo.org.uk/uploads/default/original/2X/5/59cd81610222ec039a468379036872a9b6e80e8b.png)

Clicking anywhere in a **Region** will open the **Region Options** form for that Region to allow for more precise **Positioning** , to determine a **Layering order** (if appropriate) and to apply an **Exit Transition** if required. Alternatively, use the resize handle in the bottom right hand corner of a Region to drag and drop. Reposition and move Regions around the canvas as in 1.8.

 ![edit_region](https://community.xibo.org.uk/uploads/default/original/2X/3/36e664c917ceb702ac0d8341cf5297d509133a38.png)

Easily **Add** , **Delete** or toggle to a **Fullscreen Mode** using the available buttons along the bottom of this window whilst in ‘edit’ mode. Return to the **Layout View** and exit edit mode after saving any edits.

Use the **Edit Layout** form to add a **Background Colour** or **Background Image** to the Layout as in 1.8.

 ![layout_background](https://community.xibo.org.uk/uploads/default/original/2X/f/f2d2fd74c28c140cdb989d757a4c73247eeab4cd.png)

**Media** is added to **Regions** using the **Library Search** feature or by adding available **Widgets**.

 ![library_search](https://community.xibo.org.uk/uploads/default/original/2X/f/f7c80ae91e2010139ec4d71648793c915fce889e.png)

Clicking on the **Library Search** button, on the bottom toolbar, opens the Library Search window which will show all your stored, uploaded **Media** files already held in your **CMS library**. Use the available fields to filter your search results. This window allows for multiple tabbed searches by using the + icon to add tabs!

This Window can be resized and moved around the screen by using the resize handle in the bottom right hand corner of the window and clicking in the window to simply move by drag and drop.

Clicking on the **blue cross** next to a **media file** will add it to the **Media Add Queue**.

This ‘Media Queue’ allows for reordering of the selected media files by dragging to a new order as well as the removing of files from this list. **Add** queued media to a Region by clicking directly into a **Region** to add.

 ![media_add_queue](https://community.xibo.org.uk/uploads/default/original/2X/4/4c040c01c98818c79054002f4a700633583240a7.png)

Click on **Layout Designer Widgets** to open.

 ![layout_designer_widgets](https://community.xibo.org.uk/uploads/default/original/2X/a/a7d36377b59fe98cfe4d3c4ec832b35533a60727.png)

Each **Widget** has a ‘star’ in the top left corner. Clicking on a star marks the Widget as a ‘favourite’ and it will therefore be shown at the beginning of the Widget list for easier selection when designing Layouts.

![favourite_widget](https://community.xibo.org.uk/uploads/default/optimized/2X/b/b59a0bf74d027b540b22f2790dd19810a5c7bda3_2_690x27.png)

Widgets are added to Regions by clicking on the **+ button** then clicking in a **Region** or by **drag and drop** to the target Region.

![add_widget](https://community.xibo.org.uk/uploads/default/original/2X/d/d04b58e4015180426ff4ffb5c473fd8c4f6b16f2.png)

Clicking in a **Widget** on the **Timeline** opens the available **Edit options** for that Widget, allowing for configuration.

 ![edit_options_form](https://community.xibo.org.uk/uploads/default/original/2X/b/bdc1c20611652b1500e4a4f3ed8fbfdfacdfe239.png)

Drag and drop items in a **Regions** timeline to reorder the **Playlist** for that Region.

**Media** can now be added to the **Timeline** at a specific point on the target **Region**. When adding, simply click or drag to the point you wish to add.

 ![point_on_timline](https://community.xibo.org.uk/uploads/default/original/2X/b/b4edff8955fddb0fc968b00c3b473735b952e974.png)

The left hand side of a Region’s **Timeline** includes an overview as to the positioning of that Region on the Layout, clicking here will open the **Region Options** form to make edits for that Region. Alternatively click on the **edit icon** next to the overview to go into ‘edit mode’.

 ![region_timeline_edit](https://community.xibo.org.uk/uploads/default/original/2X/1/188bbb14f5c21b14b72e7c9c92f2fb32dfc24aa1.png)

Located next to the edit icon is a button that will take you to a **Playlist Editor** for that Region which has a similar vertical interface to that of the 1.8 CMS. Add and configure **Media** as before using the **Library Search** function and selecting **Widgets**.

 ![edit_playlist](https://community.xibo.org.uk/uploads/default/original/2X/7/74d3e06b9bf47daa176e7a37fe55558ed0cedb15.png)

Right click on a **Widget** on the **Timeline** to easily open the **Tools** menu to easily assign actions to Widgets. The **Tools** menu is also located on the bottom toolbar.

 ![tools](https://community.xibo.org.uk/uploads/default/original/2X/5/58f9836374a80b9d5f1e82281ad55aa93b9d4154.png)

Use the arrows to **Preview** content assigned to a **Widget**.

 ![region_preview](https://community.xibo.org.uk/uploads/default/original/2X/5/525d8002dd89c7a2298936c65d9280ddca393993.png)  
Use the back arrow to return to the **Layout View** to **Preview** the full Layout. Use the arrows to cycle through the content assigned to **Regions**.

 ![layout_region_preview](https://community.xibo.org.uk/uploads/default/original/2X/f/f9b0405f58ede4322d81a3aaa6f3455048e9cc44.png)

Click on the **Play** button to Preview how the full **Layout** will play when scheduled.

 ![layout_preview](https://community.xibo.org.uk/uploads/default/original/2X/7/77fde4798c4de35d481da1c7de7b740202a83eb8.png)

Toggle to **Full Screen Mode** to tab through content using the arrows for each Region as well as Play a Layout Preview.

 ![fullscreen_preview](https://community.xibo.org.uk/uploads/default/original/2X/d/ddebb3a36d8c56ed609a7e2179fa3d07a18a61d0.png)

We welcome all users, old and new, to try this developmental preview which has been made available via our recommended installation **Docker** only at present. To download and see all the features this release contains, please see our latest [Blog](https://blog.xibo.org.uk/2-3-0-alpha-released/).

Any feedback or indeed any issues you encounter with the Layout Designer, please do post your responses to this topic.

Thank you for your support!

---

<div class="post-metadata">

### Author: ![lgray](https://community.xibo.org.uk/user_avatar/community.xibo.org.uk/lgray/32/9056_2.png) [@lgray](https://community.xibo.org.uk/u/lgray)
#### Post date: [January 24, 2020, 8:28pm UTC](https://community.xibo.org.uk/t/improved-layout-designer-in-2-3-0-alpha/21498/2 "2020-01-24T20:28:01Z")

</div>

This looks absolutely fantastic. Great job!
