Page tree
Skip to end of metadata
Go to start of metadata

In this section, you create the final layouts to be displayed on your screens by combining already created playlists, uploaded media files and widgets.

Events Layout

Managing Layouts

In the "Layouts" section you can see a list of the layouts (shows) already created in your Yodeck account. The layout information is organized in the following columns:

  • the Name of the Layout
  • the Timestamp (date and time) that the Layout was created or last modified
  • an Actions column, with 4 buttons for making changes

In this list, you can:

Edit

Change the details of a layout by clicking the "edit" button. 
Here, you can also substitute the actual layout, and it will be changed wherever it is used. 
Check out the "Adding a layout" section below for details on the fields.

DuplicateCreate a copy of the layout.

DeleteDelete a single layout. The layout will be removed and it will not be available in the portal for future use. 
Delete multiple layouts. Click on the layouts you want to delete and press on the delete button of just one. 

Move to another Workspace

You can move layouts to different Workspaces. Choose the Workspace of your choice and click Move.

*This feature is only available in the Enterprise plan.

SearchSearch for a specific layout using the search tool.

Adding a custom Layout


To add a layout, you click on the "+ Add layout"  button found at the bottom of the layout list. A new page will open displaying many pre-designed layout templates that we have created for you and are ready to use.

Feel free to choose any of the available Layouts and start editing it by changing images and adding whatever text you'd like to use. By the way, you can create your custom Layout by clicking the button below.

Layout Settings

Before adding any media, on the right panel you will see some options. These options are:

Name 

The name of your Layout.

Ratio

Choose the Ratio of your TV screen. Landscape or Portrait.

Aspect Ratio

  • If you're using a Full HD(1920x1080) TV screen, choose the 16:9 (1080p) option. Also, this option is the default one as well.
  • If the ratio of your TV screen is not shown in this list, you can simply create a custom ratio by clicking the "Add Custom Ratio" button, in the Ratio list.
  • If you do not know what an Aspect ratio is, please click here.

Background Audio

With this feature, you have the option to set a background audio file of your choice in your Layout setup.

You can choose any Media from which to retrieve the audio:

  • Audio Assets
  • Web-pages (Live Radio Stations, Streams, etc)
  • Videos (Sound only)
  • Playlists

Muted Media

Upon enabling and setting a Background Audio of your choice, all other Media in the Layout editor will be muted and only the selected Background Audio will be heard from the speakers of your screen.

Snap to Grid

You also have the option to disable or "Snap to Grid" on your screen simulator, which will alter the way you place the item by dragging it.
(info)By disabling the grid you can place the item anywhere on the screen simulator.

Adding a media from your library

  1. Click the "Insert +" to choose a media from your Media gallery.


  2. Choose one of the many options on the right side of the panel such as:
    1. Images
    2. Videos
    3. Audios
    4. Documents
    5. Web-pages
    6. Widgets
    7. Text
    8. Shapes
    9. Playlist

Editing a media

By choosing a Media, some relevant options are shown on the right panel.
For example, if you select an Image, Video, Audio, Document, Web-page, Widget and a Playlist you have the option to choose the:

Fitting option

  • "Fit": show the whole content within the area assigned (may add some space or black bars at the edges, but will not distort images or videos).

  • "Crop": zoom-in so that it covers the whole area assigned (may crop some edges, but it will not distort images or videos).

  • "Stretch": show the whole content, stretching it to match the area assigned (no cropping, empty spaces or black bars, but it might distort images and videos).

Transparency

Optionally, Allow Transparency of the region. This is useful for content with transparency and the "fit" option above.

Placing/Moving a media item on the layout editor

Change size/location of media on the Layout editor

  1. You can use the arrows (←↑→) on the screen to change the size and/or location or your media.
    Alternatively in the "Layout Editor" section, you can be as accurate as you wish by entering manually the Top, Width, Left, Height measurements.

    Of course with this one, you can simply drag and drop the image anywhere in the editor area and by using the 9 white squares, you can resize the image any way you like.



  2. Enable the "Lock Aspect Ratio", if you want the media that you are moving to keep the same Ratio across the Layout region.

Aspect Ratio

If you do not know what an Aspect ratio is, please click here.

Content Layering

On the right panel, when you have not selected a media, under the "Content Layering" section, all the items (playlists, widgets, media files) added in the layout are listed in the order you added them, with the "top layer" representing the last item added.

This order of layering is very easily modified by dragging and dropping items in the desired hierarchy.

Layers that have the Transparency option enabled, will be shown in the Content Layering order with a non-solid color and with small squares on the background.

Hide Media

In the layering setup, you have the option to hide some items by clicking the "eye" button next to the media of your choice. The hidden media will not be displayed on the player as well. 

You can revert the media back to your Layout editor by clicking again the "eye"  button.

Useful Tools

On the headbar you will notice some useful tools that you can use in order to help you create your Layout faster.

Some of them are:

 

  1. Undo
  2. Redo

    You can Undo/Redo any actions you made while working in your Layout editor if you'd like to, for up to 30 edits.

    Shortcuts

    Undo: CTRL+Z

    Redo: CTRL+Y

  3. Send Backward
  4. Bring Forward

    Move the media backward or forward if you have many content layers on your Layout editor.

  5. Copy
  6. Paste

    Copy/Paste any media to your Layout editor area. you can copy and paste Media from different Layout editors across your account.

    Shortcuts

    Copy: CTRL+C

    Paste: CTRL+V

  7. Edit

    Edit the settings of the selected media by opening a new editing form of the selected media.

  8. Delete

    Delete the selected media from the Layout editor.

    Shortcuts

    Delete: Delete button

  9. Full Screen

    By clicking the Full-Screen button, the Layout that you have created will fill your entire TV screen. In that way, you have the option to "Preview" the final output that will be shown on your TV screen, and also make the right adjustments by moving any Media in any direction or position of your choice. It's like the usual Layout editor but in a Full-screen mode.

Adding a Shape

If you choose to add a Shape, on the right panel some options will appear. These options are:

(info)For each shape, you have different options. For this example, I used the Circle Shape which has more options than the other shapes.

FieldDetails
Line width

The width (in px) your line will have.

The default one is 10px.

Line ColorThe outer line color.

Fill Color

The inner-circle color.
Background

The background color outside the circle.

If you want to totally disable this color, make it transparent.

Final result

Adding a Text

If you select to add a Text, on the right panel some options will appear. These options are:

FieldDetails
FontChoose the font of your choice.
Size (px)

Choose the size of your text.

The default is 48px.

Font Weight

Chose the Font weight.

(info)Some fonts do not support the light font-weight.

Color

The color of your text.
BackgroundThe background color.
Line Height

Space (px) between the top and the bottom edges.

The default is 120px.

Letter Spacing

Space (px) between letters.

The default is 0px.

Final result

Adding a Template

What are Templates?

Templates are pre-formatted Layouts that we have created for you in order to use them directly on your TV screens. These signage templates come with a wide range of both static and dynamic content options. Whether you want to incorporate static elements like photos or text that remain the same each time they are displayed on your Yodeck players, or you want to incorporate dynamic content that automatically updates depending on the weather, time, or location of your sign, both are options available to you. Templates use media that are not stored in your account, but in the cloud in order to be available for all of our users. Of course, you can edit them the way you like or even create a new custom layout on your own. 

Based on the orientation of your TV screen, you can choose from a variety of Landscape or Portrait size Templates. 

Import a Template from the Template Gallery

By clicking the layout template of your choice, a window will pop up displaying a preview of it. If you like it, you can Import it to your account by clicking the "Import Template" button or go back to pick a new one by clicking the "Back to Templates" button.

Let's start editing our first Layout. By clicking the "Import Template" button the layout editor will open.

First, you are requested to name your new Layout. 

Below the "Name" box, there are three buttons where all your Playlists, Media files, and Widgets can be found to add them to the layout if you do not like something in the existing one.

  • No labels