Using Creative Studio (Creating and Editing Layouts)

Layout Basics

A layout is a piece of content composed of several elements. Layouts can be managed and scheduled like any piece of content, such as an asset or playlist. Like other content, layouts are created within a Workspace. Any user with access to layouts can create or edit a layout. 

To create a new layout:

1. Ensure you're in the Workspace where the layout should be created.
2. Click "Layouts" in the left sidebar to access the Layouts page.
3. Click the "Create New Layout" button, located to the left the the "Layouts" title. A new tab will open with Creative Studio interface. 

The Creative Studio Interface

The Creative Studio interface is composed of 6 primary areas:

1. The elements toolbar, which show what elements can be added
2. The layout name
3. The actions toolbar, which enables you to do the following, in order from left to right:
   1. See Creative Studio keyboard shortcuts
   2. Adjust the zoom of the artboard
   3. Preview the layout
   4. Save the layout
4. The layers panel, which shows what elements are on the artboard and in what order. Clicking on an element from the layers panel will select it and open the properties panel. For more information, see Using the Layers Panel below.
5. The artboard, which is the visual representation of the final layout. The artboard is where you build the layout and is also its own immutable layer. You can configure artboard settings by selecting the artboard from the layers panel and modifying available properties in the properties panel. You can also toggle rulers and the grid from the artboard properties.
6. The properties panel, which enables you to modify what elements look like in the layout. The properties that are available to be configured depend on which element is selected. For more information, see Adding Elements.

Getting Started

When you first open Creative Studio, you will need to configure the artboard based on what device(s) the final layout will be scheduled to. By default, the artboard is configured to produce a layout that in portrait orientation, with a width of 1080 px and a height of 1920 px. This is the standard resolution required for most portrait installed devices displaying content at FHD resolution.  

Changing the layout resolution

If you are creating a layout to be displayed on a landscape-installed device, on a VQ or SparkQ+, or on a display with other resolution attributes, you will need to configure the artboard. To configure the artboard:

1. Ensure that the artboard layer is selected in the layers panel. If this is a new or empty layout, the artboard will be automatically selected.
2. Configure the width and height of the artboard as needed in the properties panel, under the "Layout" section. You can use the presets to select between FHD portrait, FHD landscape, 4K portrait, 4K landscape, or square (for VQ and SparkQ+ Canvases). 

Changing the background of color of the layout

By default, a layout has a white background. To change the background color:

1. Ensure that the artboard layer is selected in the layers panel.
2. Locate the 'Color' field in the properties panel, under the 'Layout' section.
3. To enter a hex code manually, click into the input field and type or paste the hex code. To use the color picker, click on the color box next to the input field. Select the new color in the color picker that opens. 

Toggling rulers and grid visibility

To show or hide the rulers:

1. Ensure that the artboard layer is selected in the layers panel.
2. Under the "Rulers" section in the properties panel, click the switch to toggle the rulers on or off. 

To show or hide the grid:

1. Ensure that the artboard layer is selected in the layers panel.
2. Under the "Grid" section in the properties panel, click the switch to toggle the grid on or off.
3. To configure the grid, modify the properties in the "Grid" section.

Keyboard shortcuts

To make your layout editing experience more efficient, we've implemented several keyboard shortcuts: 

Action	Windows Shortcut	Mac Shortcut
Open keyboard shortcuts reference
Pan workspace
Zoom in
Zoom out
Reset view
Show/hide rulers
Show/hide grid
Show/hide layers panel
Undo
Redo
Delete element
Save
Save as
Add square
Add text
Add asset
Add playlist
Add URL or iFrame
Duplicate element
Bring element forward
Send element backward
Bring element to front
Send element to back

Using the Layers Panel

Elements added to the artboard are placed on top of any other existing elements. Aside from the artboard itself, elements in the layers panel are shown by their current order, with elements in front at the top of the list and elements behind at the bottom. 

To reorder elements at any time, select the layer in the layers panel and drag it to a new location. You can also use the layer options buttons located at the top of the layers panel or the applicable layer shortcut as shown in Keyboard shortcuts above.

Adding Elements

You can add elements to the layout from the elements toolbar or by using the assigned keyboard shortcut. Refer to Keyboard shortcuts for a list of all applicable shortcuts. 

When an element is added to a layout, it is added as it's own layer. Different elements have different properties. To configure element properties, select the element from the layers panel and modify it's properties in the properties panel. 

The following elements can be added to the layout:

Adding assets and playlists from your Portal3 content library

As of Version 3.29, you can add assets uploaded to Portal3 or playlists created in Portal3 to a layout. To add an asset or playlist, select it from the elements toolbar or use the applicable keyboard shortcut - Alt/Option + 3 or Alt/Option + 4, respectively. The content library navigator will open. Once you make a selection, the asset or playlist will be automatically added to the layout. Like with any other element, you can reposition it by selecting it and moving it on the artboard or by entering specific values in the X-axis and Y-axis input fields located under the 'Positioning' section in the properties panel. 

Resizing assets or playlists

When an asset or playlist is resized, the aspect ratio will be maintained within the frame. To have the asset or playlist fit the frame instead, enable "Stretch" for the element in the properties panel, located under the "Crop" button. 

You can make the following size adjustments:

• To resize the asset or playlist, select it and adjust the size using the drag handles or enter specific values in the "Width" and "Height" input fields under the 'Size' section in the properties panel.
• To crop the asset or playlist, click the "Crop" button located in the 'Size' section of the properties panel. Crop the element as needed and hit "Enter" (Windows) or "Return" (Mac) on your keyboard to save.

Swapping assets or playlists

Sometimes, we need to change the source element after it has been added to the artboard. To swap the asset or playlist, click the "Swap" button under the 'Fill' section in the properties panel. When swapping, all attributes configured for the element will be retained including any cropping, opacity adjustment, or border. 

Adding content from a URL

There are two types of content that can added from a URL: an iFrame, which renders HTML content from a specified website, or an asset from a URL.

To add an iFrame or asset from URL:

1. Click on the HTTP icon in the elements bar to open the URL dropdown.
2. Select the desired element.
3. Enter the URL pointing to the target content.
4. Hit Enter (Windows) or "Return" (Mac) to add the element.
5. Configure the element as needed in the properties panel.

Adding dynamic content to a layout

Dynamic content or widgets, are elements that change based on preconfigured source settings. As of Version 3.2X, the following widgets are available to be added to a layout:

1. Countdown, which allows you to set a count towards to or a count down from a specified date and time.
2. Date & time, which allows you to show the date and time on the layout
3. Weather, which allows you to show the weather for a specified location
4. Youtube, which allows you to add a Youtube video to the layout

To add a widget to the layout, click on the last button in the elements toolbar and select a widget from the menu.

Formatting dates and times for widgets

The Countdown and Date & Time widgets rely on specific formatting in order to function correctly. Due to the nature of how layouts are rendered, date and time formatting is based off of standard JSON programming. 

While both the Countdown and Date & Time widget have preset formats to choose from, it may be useful to reference the tables below for more custom formatting to meet your needs: 

Formatting For The Date & Time Widget based on the example 8:55:24 PM June 23, 2025 

Formatting For The Countdown Widget 

Finishing Up

When you've finished creating your layout, it it useful to give it an preview it and give it an appropriate name. 

Renaming the layout

To rename a layout:

1. Click the layout name, located in the middle of the top app bar.
2. Type a new name and hit "Enter" (Windows) or "Return" (Mac) to save the name.

Previewing the layout

To preview the layout:

1. Click the preview button, located directly to the left of the zoom settings dropdown in the actions toolbar. See The Creative Studio Interface above for further guidance.
2. The layout preview modal will open. To view the layout on a different background, click through the thumbnails on top.

Saving the layout

Once you are satisfied with your layout, it's crucial to save it. To save the layout, hit [CTRL] + [S] / [⌘] + [S] (Windows/Mac) on your keyboard.

Saving "As"

If needed, you can "Save As" a layout to create a copy under a different name. To Save As, hit [CTRL] + [SHIFT] + [S] / [⌘] +[SHIFT] + [S] (Windows/Mac) on your keyboard.