Articles on: The editor

Element positioning

Every element in the editor has one of two position types: Free position places it in the design, and Screen border anchors it to a corner, side or the center of the viewer's screen. With either type, you can also turn on Sticky to keep the element in place on screen while the page scrolls.



Choosing a position type


The position type is set in the element's settings in the right panel. To choose it:


  1. Select the element on the canvas.
  2. In the right panel, click the position dropdown at the top of the element settings. It shows the current type, for example Free position.
  3. Under "Position element", choose Free position or Screen border.


Screen border is only available for an element placed directly in a scene. For an element inside a group, it is greyed out.


Free position


Free position places an element at a fixed spot in the design, so it stays in the same place relative to other freely positioned elements. The design scales to fit the viewer's screen, and the element scales with it. On smaller screens, the safe zone decides when a freely positioned element is cut off.


To position an element with Free position:


  1. Select the element and choose Free position in the position dropdown in the right panel.
  2. Drag the element to the spot you want on the canvas, or enter values in the X and Y fields.


Screen border


Screen border positions an element relative to the viewer's screen instead of the design. You anchor the element to one of nine points: the four corners, the middle of the four sides, or the center of the screen. The element then keeps the same distance from that point. Screen border ignores the safe zone.


Because the element follows the screen rather than the design, it does not always line up with freely positioned elements on different screen sizes. For example, a logo set 50px from the top-left corner stays the same distance from the corner, scaled with the publication, on every screen, so it may appear further from, or closer to, the freely positioned elements around it.



To position an element with Screen border:


  1. Select the element. It must be directly in a scene, not inside a group.
  2. In the right panel, click the position dropdown and choose Screen border.
  3. Click one of the nine anchor points.
  4. Enter the distance from the screen border in the offset fields below the position dropdown.


Sticky


Sticky keeps an element in a fixed place on the viewer's screen while the page scrolls. A navigation menu that stays at the top of the screen is a common example. Sticky works with both Free position and Screen border.


A sticky element stays sticky until the end of its scene at most. When the scene ends, the element scrolls away with it.


Sticky is available when:


  • The element is in a Longpage scene. On any other scene type, such as Fullscreen, the Sticky toggle is greyed out.
  • The element is directly in the scene, not inside a group. A group placed directly in the scene can itself be sticky.



Making a free position element sticky


A sticky element with Free position becomes sticky when, while scrolling, it reaches the chosen point on the screen: the top, the center or the bottom. To set it up:


  1. Select the element. It must be directly in a Longpage scene, not inside a group.
  2. In the right panel, click the position dropdown at the top of the element settings.
  3. Turn on Sticky.
  4. Choose Top, Center or Bottom as the point on the screen where the element sticks.
  5. Optional: enter a distance in pixels in Sticky for. Leave it at 0 to keep the element sticky until the end of its scene.
  6. Optional: enter a Margin to add space between the element and the top or bottom of the screen. Margin is not available with Center.


With Top, the element sticks once its top edge reaches the top of the screen, plus any Margin. An element placed at the very top of the page is sticky as soon as the page loads. An element lower down first scrolls up with the page, then sticks when it reaches the top of the screen.


Making a screen border element sticky


A sticky element with Screen border stays at its anchor point on the screen for the whole of its scene. To set it up:


  1. Select the element. It must be directly in a Longpage scene.
  2. In the right panel, click the position dropdown and make sure Screen border is selected.
  3. Choose an anchor point if you haven't yet.
  4. Turn on Sticky.


Sticky for and Margin are not available for Screen border. The panel shows which part of the screen the element sticks to, for example "Element is sticky to the top left corner of the screen of the user."


Frequently asked questions


Why can't I turn on Sticky?


The Sticky toggle is greyed out when the element is in a scene that is not a Longpage scene, or when the element is inside a group. Change the scene to Longpage, or make the group sticky instead of the element inside it. Only a group placed directly in the scene can be sticky, so if the group sits inside another group, make the outermost group sticky.


Why is Screen border greyed out?


Screen border is greyed out when the element is inside a group. Only elements placed directly in a scene can use Screen border. Elements inside a group always use Free position.


Why did my element stop being sticky after I grouped it?


Elements inside a group cannot be sticky or use Screen border. When you group a sticky or Screen border element, the editor changes it to Free position and turns Sticky off. To keep the effect, make the group itself sticky.


Why does my sticky element stop partway down the page?


A sticky element stays sticky until the end of its scene at most. If the element has Free position and a value in Sticky for, it stops being sticky after that distance. Set Sticky for to 0 to keep it sticky for the whole scene.


Why is my freely positioned element cut off on smaller screens?


An element with Free position scales with the design, and the safe zone decides what is cut off on smaller screens. Elements outside the safe zone may be cut off. To keep an element at the edge of every screen, use Screen border, which ignores the safe zone.




Related updates:

Updated on: 20/10/2026