---
title: "Design Composer spots"
slug: "design-composer-spots"
updated: 2026-08-17T12:37:43Z
published: 2026-08-19T08:43:52Z
canonical: "docs.grassfish.com/design-composer-spots"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grassfish.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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. | ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/design-composer-spots-image-de6nqh22.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A17%3A50Z&se=2026-11-06T21%3A17%3A50Z&sr=c&sp=r&sig=Pu2H5fJ0uRFQLug59ctSbFF7YnR9h6nK8OyAebQf%2FnM%3D) |
| --- | --- | --- |
| **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. |

## Manage container properties

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. | ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/design-composer-spots-image-9910blb6.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A17%3A50Z&se=2026-11-06T21%3A17%3A50Z&sr=c&sp=r&sig=Pu2H5fJ0uRFQLug59ctSbFF7YnR9h6nK8OyAebQf%2FnM%3D) |
| --- | --- | --- |
| **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](/grassfish/docs/add-animations). |
| **Effects** | Select to [add effects](/grassfish/docs/add-effects). |

## Manage pages

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. | ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/design-composer-spots-image-w34o5s9x.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A17%3A50Z&se=2026-11-06T21%3A17%3A50Z&sr=c&sp=r&sig=Pu2H5fJ0uRFQLug59ctSbFF7YnR9h6nK8OyAebQf%2FnM%3D) |
| --- | --- | --- |
| **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](/grassfish/docs/assign-actions) for individual pages. |
| **Duration** | Specify the display duration of a page in seconds. |