In this tutorial we will learn how to use Elementor’s Inner Section widget to create sticky effects that stay in their columns. The example will demonstrate how to use animations and sticky effects while scrolling through a section. This tutorial will cover:
✔︎ How to use sticky inner sections that stay in their columns
✔︎ How to set up a section to create the sticky effect
✔︎ How to use animations that display on sticky inner sections
✔︎ And much more!
hey there it’s ash from elementor
ever wanted to create those side-by-side
sticky layouts but couldn’t get them to
stay in their columns
today i will show you how to use inner
sections to create advanced
customized sticky layouts that won’t
leave their columns
gain more control over your
intersections and maintain a clear and
consistent experience on your website
let’s find out how that works as you can
see i have created a section with three
columns
i have already added some content to the
first and third columns so you can go
ahead and add any content that you like
make sure your content creates enough
vertical space to scroll through the
section
now let’s build our inner section on the
widgets menu
drag and drop the intersection widget
here
and delete the extra column
back to the widgets menu drag in the
image widget and choose the image of
your preference
select the inner section and go to the
advanced tab
under motion effects enable the sticky
effect by selecting one of these two
options
depending on your design you might want
the inner section to stick to the top or
bottom
in our example we want the inner section
to stick to the top
so we’ll select this one
if we try to scroll we will see that the
inner section sticks to the top just
like we set it to
but it sticks right at the top we can
control the distance between the top of
the window
and our section by using the offset
option
set it to 250 pixels and let’s try
scrolling again
that looks much better what happens
though if we continue scrolling
the image keeps following the screen on
the entire web page
even after the section is over
you can easily control this by enabling
the staying column option
this will make the element stay inside
its column helping you to create
customized designs and control the
motion of your elements
let’s go one step further and combine
another motion effect to see how they
work together
select your image and in the advanced
tab
go to motion effects we’ll make this
image rotate while we scroll down
so let’s enable the rotate option and
customize it a bit
now if we try to scroll we will see that
the motion effect stops when the
intersection becomes sticky
this happens because the effect by
default is set relative to the viewport
we can make this work by selecting the
effect to be relative to the entire page
instead
now if we test it again the motion works
great while scrolling
play around with your sticky inner
sections that stay in their columns
use it for hamburger menus
or cool timelines
make beautiful designs and take your
creativity even further
share with us your unique creations and
don’t forget to like and subscribe to
our youtube channel for more videos and
tutorials
thanks for watching
you
