1. Home
  2. Docs
  3. Channel Documentation
  4. Elements & Apps

Elements & Apps

Elements and Apps are the building blocks for your page. In this section we will review the general use and universal functionality for all Elements & Apps. Anything stated for an element also applies for apps. The individual Element & App sections will review each of their specific functionality in detail.

To add an Element or App to your page, simply click on it or drag it onto a desired location on the Canvas. Clicking an any Element or App will reveal the properties for it in the left hand sidebar. This is where you will make configure the Element or App to display or behave as needed.

Element Info

At the bottom right hand side of the canvas you’ll find basic information of the element you are working on or hover over with your mouse. If you select the element, most of that information will become directly editable.

InfoExplanation
XThe horizontal position of the element.
YThe vertical position of the element.
AngleThe rotation angle of the element in degrees.
WThe width of the element.
HThe height of the element.
StartIf a page start animation is configured, this will display the corresponding timing.
EndIf a page end animation is configured, this will display the corresponding timing.
Stopwatch(For video elements only) Shows two numbers as “X/Y”, where X is the current time during video playback and Y is the total video duration in seconds.

Positioning & Sizing an Element

There are 3 ways to position an element in your page.

  • Manually drag it with your mouse. This will activate the alignment anchors to help you center or align with the page or other elements.
  • Manually type coordinates, angle, width and height as described in element info above.
  • Use shortcut keys found in the section below.

You cal also move an element in front or behind another one using the layering icons found at the bottom of each element’s properties section in the left sidebar. In the layering icons, the element you are working with is identified in Blue.

From left to right the functions are as follows:

  • Move back one
  • Move forward one
  • Move all the way to the back
  • Move all the way forward

Shortcut Keys

Windows or LinuxMacOSExplanation
Double clickDouble clickDouble click on an element with your mouse to switch it to full page size. Double click again to switch back to its previous size.
BackspaceBackspaceDelete the currently selected element.
Shift + Tab⇧ + ⇥Select the previous element. This is very convenient if the element is hard to select with the mouse or invisible.
TabSelect the next element. This is very convenient if the element is hard to select with the mouse or invisible.
EscEscUnselect the currently selected element or close the currently open dialog box.
Ctrl + C⌘ + CCopy the currently selected element.
Ctrl + V⌘ + VPaste the last copied element onto the canvas. This also works across tabs and windows within the same web browser.
Ctrl + Z⌘ + ZUndo change.
Ctrl + YShift + ⌘ + ZRedo undone change.
Ctrl + S⌘ + SSave the page.
Alt + ←Alt + ←Move currently selected element left 1 pixel.
Alt + ↑Alt + ↑Move currently selected element up 1 pixel.
Alt + →Alt + →Move currently selected element right 1 pixel.
Alt + ↓Alt + ↓Move currently selected element down 1 pixel.
Alt + dragging or
Ctrl + dragging
Alt/Option + draggingWhen you drag the element with your mouse while holding down the Alt or Ctrl key, the element will move with steps of 20 pixels, making it easier to align elements.
Alt + resizing or
Ctrl + resizing
Alt/Option+ resizing When you resize the element with your mouse while holding down the Alt or Ctrl key, the element will resize in steps of 20 pixels, making it easier to align elements.
Alt + rotating or
Ctrl + rotating
Alt/Option + rotating
When you rotate the element with your mouse while holding down the Alt or Ctrl key, the element will rotate in steps of 15 degrees.

Articles

Was this article helpful to you? Yes No

How can we help?