Advanced Layouts

In this article, we will be taking a look at layout elements that have advanced setup and additional ways on how you can control the settings of your layout.

Saving Vs Publishing

When you are done editing your layout, you will have the option to either save or publish your draft. Publishing a layout will not only save your draft but it will now be available to be shared and added to a playlist. Saving without publishing only creates a record of your layout where you can still modify your content, but your layout will not be usable with other features across Korbyt Anywhere.

Layout Approvals

The ability to publish a layout is limited to administrators and approvers, which means that content author and user submitted content needs to be reviewed before being published. The following steps will get your draft to a published state.

As a content author:

1. On the layouts landing page, go your draft and select the request approval action item.

1. Select an approver you want to publish your draft and then submit.

As an admin/approver:

1. In the top bar, select the bell icon to see your notifications. A pink dot will appear next to it, indicating that you have pending notifications.

1. Under notifications, go to pending approval requests, and under action items, select either accept to publish the layout, or reject to remove the layout from the list of pending approval requests.
   1. Selecting accept will take you to the builder page where the layout can be published
   2. Selecting reject will open a pop-up modal asking a reason for the rejection.

Importing and exporting your layout

1. Exporting a layout is simple and straightforward. On the layouts landing page, navigate to the published layout of your choice and select the export layout action item. Your layout will now be downloaded in a zip file containing html, JavaScript, and media files used in your layout.

1. Importing a layout requires you to create a new layout a select either import layout or external layout. More details on this feature can be found on the KT article for Basic layouts.

Builder Preview

This option will open a new window that displays what you have added in the layout builder would look like once it is assigned to a player. Inside the builder preview you will be able to modify the layout resolution as well as interact with any elements that require input from a user.

Advanced Layout Elements

HTML editor

This element is a container for custom html blocks that you can place anywhere within your layout.

1. Under add elements in the controls panel, drag the html editor anywhere inside your layout.

1. In the top right corner of your element, select the gear icon, and in the dropdown select edit element.

1. When you are done adding html to your element, go back to the gear icon in the top right corner and select save element.

Custom JavaScript and CSS

This is an advanced builder feature where you will have the ability to create, edit, and save JavaScript and CSS for your elements in your layout.

CSS editor

• Glow – This option highlights all elements in the builder where you will be able to see important information such as the element id and classes.
• Send to preview – Selecting this option allows us to update the preview of your layout with updated CSS.
• Redo/Undo – Revert changes or undo reverts you make
• Save snippet – This will let you save the code snippets you create.
• Maximize/minimize – This will expand or shrink the editor to the dimensions of the page.

JavaScript editor

• Glow – This option highlights all elements in the builder where you will be able to see important information such as the element id and classes.
• Data ruler builder – This option will allow you to insert JavaScript based off data subscription rules.
• Touch – This option allows you to add functions where you can zoom or pan on a builder element.
• Carousel – This option allows you to add functions that can modify the behavior of the carousel element.
• Choose Image – This option allows you to add an image reference to your editor
• Redo/Undo – Revert changes or undo reverts you make.
• Save snippet – This will let you save the code snippets you create.
• Maximize/minimize – This will expand or shrink the editor to the dimensions of the page.

Playlist Element

This element will allow you to add a pre-existing playlist to be embedded anywhere within your layout. When you add the playlist element, you will be prompted to select 1 or more playlists to add to the playlist element. The playlists will now play within your layout based on the time scheduled within your player. For more on modifying your playlists schedule and schedule priority, please consult the KT article on playlists.

Animation Timeline

This feature opens a timeline panel on the bottom of your builder container where you can modify which animations occur for each element, and when they occur.

1. Select the clipboard icon in element layers under the controls panel

1. Once the timeline panel is open, you can start appending animations to your elements. Click anywhere on the timeline next to your element of choice and a popup with a list of animations will appear. If an animation is placed 10 seconds into the timeline, then the animation will not affect your element until after 10 seconds

1. After you are done adding animations to your elements in the timeline, click on preview in the controls panel to view your animations in progress.

Magic Animation

This feature provides a set of special animations that can be applied to all elements within your layout.

1. Click on the Magic animation button under add animation in the controls panel and popup modal will appear.

1. You can now select different animations for your elements. In the top left corner of the page under Animation, we have two buttons: Individual and Unison. Selecting Individual will have each element on the page animate in different orders and selecting Unison will have all elements animate at the same time. For more on how to control animations for your elements, refer to the animation timeline in this article.

Draw

Drawing Options:

• Basic Styles – This is a set of common objects such as arrows and stars.
• Design Shapes – This is a set of common shapes that can be added to your layout.
• Speech bubble – This is a set of speech bubbles to add context to your layouts.
• Roll Your Own shape – This is a set of tools you would find in a graphics editor that allows you to draw on your layout and create custom shapes.
  • Selecting a brush or a shape will bring up a set of options where you can modify the color, width, shadow, and brush type.

Setting Background image and color

In the builder controls panel, select Background & Texture to open up options that will change the background of your layout. This feature includes a set of predefined images to select, a color picker, and an image selector.