Getting Started
Tip #1 - Toolbar Functions:
Our designer makes use of three toolbars - a Primary toolbar (above the designer), a Secondary toolbar (right of the designer), and a Tertiary toolbar (below the designer), also known as the "action bar". Hover over, or click, the various designer toolbar buttons to view useful tooltips and learn more about what they do.
Tip #2 - Create or Modify an Element:
Once you're more familiar with the toolbars and their functions, you can click any of the element buttons in the Primary toolbar to insert a new object of that type into the designer. This will automatically open a modal window where you can add or modify content or properties for that element.
Tip #3 - Modify Design Properties:
To modify properties for the overall design, such as width, height or corner radius, click the first button on the left, in the Primary toolbar. A modal window will open allowing you make your modifications to the design. Click the Update button at the bottom of the modal to save and apply these changes to your design.
Tip #4 - Saving Elements:
Once you are done making modifications to the element or design properties, you can close the modal by clicking the Update button at the bottom of the modal to save and apply these latest changes. With the exception of textual content, clicking the Close button on the modal will cancel the latest changes, allowing the element to revert back to its previous state.
Tip #5 - Help For Fields:
Some modal windows offer additional tips related to validation requirements or other limitations. If you see a Help button within the modal window, you can click it to get more information on certain fields.
Tip #6 - Quick Edits:
Double-clicking an empty area of the designer container, or on a specific element within the designer container, will open a modal window for the designer or element (respectively) where you can modify and update its properties. You can also double-click on any of the items in the element list below the designer to perform the same function. Note: If you don't see an element list below the designer container, it's simply because the design contains no elements yet.
Tip #7 - Setting Active Element:
Single-clicking any element within the designer container or the element list below the container, sets that element as "active". Once an element is "active", you can use functions such as Move Forward or Move Backward within the Secondary toolbar to adjust the element elevation (or layer position), relative to the other elements in the container.
Tip #8 - Element Positioning:
You can always tell which element is "active" because it is highlighted in the element list. Once a designer element is "active", you can refine the position of that element by holding [SHIFT] and using your arrow keys to move the element up, down, right and left, one pixel at a time.
Tip #9 - Element Styling:
In addition to General properties under the modal windows, many elements (and the design itself) have a Styles tab with additional properties that can be modified such as background and foreground (font) colors, borders, alignment, and more.
Tip #10 - Element Sizing:
All elements within the designer container have options for Rotate, Resize and Delete. If you run into problems where text or other parts of your element are not aligned or visible, try resizing or rotating the element for a better view. Or you can simply delete the element and start fresh.
