Create your own re-usable templates with Template Creator
Note: Templates are HTML5 layouts and meant to be used with Instances. Templates are not for one-off design. For one-off designs, we recommend creating an image or video and scheduling that in a program block.
For this beta release, Templates do not incorporate any animations, transitions, or timing functions.
1. Click on the TEMPLATE button from the main navigation
2. To create a new Template, click on the Create Template button from the flyout
3. Select a Channel
The new template will be sized to match the resolution of the selected Channel.
3a. You can select multiple Channels as long as their resolutions are the same.
3b. Click on the Start button to move onto the next step.
Note: in this release, the design for specific aspect ratio and custom template size options are disabled.
4. The screen will now display a blank Canvas.
A. On the right hand side, under Canvas Properties, you will see the resolution of this templates.
B. At the bottom of the screen, you will see the resolution, zoom level, and revision number for this template.
C. You can click on any Zone from the top Toolbar to add it to the Canvas.
a. Image Zones hold an Image Asset
b. Video Zones hold a Video Asset
c. Mixed Zones can hold either an Image or a Video Asset
d. Text Zones hold text input
5. Zone Properties
A. On the right hand side, the properties inspector will allow you to update the Zone’s properties
a. Resize a zone by entering values in the width and height fields
b. Position a zone by entering values in the left and right fields (x- and y- axes)
c. Change the zone’s layer order (z-axis)
Raise
Raise to Top
Lower
Send to Back
d. Apply a background color
Click on the background field to open a color picker
You may manually enter RGBA, HSLA, or Hex values, or use the picker to select a color
To remove the background color, click on the “Remove” button
e. Apply a border color and border width
To apply a border color, click on the border color field to open a color picker
You may manually enter RGBA, HSLA, or Hex values, or use the picker to select a color
To remove the border color, click on the “Remove” button
To apply a border width, enter a value in the border width field
B. You can also position the Zone by dragging it around the Canvas
And resize the Zone by dragging the handles
Note: in this release, the proportions are not constrained
6. Text Zones have additional properties
A. Text
a. Font family:
Sans Serif fonts – Arial, Dongle, Dosis, Helvetica, Kanit, Owald, Play, Poppins, Roboto Mono, Roboto Regular, and Teko
Serif fonts – EB Garamond, and Georgia
b. Font weight: normal, medium, and bold
c. Font size in pixels
B. Additional Font Options
d. Italicize, underline
e. Uppercase, lowercase
f. Horizontal text alignment: left, center, and right
g. Vertical text alignment: top, middle, and bottom
h. Line height
i. Letter-spacing
7. Align & Distribute
Note: Alignment & Distribution only works when two or more zones are selected. Select two or more zones by holding the Shift key and clicking on each Zones. Click anywhere on the Canvas to deselect zones.
A. Alignment
a. Align Left and Right – align the zones along the left most or right most edge of the selected zones
b. Align Center – align the zones along the horizontal center of the Canvas
c. Align Top and Bottom – align the zones along the top most or bottom most edge of the selected zones
d. Align Middle – align the zones along the vertical middle of the Canvas
B. Distribute
e. Distribute Vertically – space the zones evenly from top to bottom
f. Distribute Horizontally – space the zones evenly from left to right
g. Distribute Both – space the zones evenly from top to bottom and from left to right
This step adds a fixed, static background image to the template. This allows you to keep the background image the same when creating Instances.
8. Background Image
A. Drag an image asset from the flyout
B. Drop the image onto the Canvas area
Note: Please ensure the background image is sized to fit the Canvas. There is no scaling functionality for the background image in this release.
9. Grid
To show or hide the Grid, choose Settings > Grid > Show Grid.
When the Grid is on, zones will snap to the grid lines. When the Grid is off, zones will not automatically snap.
If you are having trouble typing in values for the Width, Height, Left and Right position, try turning the grid off so that the zones do not snap to the nearest line.
Note: in this release, ‘raise to top’ and ‘send to back’ are disabled. These will be coming in a future release.
Displays the current weather in the specified location
10. Weather Widget
A. The widget displays the current temperature in Fahrenheit with an icon indicating the current conditions.
B. Enter the Latitude and Longitude of the location you wish you use
C. Customize the text properties
Displays the date and time
11. Date/Time Widget
A. The widget displays the current date and time from your player’s system clock
B. Date Format
a. Year Format – show the year as either two or four digits. The default is four digits.
b. Month Format – show the months as numeric 2-digit, full month name, or a the first three letters of the month name
c. Day Format
C. Time Format
d. Show as either 12 or 24 hour clock. The default is 12 hour.
e. Hour – show with or without a leading zero. The default is without the leading zero.
f. Minutes
g. Seconds
D. Customize the text properties
You can preview your template with placeholder images and videos.
A. To preview your template, click on the Preview (eye) icon from the Toolbar
B. We’ve provided a placeholder image & video for previewing templates.
You may use an image/video from your library by dragging and dropping the asset from the flyout on the drop zone
Save your Template with a unique name
Continue editing or Create an Instance using your new template.
This page contains proprietary information furnished for training purposes only; except with the express written consent of Metropolitan interactive, Ltd. (herein, Metinteractive) such information may not be published, disclosed, or used for any other purpose. This document and all portions thereof, including but not limited to, any copyright, trade secret and other intellectual property rights relating thereto, are and always shall remain the sole property of Metinteractive.