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.
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.
|X||The horizontal position of the element.|
|Y||The vertical position of the element.|
|Angle||The rotation angle of the element in degrees.|
|W||The width of the element.|
|H||The height of the element.|
|Start||If a page start animation is configured, this will display the corresponding timing.|
|End||If 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
|Windows or Linux||MacOS||Explanation|
|Double click||Double click||Double click on an element with your mouse to switch it to full page size. Double click again to switch back to its previous size.|
|Backspace||Backspace||Delete 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.|
|Tab||⇥||Select the next element. This is very convenient if the element is hard to select with the mouse or invisible.|
|Esc||Esc||Unselect the currently selected element or close the currently open dialog box.|
|Ctrl + C||⌘ + C||Copy the currently selected element.|
|Ctrl + V||⌘ + V||Paste the last copied element onto the canvas. This also works across tabs and windows within the same web browser.|
|Ctrl + Z||⌘ + Z||Undo change.|
|Ctrl + Y||Shift + ⌘ + Z||Redo undone change.|
|Ctrl + S||⌘ + S||Save 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 + dragging||When 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.|