Editor X: Setting Your Section to Pinned or Sticky
Want to draw attention to a specific section on your page? Add a scroll effect so it stays visible as visitors scroll up and down. Fix a section to the top, bottom or sides using the Pinned effect, or make it "stick" to the page by setting its distance from the top.
In this article, learn how to:
Tip:
You can add scroll effects to individual elements as well – not just page sections.
Adding a Pinned Scroll Effect
A pinned section stays in position when visitors scroll down. You can fix it to the top, bottom or sides of the page, and decide whether or not it should overlap the neighboring section.
To add a Pinned scroll effect:
- Click the section in the Editor.
- Click Position in the Inspector
. - Click the Position type drop-down menu and select Pinned.
- Select or de-select the checkbox next to Overlap next section, depending on your preference.
Note:
To apply the Pinned effect, your section must border at least 1 edge of the page (top, bottom, rightmost or leftmost) on all breakpoints.
If it's a Master section, make sure it's positioned this way across all pages that display it.
Having an issue with your pinned Header?
When changing the height of a header that's pinned, it might create an empty gap on your page. If you're experiencing this temporary issue, click here to learn more.
Adding a Sticky Scroll Effect
Add a Sticky effect to your section so it stays visible as visitors continue scrolling. At first, visitors see the section wherever you've positioned it in your page, but it "sticks" to the screen as they scroll down.
To add a sticky scroll effect:
- Click the section in the Editor.
- Click Position in the Inspector .
- Click the Position type drop-down menu and select Sticky.
- Add an offset value above the section.
See it in action:
The Sticky scroll effect can only be viewed while in preview mode or on the live site.
Removing a Scroll Effect
You can always remove a scroll effect you've previously added to a section in your page.
To remove a scroll effect from a section:
- Click the section in the Editor.
- Click Position in the Inspector .
- Click the Position type drop-down menu and select Default.
Did this help?
|