Pinned elements

Pinned elements will stay pinned to a defined position on the screen. You can use them to create Parallax effects with floating labels, centered content, sticky headers and footers, and much more.

To pin an element:

1. With an element selected, look to the Properties palette and to the Position section.
2. Click on the “Display pin position options” checkbox and dropdowns for the ‘X’ (width) and ‘Y’ (height) parameters will appear.
3. Using the dropdown, select a position for the element. Add a margin in px from the pinned position if you’d like some spacing from the pinned position.

Pin position options:

The following are the options for pinning an element. The X and Y options can be combined. For example, an element can be pinned to the top and to the left.

X (width)

1. Fixed (default): the element will not be pinned; it will not move with the screen
2. Pin to left: the element will be pinned to the left of the screen
3. Pin to center: the element will be pinned to the center of the screen
4. Pin to right: the element will be pinned to the right of the screen

Y (height)

1. Fixed (default): the element will not be pinned; it will not move with the screen
2. Pin to top: the element will be pinned to the top of the screen
3. Pin to center: the element will be pinned to the center of the screen
4. Pin to bottom: the element will be pinned to the bottom of the screen