Position type

On Editor X, you can choose how elements and sections move to create unique scroll effects as visitors scroll through a site by setting different position types. The position types are default, sticky and pinned.

Setting the position type

To change an element or section’s position, open the Inspector panel and go to the Position type dropdown. There, you can choose from Default, Sticky or Pinned.

Elements and sections are automatically set to default, which means they move in or out of the viewport as visitors scroll.

A design in the editor with a dark green background, white text in the center, and a lighter green circle with the words contact us at the top right. The contact us element is selected on the canvas, and the Inspector panel is open to display the dropdown where you can change the position type to default, sticky or pinned

Sticky position

To set elements to sticky position, open the dropdown under Position type and select Sticky.

Sticky elements stick to the viewport as visitors scroll vertically through a container or section. Once visitors reach the bottom of the container or section, the elements stop sticking and scroll with their parent. Sections set to sticky stay in position at the top of the viewport as visitors scroll down.

A section in the editor with a black background, white title text to the upper left and body text with an image below it to the right. The title text element is selected, and in the Inspector panel the mouse hovers over the Sticky setting to change the text element’s position type

Top offset for sticky elements

Set the distance between an element and the top of the viewport while visitors scroll by adding a Top offset.

A section in the editor with a black background, title to the upper left and body text followed by an image to the right. The title text element is selected, and from the Inspector panel the mouse is hovering over the area where you set the Top offset. The value is set to fifty pixels

Setting the position type to pinned

To set elements to pinned position, open the dropdown under Position type and select Pinned.

Pinned elements stay in a fixed position as visitors scroll through a site or a section that has a scroll inside.

A design with a dark green background, white text at the center and a lighter green button that says contact us to the top right. The lighter green button is selected and from the Inspector panel the cursor is hovering over the pinned position type in a dropdown

Define where to pin

After setting an element’s position type to pinned, define where to pin it from the Pin to dropdown. The options that appear depend on the element hierarchy. The possible options to pin to are:

Container: Make the element visible as visitors scroll horizontally or vertically through a specific container.

Section: Make the element visible as visitors scroll horizontally or vertically through the specific section.

Page: Make the element visible as visitors scroll up and down the page.