> For the complete documentation index, see [llms.txt](https://docs.cubu.com/guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cubu.com/guides/digital-signage/managing-screen-and-frame-layouts.md).

# Managing Screen and Frame Layouts

{% hint style="info" %}
Digital Signage -> **Signage Designer.**

Editing screen layouts requires the **Engagement Admin** role.
{% endhint %}

A digital sign screen contains **frames**, each displaying a different content type. The Screen Layouts define the frames to use and how they are organized.

Before you continue, please read:

{% content-ref url="/spaces/8vfRpZGqpk7N0egaXMQ8/pages/g7vaOyi6OIBDUnlzyzIs" %}
[Digital Sign Appearance](/guides/digital-signage/digital-sign-appearance.md)
{% endcontent-ref %}

## Adding a Screen Layout

Before using a screen layout for a digital sign, you need to add the layout to your organization from Cubu's pre-defined layout library:

* Go to Digital Signage / Signage Designer / Screen Layouts.
* Click **New Screen Layout** to open the new Screen Layout.\
  ![](https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2F05yz0WdQ9CpsX7iJpx9A%2Fimage.png?alt=media\&token=4ba4cced-ea51-47a3-9018-80d10f8a9b36)
* Click on the desired layout and click **Select**.\
  ![](https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2F9KY75ndKnZNQDp3l8sfm%2Fimage.png?alt=media\&token=aa407f62-0aae-457f-a90c-b830ba2eeeb7)
* Give the layout a descriptive name and click **Create** to add this layout to your organization.

When you add a screen layout to your organization, any **frame layout** used by the layout is also added to your organization. You can manually add **additional frame layouts** to your organization by choosing Frame Layouts on the navigation panel.

## Editing Screen Layouts

After you add a screen layout to your organization, you can make the following changes:

* Customized settings of individual frames (when applicable).
* Replace frame layouts for individual frames. This allows you to choose a different design for specific frames.

### Customizing Frames

* Click on a screen layout to open the Screen Layout page.
* Go to the Frames tab.
* Click on a frame to edit.

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FaGLuA25ooKHLAHYR3gr3%2Fimage.png?alt=media&amp;token=cee9e9b4-796a-46b4-b2dd-f36619c8a56f" alt=""><figcaption><p>Screen Layout Frames</p></figcaption></figure>

### Editing Background Frames

#### Frame Layouts

Cubu offers various background frame layouts, including image backgrounds and solid colors. The selected **theme** determines the actual background image.

<div align="left"><figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FRrafkC7grSUgp6AJlKoy%2Fimage.png?alt=media&amp;token=594a649f-af59-4422-b4f6-35737f0d869b" alt=""><figcaption><p>Background Frame Layout</p></figcaption></figure></div>

### Editing Banner Frames

#### Frame Layout

Cubu offers various banner frame layouts. If you want to include a QR code for a portal, choose a banner layout that supports it.

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FjKPg1XUuvtDcOZUycQ0q%2Fimage.png?alt=media&amp;token=6dd5f7f6-8569-4c52-a521-bd2d7a662005" alt=""><figcaption><p>Banner Frame Layouts</p></figcaption></figure>

#### Texts

Banner frames allow you to customize the **Page Title** and **Page Info**.

### Editing Data Frames

Data frames display real-time queue status for the queues defined on the Data tab of the Digital Signage details page.

#### Frame Layout

Cubu offers various data frame layouts, providing different ways to organize and visualize the queue data.

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FxLULHFsMbAniAyVDO0Ls%2Fimage.png?alt=media&amp;token=71ffee6a-65a6-4723-ae1c-dee73bf0bf5f" alt=""><figcaption><p>Data Frame Layouts</p></figcaption></figure>

#### Texts

Data Frames allows you to customize and provide translations for the following texts:

* In Service Title
* In Queue Title
* Custom Text 1
* Custom Text 2

#### Settings

Data frames allow you to configure the following settings:

* **Show in-queue cases:** Check this box to show the cases in the inbox queue (waiting and pending).
* Show active cases: Check this box to show the cases being served.
* **Max. Items per Page:** Controls the number of queues to show on. If the sign needs to show more queues, it will split the list into pages and alternate between pages.
* **Paging interval:** The number of seconds to show each page when the date is split into pages.
* **Max in-queue items:** The maximum number of cases in the queue to show for each inbox queue.
* **Max. Active Items:** The maximum number of cases being served to show for each inbox.

### Editing Ticker Frames

Cubu provides a ticker frame showing scrolling text items based on an RSS feed.&#x20;

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FzKcxbuMdX5GAcjPImZ8F%2Fimage.png?alt=media&amp;token=8cd4675c-7f7f-4464-ae54-68e1607c88b3" alt=""><figcaption><p>Ticker Frame Layouts</p></figcaption></figure>

#### Settings:

* **RSS feed URL**: The URL of the RSS feed. The URL must reference a valid RSS XML file.
* **Logo**: Choose the source of the logo to show:
  * **None**: Do not show a logo.
  * **RSS**: Use the logo defined in the RSS feed.
  * **Theme**: Use the "Ticker Logo" defined by the current theme.
* RSS refresh rate: Determines how often the RSS.
* **Scroll speed**: Controls the text scrolling speed.

#### Customizing the Ticker Appearance

To customize the default item separator, set the theme's **Ticker Separator** image.

<div align="left"><figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2F6bHBywI2yEdH3jUgIc9K%2Fimage.png?alt=media&amp;token=3357edf5-c77f-47c9-badb-2c25726d7d0a" alt="" width="375"><figcaption></figcaption></figure></div>

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FwzqPSUR1u5GbQbkASk0N%2Fimage.png?alt=media&amp;token=8711fc01-3f00-48cc-b9f9-2e44c7fbe244" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FQm9xJA9AYDTcKWJ5PXoT%2Fimage.png?alt=media&amp;token=8d553ed1-d8ff-4995-8532-12e54d0a58f3" alt=""><figcaption></figcaption></figure>

### Editing Popup Frames

#### Frame Layout

Cubu offers several Popup frame layouts.

<figure><img src="https://2572483209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8vfRpZGqpk7N0egaXMQ8%2Fuploads%2FnGbnLWS4VkNQUC4op4eE%2Fimage.png?alt=media&amp;token=aac1773e-5d7a-4b97-977a-e6225f9ad8c1" alt=""><figcaption><p>Popup Frame Layouts</p></figcaption></figure>

#### Texts

* Ticket Title
* Workstation Info
* Custome Text 1

#### Settings

* Show arrow: Check this box to show an arrow directing customers to the calling workstations.

## See Also

{% content-ref url="/spaces/8vfRpZGqpk7N0egaXMQ8/pages/wgT2CHvBH225m1F9naQO" %}
[Managing Digital Signs](/guides/digital-signage/managing-digital-signs.md)
{% endcontent-ref %}
