Elementi layout

Introduction

An Elementi layout can be seen as a scene composed of different layers which are displayed all together according to the predefined order of appearance in space and time.

Watch the video below to learn how to create a layout made of :

a background layer - could be a solid color, an image etc.
a left-side zone containing the company logo at the top, a playlist of images and / or videos just underneath that and two widgets at the bottom showing the curent date / time and the weather forecast.
a right-side zone containing a looping video or a playlist, eventually with some text overlay on top.

Any number of layouts can be created within a project and each can be used in various ways:

as a layer inside another layout;
as a layer inside a Playlist;
as an event inside a Schedule.

To add a layout into an opened document, simply drag and drop the layout either into the Edit panel or into the Preview panel. A layout can include both local and remote resources.

Types

Layout collection

Layout icon

When a layout is made of multiple resources (videos, images, other layouts, playlists, widgets, schedule), scripts etc.), it is recommended to create a layout collection and group all these resources together for easier manipulation. This special type of collection is the default option in Elementi and it is marked with the blue icon on the right. A master layout in automatically included within the layout collection.

To open this layout, double-click on the blue icon in the Browse panel - if no other document is currently opened in Elementi, then the master layout file is automatically opened (for editing in the Edit panel and for viewing in the Preview panel); otherwise double-click on the master layout file (index.svg) included within.

Master layout

A layout can be self-contained within a single SVG file, in which case, it is called a master layout. A master layout is useful when the scene is composed of text layers and / or media resources that are either remote or shared between different project components.

An example of such master layout is the index.svg file created automatically at the root of any Elementi project.

Multiscreen layout

A multiscreen layout is a special type of layout covering a predefined area of a multiscreen project / video wall.

For more details, see the Multiscreen layout section on the Multiscreen content page.

How to

Create a new layout

"New Layout" dialog

To create a new layout, follow these steps:

Open / create an Elementi project.
Right-click inside the Browse panel.
Select the "New Layout..." option. The "New Layout" dialog appears.
Set the layout properties:
- Name
  Enter the name of the layout (used either for the layout folder name or the layout file name).
- Format
  Select the format of the layout between:
  - Standard single-screen formats: "16:9", "4:3", "16:10", "9:16", "3:4", "10:16".
  - Non-standard single-screen formats: "Square" or "Custom" (in this case, enter the width and height).
  - Multiscreen layout format(s).
- Duration
  Select the duration of the layout as a fixed duration (e.g., 30 seconds, 5 minutes etc.), "Indefinite" or "Automatic" (Elementi detects automatically the duration of the layout at running time).
- Background
  Select the color of the background or disable it for transparent background.
- Create a master layout / Create only SVG file
  Indicate whether a new collection (checkbox not ticked) or a single SVG file (checkbox ticked) should be created for this layout.
  
  By default, this option is disabled which means that a layout collection is created.
Click the "OK" button. A new layout is created.

Note:

To modify the layout properties afterwards, open the layout and click on

button from the toolbar - this opens the "Document Properties" dialog, which allows modifying the format, duration, and background color properties.

Add content to layout

After the new layout is created, the next step is to add some content into it.

If a layout collection is created, double-click on its blue icon in Browse panel to open it.
- The master layout file is automatically opened when no other document is currently opened in Elementi.
Otherwise, double-click on the master layout file to open it for editing in the Edit panel and for viewing in the Preview panel.
Next, import some content, for instance some images to be used as background, logo etc. - to do so, simply drag and drop the files from Windows Explorer into the Browse panel.
To add a media layer to the layout, simply drag and drop the media from the Browse panel into either the Preview panel or the Edit panel.
- If the media is dragged on top of an existing layer into the Preview panel, that layer turns into a dark blue highlight with a magnet icon facing up - dropping the media will replace the existing layer, while pressing the CTRL key will force a new layer to be created.
- When a new layer is created, the layer dimensions are automatically set the the natural dimensions of the dropped media.
- Adjust the size and position of the media layer within the Preview panel.
To add a text layer to the layout, click the "Add Text Layer" button from the toolbar.
- Adjust the size, position, and the text within the Preview panel.
- To fine tune the text layer properties, click the button next to the layer to open the Layer Properties dialog.
Save the changes made so far.

Note:

See also more details about editing layers within the Edit panel.

Include layout into project

The final part is to include the layout into the project:

In the Browse panel, click on the project name inside the navigation bar to go back to the root of the project.
Double click on the index.svg file to open it.
Drag and drop the layout from the Browse panel into either the Preview panel or the Edit panel.
Adjust the size and position of the layout within the Preview panel.
Save the changes.

Video

The video below shows how to create a new layout and then add some content within, as explained above.