Element positioning

There are two positioning types for elements, behaving differently relative to the page or screen. In addition to either element position type, "sticky" may be used.

Free positioning

Allows the placement of an element to the desired position on the canvas freely. The element stays fixed to that position, regardless of screen size. To do so, sekect the 'Free position' option from the positioning menu of the element configuration panel on the right side of the Pro editor. You can choose to position the element by dragging and dropping or adjust the numerical "X" and "Y" values in the positioning menu.

Screen border

Positioning an element by 'screen border' will position your element relative to the corners, borders or center of the screen. This results in the element not always being in the same position as other (freely positioned) elements, when the publication is being viewed on different screen sizes. For example, if your logo is positioned to always be 50px from the left top corner, that space will remain fixed and the element may appear further away from other freely positioned elements.

Sticky

The sticky option is used in combination with element positioning. It quite literally "sticks" an element to a fixed position on the screen when scrolling. This could either be for the full length of the page or a selected distance. A common example is a navigation menu set to stick to the top of the page.

Sticky in combination with 'free position'

You can toggle on sticky behaviour in the positions panel. There are several aspects to sticky behavior that are important to keep in mind when used in combination with 'free positioning'. A freely positioned sticky element (or group)...

• ...will become sticky when it is being scrolled past. That means that a sticky element (or group) that appears further down the page, will become sticky later as opposed to sticky elements that appear directly on screen. If you'd like your element to be sticky from the start, make sure to position it in the upper section of your page so that is is directly in view upon page-load.
• ...may be sticky for the full page length or set to a specific distance in pixels. This opens up opportunities to create complex designs with elements that are selectively sticky as you scroll.
• ...can have an additional margin. This serves as extra white space to accurately position elements in relation to the chosen trigger position (top, center or bottom).

If you want an element or group to be sticky from the start you will have to position it at the top of the page.

Related updates:

• 10/03/2025 | New options for sticky positioning

Updated on: 28/04/2025