Creating Layouts
Build multi-part digital signage layouts in easyCMS, position items on the canvas, use playlists and layers, set resolution and orientation, then publish safely.
A layout is what a screen shows: a background, and everything arranged on top of it. If you only need one full-screen image or video, your first layout covers it in a few minutes. This article is for the next step, a design with several things on screen at once, and for working in the editor without fighting it.
The editor is a canvas, not a grid
Older signage tools made you carve the screen into fixed boxes first. easyCMS does not. You get a canvas the size of your layout, and you drag items onto it from the Toolbox, then move, resize and rotate them freely. Items may sit side by side, or overlap deliberately, a logo on top of a video is just two items stacked.
Three kinds of thing come out of the Toolbox:
- Library media, the images, videos and audio already in your media library.
- Widgets, content that fetches or generates something: clocks, weather, RSS tickers, webpages, DataSet-driven tables.
- Elements, the design pieces you build with, text, shapes and similar.
Select anything and the Properties panel shows its settings. The Advanced tab there is where you override how long that item holds the screen.
Building a design with several parts
A worked example, a main visual with a ticker strip along the bottom and a logo in a corner:
- Set the layout Resolution from the Properties panel with nothing selected, and set a background colour or image.
- Drag your main image or video on, then drag its handles out to fill the upper area. Use the Snap to buttons, bottom right, to line it up with the canvas edges.
- Drag a ticker or text widget onto the lower strip and size it to the full width.
- Drop the logo in last so it sits on top.
To rotate several items in one area, put a Playlist there instead. Position and resize it like anything else, then add the items that should cycle inside it. That is the piece people miss, a playlist is not a separate screen area you define up front, it is just another item you place.
Layers, grouping and selecting
Overlapping items need an order. The Layer Manager, bottom left, lists everything on the canvas with its layer and duration, and you reorder by dragging. Right-clicking an item on the canvas gives the same options.
Two habits that save time on a busy design:
- Drag a box across the canvas to select several items at once and move them together without losing their alignment.
- Hold shift, click each item, then right-click and choose Group elements to keep a cluster together for good.
Resolution and orientation
Match the layout resolution to the screen. 1920×1080 for most landscape displays, 1080×1920 for a screen mounted vertically, at which point the canvas itself becomes tall and you design directly in that shape.
A layout played on a screen of a different shape gets scaled to fit, which means black bars. Build separate portrait and landscape versions of anything important. Screen resolution and orientation covers the awkward cases.
Preview before it reaches a screen
The play button, bottom left, runs the layout in your browser. It catches what is obvious on a real screen and invisible while designing: text too small to read across a room, an item overlapping another, a video in the wrong shape. Far cheaper than finding out on the shop floor.
Publishing, and editing something already live
A layout has two states, and only one of them ever plays.
A draft can be edited freely and appears on no screen. A published layout is the one displays play. Publishing is under the three-line menu, top right.
When you edit a layout that is already published, easyCMS takes a draft copy and leaves the live version playing untouched. Your changes reach screens only when you publish again, so reworking a live layout in the middle of the working day is safe.
Watch out A change nobody can see on screen is very often a layout that was edited but never re-published.
Making it readable
- Text is read from metres away. Go considerably bigger than looks right on your monitor.
- High contrast wins, especially on a bright shop floor or near a window.
- One message per layout. Rotate several layouts rather than crowding one.
Related articles: Your First Layout, Playlists and the Media Library, Scheduling Content, Screen Resolution, Orientation and Layout Sizing