# Wish your employees / students / customers 'Happy Holidays' using Xibo!

**URL:** https://community.xibo.org.uk/t/wish-your-employees-students-customers-happy-holidays-using-xibo/21052
**Category:** Guides
**Created:** [November 21, 2019, 4:21pm UTC](https://community.xibo.org.uk/t/wish-your-employees-students-customers-happy-holidays-using-xibo/21052 "2019-11-21T16:21:32Z")
**Posts on this page:** 1
**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: [November 21, 2019, 4:21pm UTC](https://community.xibo.org.uk/t/wish-your-employees-students-customers-happy-holidays-using-xibo/21052/1 "2019-11-21T16:21:33Z")

</div>

Use Xibo to easily make an eye catching Layout to display your special holiday message this year!

 ![happy_holiday_layout](https://community.xibo.org.uk/uploads/default/original/2X/2/2206a8fe1ca497c16c570c384311ed160ed69448.jpeg)

Log in to your Xibo CMS and navigate to **Layouts** from the main menu.

## 1. Add a Layout

Click on the [Add Layout](https://xibo.org.uk/manual/en/layouts.html) button and give this Layout a **Name** which you can easily identify later to schedule.

**Save**

 ![add_layout_form](https://community.xibo.org.uk/uploads/default/original/2X/1/161b0843556751f704fbfbbd4bb85d8b600b88ab.png)

On saving, the [Layout Designer](https://xibo.org.uk/manual/en/layouts_designer.html) will open.

(Versions earlier than 2.2, ensure that you ‘checkout’ your Layout to open the Layout Designer).

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

## 2. Layout Design

### Layout Background

Add a **Background Image** by uploading an image file to the [CMS Library](https://xibo.org.uk/manual/en/media_library.html).

 ![image_editor](https://community.xibo.org.uk/uploads/default/original/2X/3/34dd1a458bc6ebc3a63d7ab96c3d91a75b52a879.png)

Click on the **+Add a new background image** button, select the image file you wish to use and click the blue button to upload the image.

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

Once successfully uploaded click **Save**.

_ **Tip:** You can already use images that have been uploaded to your CMS library by using the drop down menu and selecting the image file that you wish to use._

### Add, resize and position Regions

Click on the pencil icon to open the [Region editor](https://xibo.org.uk/manual/en/layouts_regions.html).

 ![region_editor](https://community.xibo.org.uk/uploads/default/original/2X/1/1906fc7d3fd80eedb34442330d0ca7176cbbe77d.png)

By default a new Layout will contain a full sized Region, you can move and resize this to where you want it.

Use the handle, in the bottom right hand corner to resize.

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

Click in the Region and drag to move it into position.

Use the **+Add** button to add 3 more Regions.

 ![add_region](https://community.xibo.org.uk/uploads/default/original/2X/9/97bd00ac5675d0e871facca9060247288fc347c1.png)

Resize and position to suit the background image.

 ![region_placement](https://community.xibo.org.uk/uploads/default/original/2X/a/af9b7ec20fe1a514850bdf6f80d2fea8d8c07626.jpeg)

**Save** and **Close** to exit.

## 3. Add Content

### Region 1

The logo I want to use is already uploaded to my CMS Library so I can add this using the [Library Search](https://xibo.org.uk/manual/en/layouts_library_search.html) function.

_ **Tip** : Add the Image Widget and upload a media file if you do not have your logo already uploaded to your Library._

Click on the magnifying glass located on the bottom toolbar to search the Library. Use the filters to find the file you wish to use.

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

_ **Tip:** Use the handle in the bottom right corner of the Library Search window to resize and click to drag to make it easier to add files._

Click on the blue cross icon next to the file you wish to use and then click into a Region to add.

 ![add_logo](https://community.xibo.org.uk/uploads/default/original/2X/c/c0d20bdc5f06528b4c53ea464d1e21e05245e1bb.png)

Once added, close the Library Search window.

Tick to **Set a duration** and enter 3600 seconds to make it the longest running Region on the Layout.

 ![edit_logo](https://community.xibo.org.uk/uploads/default/original/2X/e/e3aab66c04d44531550f47e6d78a86a58e1e3857.png)

**Save**

The Preview window will now update and display the content of that Regions timeline.

### Region 2

Click on [Widgets](https://xibo.org.uk/manual/en/layouts_widgets.html) on the bottom toolbar and scroll through using the arrows until you find the [Text](https://xibo.org.uk/manual/en/media_module_text.html)Widget.

Highlight **Add** and click in a Region to add the Text Widget.

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

_ **Tip:** Click in a Region on the Timeline or Region Editor window. You can also use the grab option to drag the Widget to a Region!_

Click on the edit icon to open the inline editor

 ![inline_editor](https://community.xibo.org.uk/uploads/default/original/2X/9/9df330da1ad9290f985b01f2d204954fab6cc2d8.png)

Type your message and use the editor to format the text.

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

_ **Tip:** Ensure your text remains within the red Region border. Anything outside of this will not be seen!_

**Save**

### Region 3

Using Widgets, scroll through and find the [Image](https://xibo.org.uk/manual/en/media_module_image.html) Widget and click on the Region to add.

 ![upload_media](https://community.xibo.org.uk/uploads/default/original/2X/0/0bc56df4be58dc9916a0ae5dea7777839b339b17.png)

Click on **Add files** and upload the image file to use.

_ **Tip:** If the image you want to use has already been uploaded to your Library, use the **View Library** button to add or simply use the **Library Search** function!_

 ![image_region](https://community.xibo.org.uk/uploads/default/original/2X/3/3015a7122d5a25a04d12d910a24139e079792700.png)

### Region 4

Add the **Text** Widget as before, write and format your message.  
**Save**

_ **Tip:** Click on the Widgets tab again to close for a cleaner workspace!_

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

## 4. Preview Layout

[Preview](https://xibo.org.uk/manual/en/layouts_designer.html#preview) the Layout to see how it will look once [Scheduled](https://xibo.org.uk/manual/en/scheduling.html) to [Displays](https://xibo.org.uk/manual/en/displays.html)

Click on the arrow icon in the top left of the Preview window to view the full Layout and click the **Play** button.

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

_ **Tip:** Play in full screen by using the toggle in the top right corner of the Preview window._

This Layout can now be **Published** and **Scheduled** to Displays…but using the new [Spacer Widget](https://xibo.org.uk/manual/en/media_module_spacer.html) you can easily make this Layout more dynamic!

## 5. Add Spacer Widget

Using the **Spacer Widget** you can set a delay for content to be shown.

Click on Widgets and navigate to the **Spacer** Widget, add it to the second Region, after the Text Widget.

Tick to **Set a duration** and enter 15, **Save**.

 ![spacer_widget](https://community.xibo.org.uk/uploads/default/original/2X/5/58835d3a90438ed113f40e9895c3f690a948ae5a.png)

Add a Spacer Widget to the third Region, and **Set a duration** of 5 and **Save**.

Move this Spacer Widget so that it is the first Widget for this Region by clicking and dragging to replace the Image Widget position.

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

Add a Spacer Widget to the fourth Region, and **Set a duration** of 10 and **Save**.

Move this Spacer Widget so that it is the first Widget for this Region to replace the Text Image position.

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

Tweak durations to control how each Media will play on the Layout:

Highlight the **Image** Widget in the third Region and **Set a duration** of 20, **Save**.

Highlight the **Text** Widget in the fourth Region and **Set a duration** of 15, **Save**.

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

The above [Timeline](https://xibo.org.uk/manual/en/layouts_timeline.html) shows exactly how each Region will Play on the Layout:

(The Logo image will remain on screen for the duration of the Layout as this is the longest running Region).

**0 - 5 seconds** - Logo and message

 ![first_slide](https://community.xibo.org.uk/uploads/default/original/2X/c/c9a85013e6c2ce7f690570b57380658937e6d438.png)

**5 - 10 seconds** - Logo, message and ‘Holiday’ Image

 ![second_slide](https://community.xibo.org.uk/uploads/default/original/2X/e/e3884ccb3bb0bc539ddf99cc3e699b793f779d77.png)

**10 - 15 seconds** - Logo, Holiday Image and second message

 ![third_slide](https://community.xibo.org.uk/uploads/default/original/2X/6/6ee6bb19fae0fa6eb5942a0afea9ef692f2f7bf7.png)

Regions will then reload and play until the longest running Region has played in full.

View by clicking the **Preview**.

Click the green tick button on the bottom toolbar to **Publish** the Layout.

Once Published the Layout is ready to be Scheduled to Displays!

## Want to take a closer look?

This Layout is available as a free download to import into your CMS [here](http://xibo.org.uk/api/downloads/294)!