How to position, align, and layer elements of interactive overlays

When creating an overlay within interactive, there are multiple tools within the overlay editor that allow you to cleanly lay out and align elements of your overlay. These include rulers, grids, and layers. 

To use the layout tools: 

To access, select the View menu at the top of the overlay editor, 

You can enable or disable the following:

• Add Grid: You can display a grid within the editor to help keep equal distances between multiple elements. The grid will only appear in the editor and not on your public video.
• Add Rulers: Enabling rulers will display a ruler in pixels for both the height and width of your video to help you measure the distance between objects on your overlay.
• Snap to grid: When enabled, dragging a panel or object will snap it to the nearest grid line. This takes into account the current grid size and will snap to all four sides.

You can also choose the size of your grid (by pixels) by entering it in the Grid Size box. The larger the number, the larger the grid square.

You can change the color used for displaying your grid by selecting Grid Color. You can select the color from the color picker or input its HEX or RGB values. An optional alpha channel is available to set the opacity (0 for transparent - 100 for an opaque grid). 

Layers: 

In addition to adjusting the view of your overlay canvas, the Layers option helps you track all of your overlay's elements and where they fall on the canvas.

To open the Layers window, select the Layers button at the bottom of the sidebar menu.

In the Layers window, you can:

• Select, drag, and drop elements to adjust where they fall in order (or select the arrow keys at the bottom to move that layer up or down).
• Edit the names of each element to provide an internal name that will not be shown in your video.
• Select the lock icon to prevent further edits to that element.
• Duplicate an element.
• Delete an element.