The majority of element placement occurs within the canvas, but for greater control, you have the option to use the placement panel to adjust individual settings as needed.
Moving & resizing elements on canvas
To move elements on the canvas, you can use the arrow keys for precise adjustments. Pressing the shift key allows you to move elements in increments of 10 pixels at a time. Checkout keyboard shortcut documentation for more shortcuts.
Distance lines
When moving elements on the canvas, one of the first things you will notice is the green lines. These are called distance lines. They allow you to offset the new elements from other elements with even distances that are multiples of 10.
The green lines tell what the element is aligned to. The Interaction Editor will choose to align the element relative to then closest element.
If you want to keep the element aligned to same edge of the view as before, you can press shift key.
Magnet lines
While dragging the elements you will also notice red lines these lines allow you to align element against other elements. The alignment is also copied from other elements into the moved element. This ensures that if the screen size changes, the elements will remain aligned.
Press shift if you want to just visually align the element against other elements, but don't want to change which side the element is aligned to.
Full width/height view
To create an interaction that covers the entire screen or just the top part, you need to enable the full width/height mode by resizing the view element to its maximum size. For instance, position the view element at the top left corner and change its size to reach the right edge of the virtual viewport. Once you have successfully done this, you will see a blue badge displayed like below.
Stretched element
To add a normal element (like picture) that occupies rest of the unused space in view, you should enable the stretching mode. It can be activated by resizing the element to cover part of the left and right sides of the view element.
This stretching mode is similar to the full width/height mode mentioned earlier, but the element does not have to extend all the way to the edges. So in other words, the stretching mode adjusts the size of the element to maintain a distance from both the left and right sides of the view. For example, in the illustration below, the element will maintain a distance of 60 pixels from the left side and 80 pixels from the right side.
Placement panel
Modifying settings in placement panel usually is not necessary. It is mostly for advanced use cases. All the common actions can be done directly in the canvas area (See the above section)
Device specific placement
NOTE: this features is not yet available to all customers
Sometimes we may need to adjust the placement and visibility of an element based on the screen size. For instance, on mobile devices, we might choose to hide certain elements or reposition them to fit to the smaller screen.
This feature is more advanced and to make use of it, we recommend checking out our tutorial for how to utilize it effectively.
Constraint/alignment controls
The constraint/alignment section consists of two components: the green square and the dropdown menus. The top dropdown menu allows you to adjust the horizontal alignment, while the bottom one controls the vertical alignment. The green square provides a quick way to change the alignment settings.
Constraints indicate which edge(s) the element will adhere to when the parent's size changes. The element's parent depends on the type of element being changed. For a view element, the parent is always the screen. For other elements, the parent is typically the view element.
Different constraint types:
- left, right, top, bottom: Adhere to that edge of the parent
- center: Adhere to middle line
- stretch (only for non-view elements): Maintains the distance from both sides. This means that if the parents size increases then the stretched elements size is also increased
- full (only for view element): This options makes the view occupy the full width/height of the screen.
Quick constraint/alignment change controls
The horizontal constraints are displayed as follows:
 |
 |
 |
 |
| Left alignment | Center alignment | Center/right alignment | Stretch/full alignment |
The vertical constraints function in a similar manner.
Size
The size controls for the normal elements
If you need a precise size for an element, you can adjust it here. The view element offers additional settings for size, which are detailed in a separate documentation.
Offset
The offset fields tell the distance from the edge of the parent. If the element is aligned to left, then the offset tells distance from left edge. If the element is aligned to center, then the offset tells distance from the center line. Etc.
Rotation
Rotate the element to create vertical text or add a unique twist to your design. It's a fun way to enhance the visual appeal of your interaction.
It's worth noting that stretch constraints are not recommended when the element is rotated. The stretching will not function properly, especially with larger rotations.
Show by default
This option allows you to hide element initially. It has two common use cases.
- If you are using our JavaScript API to display the element, you can use this checkbox to initially hide the element.
- Another use case is that you want to hide the element for example in mobile version of the interaction, but show it in the desktop version.