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.
