Position type

Let’s explore how to set position types on Editor X.

You can choose how elements or sections move as visitors scroll through a site by setting their position type. For example, this green button stays in view while we move down the page. You can leave the default position, or call attention to certain elements by positioning them as Pinned or Sticky.

Let’s dive in.

Any time you add an element to the canvas, its position type is set to default. It stays where you set it, and moves in and out of view while visitors scroll through the site. To create a different scroll experience, we can change the position type.

Let’s start with pinned. Pinned position lets you lock elements to the position of their parent containers. When we pin an element, we can choose where to pin it to–in this case either the section or the page.

We’ll pin this element to the page. This means the position we set is relative to the entire viewport–or the visible area the site is displayed on. Now, as we scroll, it stays fixed within the viewport and is visible as we scroll up and down the page.

This section with the images has a Layouter that slides side-to-side. This circle placed in the first Layouter item is set to default position right now, so when we scroll horizontally the item moves out of view.

Instead, we want it to stay visible while the user scrolls through the slider. Again, we’ll set its position type to pinned and then pin the element to the Layouter, which is also a container. Now it stays in place.

Pinned position is also useful when you have a vertical or horizontal scroll inside a section.

Let’s say we have content here that overflows the section. We’ll select the section and set its overflow property to scroll to create a scroll within the section. Again, by default the circle element scrolls out of view. But when we pin the element to the section, you can see as we preview the site that it stays put as we scroll through the section.

Keep in mind that with pinned position, changing the position type affects all breakpoints. If we change this element’s position back to default on tablet, that change also applies on desktop.

Pinned position can also be applied to certain sections. You can apply it to the very top or very bottom ones—or to the right or left if you have vertical sections. Here, our first section is the header. When we set it to pinned, it’s automatically pinned to the page since that’s its parent.

If we tried to pin this section under the header, we can see it’s not available.

We’ll preview the site to see how the header behaves. As we scroll, it stays visible at the top of the viewport.

Now let’s take a look at how sticky position works.

As you can see, this section is longer than the screen height. When we scroll down the title moves out of view because it’s position is set to default.

We want this title to stay in view as we scroll. So we’ll set the text to sticky position; this way it sticks in the viewport until we reach the bottom of the parent container or section. We can also add a Top offset, which sets space between the element and the top of the viewport.

Before we take a look at how the sticky position affects our design, let’s set the header position back to default so we see the sticky effect more clearly.

And let’s preview it. As we scroll down the page, the element sticks in the viewport until we reach the bottom of the parent container or section, and then it starts scrolling again. Note that sticky position only works for vertical scrolling, not horizontal.

Right now the text sticks all the way up to the bottom of the section, but to create a bit of space underneath it we can add a bottom margin to the text element. So, let’s go back to editing and set a bit of a margin underneath.

We’ll check again–and now when we reach the bottom, the element stops scrolling with a bit of space before the bottom of the section.

Unlike pinned position, sticky position can be adjusted at each breakpoint. So on tablet, if we set this title’s position type back to default, it won’t affect the desktop breakpoint.

We can apply sticky position to sections as well as elements to create a sticky scroll effect. When we set  a section like this one to sticky, it scrolls to the top of the viewport then sticks there. Then the following section scrolls up over or underneath it depending on how the sections are arranged.

You can create an effect like this for example, where sections appear layered over each other.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.