From SpinetiX Support Wiki
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:
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.
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.
Create a new layout
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:
- Enter the name of the layout (used either for the layout folder name or the layout file name).
- 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).
- Select the format of the layout between:
- 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).
- 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.
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.
- Save the changes made so far.
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.
The video below shows how to create a new layout and then add some content within, as explained above.