Design Composer spots

You can use various elements to design your spot in the HTML Composer.

The design is up to you and is therefore different for every spot.
Spots usually have general properties such as duration or resolution that you can always manage.

Manage general spot properties

You can manage the following general spot properties in the HTML Composer:

Name	Specify a name for your spot.
Predefined resolution	Select a predefined resolution from the dropdown menu. You can either use a predefined resolution or specify your own resolution.
Resolution	Specify the resolution of the spot using width and height in pixels. You can either use a predefined resolution or specify your own resolution.
Spot duration	Specify the duration of the spot in the format hh:mm:ss. The default spot duration is 10 seconds. If the duration is 0, the system automatically calculates it based on the spot content.
Calculated duration	Select to have the system calculate and display the total spot duration. The total duration is based on the duration of all spot elements including animations, multiple pages, and transition effects. If you add or delete elements, the spot duration is automatically recalculated.
Background	Select this option to set the background color of the spot. You can select a color or enter RGB values or a HEX code. If you don't select this option, the spot uses the same background color as the playlist.
Player	Click on Select to select a player for the preview.

Whether you add text, media, or a widget, you can specify the following container properties:

x-position	Specify the position of the container on the x axis. Alternatively, drag and drop the container to the desired location on the canvas.
y-position	Specify the position of the container on the y axis. Alternatively, drag and drop the container to the desired location on the canvas.
Width	Specify the width of the container. Alternatively, select the corners of the container and drag them to the desired size.
Height	Specify the height of the container. Alternatively, select the corners of the container and drag them to the desired size.
Opacity	Specify the opacity of the container. Drag the slider to decrease or increase opacity. Less opacity means more transparency. This can be useful if you work with layers and want elements below the container to be visible. By default, the opacity is set to 100, which means no transparency.
Rotation	Specify the rotation of the container by dragging the slider or entering the degrees.
Animations	Select to add animations.
Effects	Select to add effects.

You can add multiple pages to an element.

This allows you to create a slide show that plays multiple pages one after the other.
You can either set a display duration for each page or use actions like clicking on elements to move from page to page.

You can manage the following page settings in the HTML Composer:

Add page	Click + to add pages.
Remove page	Remove a page.
Switch pages	Click on the arrows to switch between pages.
Page editing	Click Page editing to edit the following settings: Display duration: Select split on all pages to split the set duration between the pages or use on all pages to apply it to each page. Click on the arrows to change the page order or use drag and drop. Select Add new page to add a new page.
Actions	Specify actions for individual pages.
Duration	Specify the display duration of a page in seconds.