The Builder Tool is the GUI-based design system in Korbyt that allows you to create new Signage Layouts or Desktop Messages.

Both interfaces are very similar and function the same from a creative tool standpoint, but each has some options that are unique to either Signage Layouts or Desktop Messages

This articple presumes you already have a design to edit

For more information on creating a new design see

Managing and Creating Layouts

Create And Manage Desktop Messages(InViews)

The Builder tool has many options for its use, if you are looking for a specific tool ,please use the “On this page” section to the right to navigate

The Basics

Builder Control Panel Options

The Control panel is the main interface used in the Builder Tool to create your design

• The control panel can be collapsed down using the aperture icon in the top left

• The control panel has multiple sections across the top that change what is available

  • Basic, Advanced, Draw, Template

• The sections of the control panel can be collapsed or expanded using the arrows to the right of the headers

The advanced view of the control panel exposes more control icons at the top and shrinks the element icons in the Add Elements section. The Advanced Control panel is reviewed later in this artile

Adding and Controlling Elements

Click and Drag your desired Elements from the control panel to the canvas area.
The same Elements are available in both the Basic and Advanced Control Panel views:

For a full list of available Builder Tool Elements see the article Layout And Message Builder Elements

When you drag an Element to the canvas area it will create a container for the element.

This container will have a red outline when you have it selected, and a faint blue outline when you are not interacting with it (these outlines do not show on the final screen)

Three corners have controls available if you move your mouse over the area and click

• The Lower Right Corner is where you can click and drag to resize the Element

• The Upper Left Corner is where you can edit Triggers that affect the Element – Lightning Bolt Icon

• The Upper Right Corner is where you can open the Settings Menu to Edit the Element or its Properties – Gear Icon

  • The Edit Element controls list the element type and then offer different setting types
    

    

    • Edit Element has settings that are unique to that element type

      • This is how you select a font, set the URL for an External URL Element, or set the sizing behavior for an image

      • Different elements have different settings.

      • Layout And Message Builder Elements lists the Elements and links to articles for each element’s settings

    • Properties opens a control panel that affects the container

      • Such as setting the background color for the container or setting the container size

      • For more details on properties see Properties Menu For Elements In The Builder Tool

    • Security allows the element to be locked to user groups

      • This setting is only available for Tenant Administrators

      • For more details see How To Manage CMS Users And User Groups

    • Remove deletes the element from the canvas

Arranging Element Layers

When each Element is added to the design, a new layer will be created for that element
The layers can be seen and adjusted in the Element Layers section of the control panel

• New Elements added will create a new layer at the top of the list in the Element Layers section of the control panel

  • The further down the list an element is, the further back in the design

  • The item at the bottom is the furthest back, and the item at the top is sitting in front of all the others

• Element’s layer position can be adjusted by clicking and dragging up or down the list

• Layers can be renamed

  • When created, they have a default name of element_#_#

  • Double-clicking on a layer name will let you rename it

    • Click enter to lock in your change

• The icon next to the name shows what type of element it is and matches the icon from the Add Elements section

• As you move your mouse up and down the list, you will see each corresponding lament highlighted in red on the design

  • If you click on an element in the list, it will select the element in the design

  • If you click on the icon that represents the element typ,e it will open the elements editing menu

• The Eyeball icon will make the layer visible/invisible

  • If an Element is Hidden when Published, it will remain hidden on the screen

    • This is common in elements controlled by Quick Actions or Data Triggers

• The crosshair icon will animate the element to show it on the canvas

• The padlock will lock the element from accidental changes

• The Trashcan will delete a layer

Saving and Publishing

Saving vs Publishing

When you are at a place you are happy with in your design, it is advised to use the Save button at the bottom of the control panel to lock in your work. Otherwise, if you close your browser or navigate away from the builder too,l all unsaved progress will be lost.
Saving will set the design to Draft status

Publish will not only save your work, 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.

Advanced Features

Advanced Control Panel

The Advanced tab shows more controls at the top of the Control Panel

Icon	Description
	Display Control – Sets the Shape, Resolution, and Orientation of Canvas Available in both basic and Advanced Views of the control panel
	Preview – Opens a new window to see the design in action (Playlist Elements will not preview in Builder Tool) Available in both basic and Advanced Views of the control panel
	Elements – Shows the Element Icons and normal Control Panel sections
	Actions – Opens the window for creating interaction and code-driven changes to the design - for more details see Interactivity in a Design later in this article
	CSS and JavaScript – Changes the Builder tool so that you can interact with the CSS and JavaScript inside the design - For More details, see Custom JavaScript and CSS later in this article
	Console – Opens the console window for coding
	Zoom– Zoom in or out on the canvas without zooming the rest of the interface You can also use your browser’s zoom ability, but that will zoom in or out on everything
	Ruler - if turned on shows rulers on the top and left of the screen Once turned on, you can click and drag from the ruler onto the canvas to add blue guidelines If you hold the shift key while dragging, they will move in 1% increments The lines will turn on and off with the ruler icon Grid lines do not publish to the screen
	Resources – Opens the list of coding resources available

Advanced Controls for Arranging Items

These Options are available in the Advanced Control Panel, ensure that you have selected that in the control panel

The arrangement options work best with 100% zoom level

Single Item Alignment Buttons

The Follow Icons appear in Advanced View when One element is selected on the canvas

Icon	Description
	Center Horizontal – Moves the selected element to be centered horizontally on the screen
	Center Vertical – Moves the selected element to be centered vertically on the screen
	Clicking both will center the item in the middle of the screen

If aligning an image element that is set to sizing other than cover, it will be best to cetner the image in the container with a 50% 50% offset

Multiple Item Alignment Buttons

The Follow Icons appear in Advanced View when two or more elements are selected on the canvas

You can select multiple elements on the canvas by holding the Ctrl key on your keyboard as you click the container, or as you click the layer name

The first item you click will be the anchor point for all others (If centering, it will center on the first item clicked). It should be placed in position so the other can move to it

Icon	Description
	Align Horizontal – Aligns multiple items horizontally to the first item Left - The element’s left edges will line up to the first Center - All items will center on the first Right - The element’s right edges will line up to the first
	Align Vertical – Aligns multiple items vertically to the first item Top - The element’s Top edges will line up to the first Center - All items will center on the first Bottom - The element’s bottom edges will line up to the first
	Space Horizontal – Distributes multiple items horizontally Space Around - spaces the elements along the entire canvas Space Between - spaces the elements equally between the first and last
	Space Vertical – Distributes multiple items vertically Space Around - spaces the elements along the entire canvas Space Between - spaces the elements equally between the first and last After clicking, you choose between Space Around the items or Space Between
	Sizing– Resize multiple items at once It is helpful to rename the elements in the layer list here You can enter sizing at the bottom, or if 1 element is the correct size, click the name to set that value for all Click the blue check box when done
	Group– Group multiple items together in the Layer List The collection can then be clicked and dragged as a group, being careful not to click and drag a member of the group From the layer list they can be ungrouped, or deleted together
	Delete – Deletes all elements at once

Anchor Tool for Element Placement

The anchor tool is used for aligning or connecting two elements precisely through the Properties window.

You will be using it as a reference to all the others.
That first element should be in position before you try to anchor the other elements to it.

These anchors are not permanent, after you place items, if you do not want them casually moved, it might be best to use the lock symbol in the layer list to pin the item in place.

To use the Anchor menu to move an element

• Position the first element on screen where you would like it

• On the Element you are aligning, click the Gear icon in the upper right

• Click on Properties

• If needed, click on the Advanced tab

• Click on the Anchor icon

• You can then choose which element to link this one to, it’s “Parent”

  • It can be helpful to rename your Elements in the Layer List on the Control Panel so they are more clearly named here, like in this example

    

    • See Arranging Element Layers earlier in this article for details on naming layers

    • The Glow button will add the element names to each element in the design if needed

  • The Parent element will be the one that the element you are working with is going to align itself to

• After selecting the Parent, you then select how the Child will relate to the Parent based on connecting different edges or centering

  • In this example, I have aligned the Child (Left button) to the Parent (Menu Button) along their top edges, putting them at the same height

    

  • I can then put them side by side by selecting the Child’s right border and the Parent’s left border

    

  • I can then use the X offset to move the Child a set distance from the Parent

    

  • If I were to use Inside borders, I can select the center point of an item rather than its edge, for example, centering the menu button on the carousel

    

• You can then repeat this process for other elements that should be aligned

  

Quick Actions for Interactivity in a Design through

Quick Actions allows designers to embed interactive logic and macros into any Layout.
This is done by using the UI to select an element, configure a trigger, and then the desired response.

Common Use Cases of Quick Actions:

• Toggling visibility of a set message or element

• Sending a command to an element like Playlist or Carousel to change which item is displaying

• Refresh Data

• Trigger animations

To Open Quick Actions

• In the Builder Tool, select the Advanced tab of the control panel

  

• Click on the Lightning Bolt icon to open the Quick Actions and Data Triggers panel

  

• Quick Actions are at the top of the window

• Click the + to the right to build a new Quick Action

  

For Details on creating Quick actions see Quick Actions for Interactivity in a Layout or Message

Data Triggers to have Real Time Data Effect Layout Elements

Data Triggers allow designers to embed reactive logic and macros into a Layout or Message.
This is done by using the UI to select an element, configure a trigger, and then the desired response.

Common Use Cases of Data Triggers:

• Changing formatting of text to draw attention to KPI values

• Toggling visibility of a set message or element to drive specific actions

To Open Quick Actions

• In the Builder Tool, select the Advanced tab of the control panel

  

• Click on the Lightning Bolt icon to open the Quick Actions and Data Triggers panel

  

• Data Triggers are in the middle

• Click the + to the right to build a new Quick Action

  

For Details on creating Data Triggers see Data Triggers to have Real Time Data Effect Layout Elements

Custom JavaScript and CSS

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

To open the JavaScript and CSS control panel

• In the Builder Tool, select the Advanced tab of the control panel

  

• Click on the <> toggle, and then click the CSS/JavaScript button

  
  

CSS Editor – Left Menu

• 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.

• Version History - This will open a list of the previous versions of any custom CSS code (up to the last 10)

JavaScript Editor – Right Menu

• 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 Rule Builder – This option will allow you to insert JavaScript based on 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.

• Playlist - This option allows you to add functions that can modify the behavior of the Playlist 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.

• Text Element - Quickly adds a code block targeting a specific Text Note element

• Version History - This will open a list of the previous versions of any custom CSS code (up to the last 10)

To return to the Elements view of the control panel, click the Elements toggle

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.

• Select the clipboard icon in the element layers under the controls panel

• 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

• After you are done adding animations to your elements in the timeline, click on the preview eye 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.

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

• 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.

Recent Colors/Fonts & Favorite Colors/Font

These sections of the control panel only affect Text-based elements such as Text-Note and Ticker

The Recently Used Colors/Fonts section shows the colors and fonts selected while editing the design.

If you select a Color or Font in the Recently Used section, you can then click the blue Plus button to add that color or font to the Favorite Colors/Fonts section for use in other designs.

To use a Favorite or Recent color or font, open a Text Note or Ticker for editing, select your text to change, and click the recent or favorite color or font from the control panel to apply it.

Subscriptions

The Subscriptions section has the controls to integrate data into a design, giving the ability to view real-time information that is delivered to Korbyt through Data Integrations

For more details on Data Subscriptions and Data Integrations see:

• Data Integration and Data Adapters

• How To Add Data To A Layout Or Message

Draw Control Panel

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.

Background & Texture

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.