Position type.

Change how elements or sections move as visitors scroll through a site by setting their position type. Learn how elements behave in default position, or how to call attention to certain elements by positioning them as Pinned or Sticky.

Change how elements or sections move as visitors scroll through a site by setting their position type. Learn how elements behave in default position, or how to call attention to certain elements by positioning them as Pinned or Sticky.

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.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶