Introduction to Layouts

In this article, we will be looking into Korbyt Anywhere’s layouts and how they are used.

A layout is a feature where you can arrange and modify a variety of elements on to a canvas. The canvas is part of the Korbyt Anywhere builder which is where we will add and modify elements to be displayed in our layout. Elements come in many different forms which range from adding images and text in a canvas to displaying tables with subscription data.

Layout Creation

To create a layout, we first need to navigate to the layouts page under the digital signage menu.

Once we have navigated to the digital signage page, we can create a new layout. Select the add layout button so we can set up our layout.

Layout types:

• Default layout – This is the first layout type you will see, and this option gives us a standard canvas with a selection of canvas styles and default resolution of 1920 x 1080.
• Video Wall – This layout allows us to control how we want our layout to be displayed on multiple screens. We can have content from our layout appear continuously from each screen or have content appear independently on different screens.
• Fixed layouts – A fixed layout is a layout with custom dimensions that can be set in either portrait or landscape orientation.
• External layouts – An external layout is a custom layout created with an external html builder that can be uploaded within your tenant.
• Import layout – This layout is an import of a pre-existing layout that was exported from a Korbyt tenant.

Under layout options, you can select a style of how you want your layout to be split up. Each section in your layout will allow you to better control where your content should be displayed.

Another option you have is to record proof of play. Proof of play will record how long and how often a layout is used when attached to a playlist. These records can be found in the reports page under analytics.

Getting started with the Element Builder

Once you select create, you will be taken to the Element Builder. This is where you will customize your layout to how you see fit with the aid of different elements with simple to complex configurations. A builder element is a draggable container that performs a specific role within the display of your layout.

In the top right corner, you will see the controls panel where we have access to our builder tools, settings, and the ability to save our layout. Our first selection in the controls panel is Add Elements. Open the selection and drag and drop the text element anywhere on the canvas. For additional information on the controls panel tools and settings, please take a look at the KT article on advanced layouts.

After we have added a text element, you can see that we can enter text inside the element container, but we also have an element editor that has appeared on the side. All elements within the builder have an element editor which is where you will have a selection of modifiers for the current selected element. To save an individual element and close the editor, navigate to the top right corner of your element container and a small gear icon should appear. Clicking on the gear icon will open up an options panel where you can save your element, edit properties, set security of who can modify the element, and remove the element from your builder.

Before we save our element, lets enter some text as our content. With that out of the way and our element saved, we can resize and move our element within our layout. For additional information on some notable elements used in the builder, please take a look at the elements section of this article.

Elements

Text Element

This element is where you can drag and drop text anywhere within your layout. To see how you can modify your text element, please take a look at the element editor options below.

Element Editor:

1. Text – Text modifiers such as font family, font size, alignment, and decorations
2. Color – Color selector for any part of highlighted text.
3. Styles – A selection of predefined styles that can be applied to your text
4. Image – An option to insert images withing your text element
5. Date – A set of options to create a date that can be inserted into the text element.
6. Table – This option will give you the ability to set the element container to contain a table in which you can edit text in each cell.

Image Element

This element will allow you to upload and place an image anywhere within your builder. Along with uploading your own images, you can also select copyright free stock photos from Pixabay, Pexels, and Unsplash from the use of the Korbyt Anywhere media picker. To see how you can modify your image element, please take a look at the element editor options below.

Element Editor:

1. Choose Image – Opens the media picker to add images
2. Stock Media – A set of provided stock images that can be added to the element
3. Frame – A set of predefined frames that can be added to your image
4. Present – A set of image filters that can be applied
5. Shapes – A set of framing options that will limit the image border to a selected shape.
6. Animations – A set of animations that can be applied to your image
7. Repeat
8. Offset – This will offset the position of your image withing the image container
9. Size – A set of options to set the image to fit the element container either by cover, contain, auto, or manual.
10. Filters – A list of sliders to manually modify the filters for your image.
11. Shadow – A border shadow for your image with the specified color.

Video Element

This element will allow you to upload and place videos anywhere within your builder. Along with uploading your own video, you can also select copyright free stock videos from Pixabay and Pexels from the use of the Korbyt Anywhere media picker. To see how you can modify your video element, please take a look at the element editor options below.

Element Editor:

1. Media library – Opens the media picker to add videos
2. Stock Media – A set of provided stock images that can be added to the element
3. Loop – This option will loop the video continuously.
4. Volume – Will set the volume of your video
5. Auto play – Set by default, this option won’t require a user input in order to start playing.
6. Controls – Set by default, this option will display video controls (pause/play, timeline, and volume). Controls will be hidden when set off.

Ticker Element

This element will allow you to insert a ticker anywhere within your layout. The ticker functions just like a ticker you would find at a stock exchange, where text will skim across the screen in either direction and at various speeds. To see how you can modify your ticker element, please take a look at the element editor options below.

Element Editor:

1. Text modifiers – The first 6 options in the edit bar will modify the style of the text
2. Direction – Option to change whether the ticker moves left or right
3. Speed – Option to control how fast the ticker text moves

RSS Element

This element will allow you to insert an RSS feed anywhere within your layout. To see how you can modify your RSS element, please take a look at the element editor options below.

Element Editor:

1. Add RSS – This is where you can add the URL for an RSS feed
2. Template – Option to add custom or predefined templates of how you want RSS feed data and metadata (name, date, description) to be displayed withing the element container.
3. Text modifiers – The next 6 options in the edit bar will modify the style of the text.
4. Duration – Option to control the duration of feed data to appear in the element
5. Content items
6. Effect – Option to add an animation that will play when the feed changes
7. Link As – RSS feed URLs can be changed to look as a plain link or a QR code
8. Image resize – Option to resize images in your element container

YouTube Element

This element will allow you to insert a YouTube video anywhere within your layout. You can also set the YouTube element to grab and play videos from a YouTube channel of your choice. To see how you can modify your YouTube element, please take a look at the element editor options below.

Element Editor:

1. YouTube URL – This is where you will add your URL for your YouTube video
2. YouTube Channel – This option lets you input a channel name and grab up to 5 video to play in order.
3. Pause – Pause or play your YouTube video while in the builder.
4. Loop – Set your YouTube video to loop indefinitely when being viewed.
5. Interactive -Option to enable/disable all options to interact with your YouTube video