Join Ziv Geurts, Designer & Elementor’s Lead Educator, for a step-by-step walkthrough on how to build more advanced designs with sticky elements in Elementor Pro. He’ll cover the basics and show 3 creative ways for you to take your designs to the next level. 6 Takeaways:
✓ Apply sticky effects to single & multiple elements
✓ Understand the Stay In Column setting
✓ Use offsets and padding to create desirable results
✓ Use CSS snippets to edit widgets even further
✓ Create cool sticky motion effects with custom positioning and z-index
✓ Manage sticky elements on tablet and mobile devices
hi all
i’m ziv a web designer and elementals
lead educator
and welcome to this webinar where we’ll
go over some cool ways to use the sticky
scrolling effect
we’ll cover the basics and see how you
can use this creative feature
to build more advanced designs that
really make your site stand out
so stick around sticky elements are
mostly used to keep something in view
on the screen when the visitors scroll
such as headers nav menus and other
elements
could be social icons or an air to
basket button for example
they make it easier to navigate a site
and help increase conversion rates
but besides for the practical benefits
of using sticky elements
we can also create more advanced designs
with them which is what we’ll focus on
during this webinar
elementor is packed with many creative
tools that give you the ability
to execute creative ideas in record time
and produce designs that would otherwise
take much longer to build
during this webinar i will demonstrate
three creative ways for you to use
sticky elements to create stunning
visuals
i’ll start with this awesome vertical
timeline where we’ll apply basic sticky
effects to single elements
just like i did with these image widgets
creating the illusion they follow the
timeline while scrolling down the page
then we’ll take it up a notch and see
how to apply this effect on more
advanced designs
with multiple elements in intersections
and lastly
we’ll combine what we’ve learned and
create these playful scrolling sections
from scratch
so you can apply this technique to your
own designs to showcase your products or
services for example in a way that
really does them justice
we’ll also make sure that they look
great on tablets and mobile devices
which can be done fairly quickly
long story short this webinar will give
you a better understanding of elemental
sticky feature
so you can use it to build more advanced
designs in less time you thought
possible
so let’s dive in and start with the
first example the vertical timeline
okay so let’s make a start let’s first
check out the general concept for this
page
in order to create the vertical timeline
effect what i first did is i made sure
that the page has a black
background and you can do this in the
page settings in the bottom left
then in the style tab you can set the
body style
this way i only set it once and all of
the sections that i add will have this
background
already set up which saves some time
next as you can see the first section
has two columns and
the second section has three
just like the following ones they have
the same layout but they’ve got
different content
also i added some padding to the top and
the bottom of the second columns
just to create the scrollable space for
the sticky effect so that it works
properly
also the columns they are lined up with
each other by setting the same column
width in the layout tab
now in order to create the white
timeline i made sure that throughout the
page
all second columns they get a white
border on the left
as you can see in the style tab i set it
to solid
and i gave it a width and a color
and i repeated this process in all of
the sections
okay now let’s look at the sticky image
with the date
which looks like it’s part of the
timeline
i’ll go ahead and delete it so we can
build it from scratch
first what i’ll do is i’ll drag in an
image widget
and i’ll select the image with the data
icon
then i’ll align it to the left so it
touches the border
and also i’ll adjust its size a bit
in the style tab just play around with
the width
that’s great okay
now let’s turn it into a sticky element
to give it that sticky scrolling effect
so it follows the timeline
when we’re scrolling down the page and
to do this
i’ll go to the image widget’s advanced
tab
then go to the motion effects tab
and here is the sticky option can set it
to top
bottom or none i’ll set it to top
because when we scroll
i want it to stick at the top of the
viewport
setting it to the bottom makes it stick
to the bottom of the viewport
which might be useful for different
effects
you can test to see exactly what works
best for you
i’ll set it back to top
and as you can see the image sticks to
the top of the viewport but it sticks
right
at the top and you can change this by
using the offset option
i’ll set it to 200 pixels just so
there’s a little bit of space between
the image
and the top of the viewport
great now let’s see what happens when we
continue scrolling
the image continues to scroll down the
entire page
and this is not what we want
we can prevent this from happening by
using the stay in column option
so i’ll go ahead and enable it and let’s
check it out
as you can see when we scroll now the
image stays in its column
and it doesn’t continue you can use this
effect very easily to turn widgets into
sticky elements
and they really improve the browsing
experience and create a playful ux for
your users
okay time for our next example so what
happens if a design
is more advanced and you want to apply
the same sticky effect
on multiple elements in the column i’ll
scroll down to the next section
and delete this image widget
and to create the timestamp what i’ll do
is i’ll use an icon widget
and a heading widget and the heading
widget i’ll rotate with the line of
custom css
first though in order to keep them in
one place what i’ll do is i’ll drag in
an intersection into the column
this intersection widget allows you to
create nested columns within a section
so you can create more complex layouts
just like the one we’re working on
we only need one column so i’ll just
delete this one over here
next i’ll drag in the icon and heading
widgets
for the icon i’ll go ahead and hover
over the upload svg option
and select this svg file i created
before
i’ll align it to the left and in style
i’ll increase the size of it
okay let’s preview
as you can see it doesn’t touch the
timeline
now this is because the column in the
intersection has some default padding
so i’ll go to the columns advance tab
and set it to zero
just to remove it
next in order to position the heading
and the icon widgets next to each other
we need to set their width to inline
this way widgets only take up their own
space in the column so you can position
multiple widgets side by side
you can do that in the advanced tab
under positioning
i’ll set the width to inline
as you can see it doesn’t take up 100 of
the column’s width anymore
i’ll do the same for the heading widget
cool now we have a dedicated tutorial
about using the inline option
so be sure to check it out and also add
a link in the description
okay time to change the text
i’ll go ahead and type the date
also another benefit of using a heading
widget instead of
an image is that you can change the
content whenever you want without having
to create a new image file
next i’ll style it a bit
change the color and choose a cool font
for this design i’ll use a custom adobe
font
and if you want to find out how to
integrate your adobe tap kit
or custom fonts in elementor we also
have a tutorial showing exactly how
you’ll see it in the description as well
okay now that the heading widget is
bigger it takes up more height
so the icon isn’t aligned anymore to
make sure that the widgets stay aligned
just go to the column settings
and set the vertical align to middle
okay great now all of the widgets in
this column they will automatically
align to the middle
now it’s time to rotate
elemento makes it very easy for anyone
to build websites without using code
but if you want to customize your
widgets even more and you know some code
you can add custom css to any widgets
column and section
to help you tweak your designs to get
the exact result you want
you can find it in the advanced tab and
the custom css
now to create the rotate effect i will
just use a short code snippet
to make it appear vertically first type
selector
this will automatically select the
element in our case the widget
we want to apply the css to
next add the open and close curly braces
these mark the beginning and the end
of the css code that specifies the style
then inside the braces type transform
colon rotate
this property and value they define a 2d
rotation
the angle itself is specified in a
parameter
so add parentheses and inside it
add the angle followed by the letters d
e g which stands for degrees
if you want the text to rotate the
opposite way just type negative 90
instead
cool so now the heading widget is set to
appear vertically
now let’s position it just a little bit
closer to the icon
we can do that by adding some negative
margin to the widget
i’ll unlink the values so we can set
them individually
remember though because we rotated the
widget the left margin
now is positioned at the bottom and the
top margin on the left side
so we need to add the negative margin
over here to move it closer to the icon
great our timestamp is ready
time to add the sticky effect instead of
adding it to each widget individually
just like we did before what we will do
now is set the sticky effect
to the entire inner section this way all
of the widgets inside it become sticky
so let’s select the inner section and in
the advanced tab
under motion effects set the sticky
effect to top
just like we did before i’ll set an
offset
and enable the stain column option
let’s check it out
as you can see it works perfectly just
like with an image
but now you also have the freedom to add
animations to specific widgets
you can do that to create an even more
custom effect
you can tweak this design for tablets
and mobile devices by adjusting
responsive settings
and enabling or disabling the sticky
effect on desktop tablets and mobile
devices
which i’ll show you how to do in our
final example
okay so now that we know how to create
sticky elements
and use them creatively let’s apply our
skills and build these playful scrolling
sections from scratch
it’s a little bit more advanced but if
you follow along you’ll see that it’s
not that hard
it really boosts user experience and is
a great way to showcase your products
or services and you’ll be able to apply
this technique to your own designs that
really make them stand out
we’ll also make sure that they look
great on tablets and on mobile devices
which won’t take long okay let’s go
okay let’s first check out the section
and see what’s going on
on the left we have a sticky heading and
an image widget with some motion effects
and the heading appears behind the image
giving it this cool effect when visitors
scroll
on the right we have divider widgets
with text for the product name and
features
and text editor widgets for descriptions
and there’s also some images
okay so now that we have an idea on the
structure of some of the features that
we’ll be using
i’ll go ahead and delete the entire
section so we can rebuild it from
scratch
first what i’ll do is create a new
section with two columns
and like with the previous examples for
this page i also set the background
color in the body
now let’s add some content to the right
column just to create enough vertical
space
to scroll through the section in the
widgets menu i’ll just go ahead and
search for the divider widget
and i’ll drop it in the right column
we can’t see it yet because the default
color is black
and before we change that what i’ll do
is i’ll add a text element
and type the product name
okay let’s style it
i’ll set the divider’s color to white
and in the text drop down i’ll go ahead
and do the same
next i’ll just adjust the position to
the right
and i’ll create some space between them
then back in the content tab i’ll reduce
the width a bit
just so it fits better
okay cool next let’s add a text widget
for the description
i’ll go ahead and drag it under the
divider
then add the text
make sure it’s not too long and
in style i’ll just change the color to
white as well
by the way if you’re using the same
colors over and over again like the
white for example
you could create a global color instead
of adding custom ones all the time
which can help speed up your build
process and it also makes it easier to
edit your designs
the same goes for global fonts i have a
dedicated webinar going over the basics
so be sure to check it out
i’ve also linked it in the description
in this webinar though i’m focusing on
the sticky effect
and the technical build process so i’m
just using custom ones
let’s move on to the second description
which is a specific product feature i
want to highlight
to save some time i’ll just duplicate
the divider widget
and drag it under the text
and then i’ll change the text
now because the text is shorter i’ll
also adjust the width a bit
okay next i’ll duplicate the text widget
and position it
and also change the text
okay time to bring this product to life
with some images
i’ll go ahead and drag in the image
widget
and choose the image
then in the advanced tab i’ll just add
some padding at the top and at the
bottom of the image
this not only helps with the composition
but it also creates the height that we
need for when we add the sticky scroll
effect to some of the elements
okay let’s copy and paste this image
under the second text widget
and set another image
great a column is populated with content
and has enough height to scroll through
the section
now let’s adjust the column padding a
bit just to tighten up the content
so it’s aligned with the rest of my page
okay time to create the sticky scroll
effect in the left column
like with the previous example what i’ll
do is i’ll use two widgets
and place them in an intersection so
first i’ll drag one in the column
also delete the extra column
next i’ll drag an image widget inside it
and choose the image
in style i’ll adjust the width just so
it fits nicely
and like before i’ll create some space
at the top and at the bottom
of the image by adding some padding to
the inner column
now before i add the heading widget and
create the overlap effect
i’ll first add the sticky effect i’ll
select the inner section
and in the advanced tab under motion
effects
i’ll set sticky to top pay attention
that the column has padding
so there’s no need to use an offset for
this example
ok now let’s enable the stain column
option to prevent the intersection from
leaving the column it’s in
great
okay time to create the text effect
first drag a heading widget above the
image
i’ll add the text
and align it to the center
next in the style tab i’ll make it white
and choose a nice font
cool okay so now we need to place the
heading on top of the image widget and
afterwards we need to make sure that it
appears behind it
to do that i’ll use elementor’s custom
positioning settings in the advanced tab
if you are new to this concept we have
multiple tutorials covering the basics
as well as more advanced ones to give
you inspiration so make sure you check
them out
in the heading widgets advanced tab
under positioning i’ll choose absolute
the widget jumped up because it’s
removed from the flow of elements on the
page
so now it doesn’t take up any height in
the column
this way we can position it exactly
where we want with the horizontal and
vertical orientation offsets
i’ll go ahead and move it down a bit
with the vertical orientation offset
okay now it’s time to place the text
behind the image
we can make sure elements appear in
front or behind each other by using the
z-index
i’ll select the image and in the
advanced tab
set the z index to 2.
cool you can do this to widgets columns
and sections
and layer different elements on top of
each other the largest z-index value
will appear on top
okay we’re almost done let’s add some
motion to the heading and image widgets
and make sure that it all looks good on
tablets and mobile devices
i’ll go to the motion effects drop down
and turn on the scrolling effect i’ll
add a vertical scroll
so the effect is applied when scrolling
down the page
i’ll leave the direction to app so the
image moves up when we scroll down
the default speed and viewport settings
work well here as well
so i’ll just leave it next let’s select
the heading widget
okay so here’s a tip for when using the
z-index and custom positioning while in
the editor
as you can see at times it might be hard
to select elements
when creating more complex multi-layered
designs
in this case what i can do is open up
the navigator in the bottom left panel
it provides easy access to every element
in the editor
as you can see the image widget is
already selected
and here is the heading widget okay cool
now for the heading widget
i’ll set it to move down
so now the two elements they’re moving
the opposite direction
this way the heading will be fully in
view when seeing the section for the
first time
and then gradually move behind the image
and when it reaches the bottom of the
column it will stay in it
you can play around with these settings
till you get the exact effect you’re
looking for
also we have a dedicated motion effects
playlist as well
to help you achieve cool effects that
really make your site stand out
by the way if you want to take this
design concept a little further
what you could do is use three elements
instead of two
and then apply a z-index to sandwich
them and add a motion effect
just like you see here it’s not that
hard to create and also it just requires
one line of custom css
that creates the transparent outline
effect
there will be a dedicated tutorial
showing you how to do this step by step
so be sure to subscribe to our youtube
channel and hit the notification bell so
you don’t miss cool tutorials like these
okay we’re almost there on desktop it
works well
but what about the other devices let’s
switch to tablet mode and see how it
looks
the effect still works just like in
desktop all we need to do is adjust the
size of the heading
and the image
these device icons indicate that we can
tweak these settings for tablets and
mobile devices
so i’ll go ahead and increase the image
as you can see the value is empty which
indicates that it’s inherited from the
desktop
i’ll adjust it a bit for tablet
that’s great now let’s fix the heading
widget
in typography you can see that the size
also has device icons
okay that’s better what i’ll also do is
decrease the padding in the right column
just to give the content a bit more
space
looks great
alright we are nearing the end of this
webinar last thing to do is check out
the mobile
the tweaks that we made for tablets are
now inherited for mobile
so the image and the heading they look
good no need to touch it
as you can see the columns on mobile
automatically take up 100
of the space which works well for the
design
you can control this with the column
width settings
it also has device icons
but i’ll leave it as is because i want
the visitors easily to see the content
on mobile screens
also since the columns are stacked on
mobile the side-by-side part of the
effect doesn’t display her
but our section reads pretty well
i have a webinar about all of these
responsive settings so make sure to
check it out as well
if you are new to it alright
we’re done i hope you managed to follow
along and learn some new things during
this webinar
and feel confident to apply creative
sticky scrolling effects
to your own website projects they won’t
only elevate your designs but also help
boost user experience
and improve conversion rates elemental
pro provides you with so many creative
tools that give you the ability
to turn ideas into real designs that
would otherwise take much longer to
build
for example you could apply the sticky
scrolling effect on pop-ups
lottie animations or custom menus so
play around with your own designs
experiment with different widgets and
combinations and surprise us with your
creations by sharing them in the
comments below
also be sure to join our facebook group
for loads of helpful tips and tricks
and become part of our huge elemental
community full of like-minded web
creators
don’t forget to subscribe to our youtube
channel full of fun tutorials that help
you master elementor
and lastly on our website check out the
help center for easy access to the
knowledge base
faqs docs and a lot more i will also
send you a link to a survey
just to give some feedback on this
webinar so we can improve them
and keep making relevant and to the
point webinars so good luck
and most of all enjoy being creative
thanks for tuning in
ciao for now
youhi all
i’m ziv a web designer and elementals
lead educator
and welcome to this webinar where we’ll
go over some cool ways to use the sticky
scrolling effect
we’ll cover the basics and see how you
can use this creative feature
to build more advanced designs that
really make your site stand out
so stick around sticky elements are
mostly used to keep something in view
on the screen when the visitors scroll
such as headers nav menus and other
elements
could be social icons or an air to
basket button for example
they make it easier to navigate a site
and help increase conversion rates
but besides for the practical benefits
of using sticky elements
we can also create more advanced designs
with them which is what we’ll focus on
during this webinar
elementor is packed with many creative
tools that give you the ability
to execute creative ideas in record time
and produce designs that would otherwise
take much longer to build
during this webinar i will demonstrate
three creative ways for you to use
sticky elements to create stunning
visuals
i’ll start with this awesome vertical
timeline where we’ll apply basic sticky
effects to single elements
just like i did with these image widgets
creating the illusion they follow the
timeline while scrolling down the page
then we’ll take it up a notch and see
how to apply this effect on more
advanced designs
with multiple elements in intersections
and lastly
we’ll combine what we’ve learned and
create these playful scrolling sections
from scratch
so you can apply this technique to your
own designs to showcase your products or
services for example in a way that
really does them justice
we’ll also make sure that they look
great on tablets and mobile devices
which can be done fairly quickly
long story short this webinar will give
you a better understanding of elemental
sticky feature
so you can use it to build more advanced
designs in less time you thought
possible
so let’s dive in and start with the
first example the vertical timeline
okay so let’s make a start let’s first
check out the general concept for this
page
in order to create the vertical timeline
effect what i first did is i made sure
that the page has a black
background and you can do this in the
page settings in the bottom left
then in the style tab you can set the
body style
this way i only set it once and all of
the sections that i add will have this
background
already set up which saves some time
next as you can see the first section
has two columns and
the second section has three
just like the following ones they have
the same layout but they’ve got
different content
also i added some padding to the top and
the bottom of the second columns
just to create the scrollable space for
the sticky effect so that it works
properly
also the columns they are lined up with
each other by setting the same column
width in the layout tab
now in order to create the white
timeline i made sure that throughout the
page
all second columns they get a white
border on the left
as you can see in the style tab i set it
to solid
and i gave it a width and a color
and i repeated this process in all of
the sections
okay now let’s look at the sticky image
with the date
which looks like it’s part of the
timeline
i’ll go ahead and delete it so we can
build it from scratch
first what i’ll do is i’ll drag in an
image widget
and i’ll select the image with the data
icon
then i’ll align it to the left so it
touches the border
and also i’ll adjust its size a bit
in the style tab just play around with
the width
that’s great okay
now let’s turn it into a sticky element
to give it that sticky scrolling effect
so it follows the timeline
when we’re scrolling down the page and
to do this
i’ll go to the image widget’s advanced
tab
then go to the motion effects tab
and here is the sticky option can set it
to top
bottom or none i’ll set it to top
because when we scroll
i want it to stick at the top of the
viewport
setting it to the bottom makes it stick
to the bottom of the viewport
which might be useful for different
effects
you can test to see exactly what works
best for you
i’ll set it back to top
and as you can see the image sticks to
the top of the viewport but it sticks
right
at the top and you can change this by
using the offset option
i’ll set it to 200 pixels just so
there’s a little bit of space between
the image
and the top of the viewport
great now let’s see what happens when we
continue scrolling
the image continues to scroll down the
entire page
and this is not what we want
we can prevent this from happening by
using the stay in column option
so i’ll go ahead and enable it and let’s
check it out
as you can see when we scroll now the
image stays in its column
and it doesn’t continue you can use this
effect very easily to turn widgets into
sticky elements
and they really improve the browsing
experience and create a playful ux for
your users
okay time for our next example so what
happens if a design
is more advanced and you want to apply
the same sticky effect
on multiple elements in the column i’ll
scroll down to the next section
and delete this image widget
and to create the timestamp what i’ll do
is i’ll use an icon widget
and a heading widget and the heading
widget i’ll rotate with the line of
custom css
first though in order to keep them in
one place what i’ll do is i’ll drag in
an intersection into the column
this intersection widget allows you to
create nested columns within a section
so you can create more complex layouts
just like the one we’re working on
we only need one column so i’ll just
delete this one over here
next i’ll drag in the icon and heading
widgets
for the icon i’ll go ahead and hover
over the upload svg option
and select this svg file i created
before
i’ll align it to the left and in style
i’ll increase the size of it
okay let’s preview
as you can see it doesn’t touch the
timeline
now this is because the column in the
intersection has some default padding
so i’ll go to the columns advance tab
and set it to zero
just to remove it
next in order to position the heading
and the icon widgets next to each other
we need to set their width to inline
this way widgets only take up their own
space in the column so you can position
multiple widgets side by side
you can do that in the advanced tab
under positioning
i’ll set the width to inline
as you can see it doesn’t take up 100 of
the column’s width anymore
i’ll do the same for the heading widget
cool now we have a dedicated tutorial
about using the inline option
so be sure to check it out and also add
a link in the description
okay time to change the text
i’ll go ahead and type the date
also another benefit of using a heading
widget instead of
an image is that you can change the
content whenever you want without having
to create a new image file
next i’ll style it a bit
change the color and choose a cool font
for this design i’ll use a custom adobe
font
and if you want to find out how to
integrate your adobe tap kit
or custom fonts in elementor we also
have a tutorial showing exactly how
you’ll see it in the description as well
okay now that the heading widget is
bigger it takes up more height
so the icon isn’t aligned anymore to
make sure that the widgets stay aligned
just go to the column settings
and set the vertical align to middle
okay great now all of the widgets in
this column they will automatically
align to the middle
now it’s time to rotate
elemento makes it very easy for anyone
to build websites without using code
but if you want to customize your
widgets even more and you know some code
you can add custom css to any widgets
column and section
to help you tweak your designs to get
the exact result you want
you can find it in the advanced tab and
the custom css
now to create the rotate effect i will
just use a short code snippet
to make it appear vertically first type
selector
this will automatically select the
element in our case the widget
we want to apply the css to
next add the open and close curly braces
these mark the beginning and the end
of the css code that specifies the style
then inside the braces type transform
colon rotate
this property and value they define a 2d
rotation
the angle itself is specified in a
parameter
so add parentheses and inside it
add the angle followed by the letters d
e g which stands for degrees
if you want the text to rotate the
opposite way just type negative 90
instead
cool so now the heading widget is set to
appear vertically
now let’s position it just a little bit
closer to the icon
we can do that by adding some negative
margin to the widget
i’ll unlink the values so we can set
them individually
remember though because we rotated the
widget the left margin
now is positioned at the bottom and the
top margin on the left side
so we need to add the negative margin
over here to move it closer to the icon
great our timestamp is ready
time to add the sticky effect instead of
adding it to each widget individually
just like we did before what we will do
now is set the sticky effect
to the entire inner section this way all
of the widgets inside it become sticky
so let’s select the inner section and in
the advanced tab
under motion effects set the sticky
effect to top
just like we did before i’ll set an
offset
and enable the stain column option
let’s check it out
as you can see it works perfectly just
like with an image
but now you also have the freedom to add
animations to specific widgets
you can do that to create an even more
custom effect
you can tweak this design for tablets
and mobile devices by adjusting
responsive settings
and enabling or disabling the sticky
effect on desktop tablets and mobile
devices
which i’ll show you how to do in our
final example
okay so now that we know how to create
sticky elements
and use them creatively let’s apply our
skills and build these playful scrolling
sections from scratch
it’s a little bit more advanced but if
you follow along you’ll see that it’s
not that hard
it really boosts user experience and is
a great way to showcase your products
or services and you’ll be able to apply
this technique to your own designs that
really make them stand out
we’ll also make sure that they look
great on tablets and on mobile devices
which won’t take long okay let’s go
okay let’s first check out the section
and see what’s going on
on the left we have a sticky heading and
an image widget with some motion effects
and the heading appears behind the image
giving it this cool effect when visitors
scroll
on the right we have divider widgets
with text for the product name and
features
and text editor widgets for descriptions
and there’s also some images
okay so now that we have an idea on the
structure of some of the features that
we’ll be using
i’ll go ahead and delete the entire
section so we can rebuild it from
scratch
first what i’ll do is create a new
section with two columns
and like with the previous examples for
this page i also set the background
color in the body
now let’s add some content to the right
column just to create enough vertical
space
to scroll through the section in the
widgets menu i’ll just go ahead and
search for the divider widget
and i’ll drop it in the right column
we can’t see it yet because the default
color is black
and before we change that what i’ll do
is i’ll add a text element
and type the product name
okay let’s style it
i’ll set the divider’s color to white
and in the text drop down i’ll go ahead
and do the same
next i’ll just adjust the position to
the right
and i’ll create some space between them
then back in the content tab i’ll reduce
the width a bit
just so it fits better
okay cool next let’s add a text widget
for the description
i’ll go ahead and drag it under the
divider
then add the text
make sure it’s not too long and
in style i’ll just change the color to
white as well
by the way if you’re using the same
colors over and over again like the
white for example
you could create a global color instead
of adding custom ones all the time
which can help speed up your build
process and it also makes it easier to
edit your designs
the same goes for global fonts i have a
dedicated webinar going over the basics
so be sure to check it out
i’ve also linked it in the description
in this webinar though i’m focusing on
the sticky effect
and the technical build process so i’m
just using custom ones
let’s move on to the second description
which is a specific product feature i
want to highlight
to save some time i’ll just duplicate
the divider widget
and drag it under the text
and then i’ll change the text
now because the text is shorter i’ll
also adjust the width a bit
okay next i’ll duplicate the text widget
and position it
and also change the text
okay time to bring this product to life
with some images
i’ll go ahead and drag in the image
widget
and choose the image
then in the advanced tab i’ll just add
some padding at the top and at the
bottom of the image
this not only helps with the composition
but it also creates the height that we
need for when we add the sticky scroll
effect to some of the elements
okay let’s copy and paste this image
under the second text widget
and set another image
great a column is populated with content
and has enough height to scroll through
the section
now let’s adjust the column padding a
bit just to tighten up the content
so it’s aligned with the rest of my page
okay time to create the sticky scroll
effect in the left column
like with the previous example what i’ll
do is i’ll use two widgets
and place them in an intersection so
first i’ll drag one in the column
also delete the extra column
next i’ll drag an image widget inside it
and choose the image
in style i’ll adjust the width just so
it fits nicely
and like before i’ll create some space
at the top and at the bottom
of the image by adding some padding to
the inner column
now before i add the heading widget and
create the overlap effect
i’ll first add the sticky effect i’ll
select the inner section
and in the advanced tab under motion
effects
i’ll set sticky to top pay attention
that the column has padding
so there’s no need to use an offset for
this example
ok now let’s enable the stain column
option to prevent the intersection from
leaving the column it’s in
great
okay time to create the text effect
first drag a heading widget above the
image
i’ll add the text
and align it to the center
next in the style tab i’ll make it white
and choose a nice font
cool okay so now we need to place the
heading on top of the image widget and
afterwards we need to make sure that it
appears behind it
to do that i’ll use elementor’s custom
positioning settings in the advanced tab
if you are new to this concept we have
multiple tutorials covering the basics
as well as more advanced ones to give
you inspiration so make sure you check
them out
in the heading widgets advanced tab
under positioning i’ll choose absolute
the widget jumped up because it’s
removed from the flow of elements on the
page
so now it doesn’t take up any height in
the column
this way we can position it exactly
where we want with the horizontal and
vertical orientation offsets
i’ll go ahead and move it down a bit
with the vertical orientation offset
okay now it’s time to place the text
behind the image
we can make sure elements appear in
front or behind each other by using the
z-index
i’ll select the image and in the
advanced tab
set the z index to 2.
cool you can do this to widgets columns
and sections
and layer different elements on top of
each other the largest z-index value
will appear on top
okay we’re almost done let’s add some
motion to the heading and image widgets
and make sure that it all looks good on
tablets and mobile devices
i’ll go to the motion effects drop down
and turn on the scrolling effect i’ll
add a vertical scroll
so the effect is applied when scrolling
down the page
i’ll leave the direction to app so the
image moves up when we scroll down
the default speed and viewport settings
work well here as well
so i’ll just leave it next let’s select
the heading widget
okay so here’s a tip for when using the
z-index and custom positioning while in
the editor
as you can see at times it might be hard
to select elements
when creating more complex multi-layered
designs
in this case what i can do is open up
the navigator in the bottom left panel
it provides easy access to every element
in the editor
as you can see the image widget is
already selected
and here is the heading widget okay cool
now for the heading widget
i’ll set it to move down
so now the two elements they’re moving
the opposite direction
this way the heading will be fully in
view when seeing the section for the
first time
and then gradually move behind the image
and when it reaches the bottom of the
column it will stay in it
you can play around with these settings
till you get the exact effect you’re
looking for
also we have a dedicated motion effects
playlist as well
to help you achieve cool effects that
really make your site stand out
by the way if you want to take this
design concept a little further
what you could do is use three elements
instead of two
and then apply a z-index to sandwich
them and add a motion effect
just like you see here it’s not that
hard to create and also it just requires
one line of custom css
that creates the transparent outline
effect
there will be a dedicated tutorial
showing you how to do this step by step
so be sure to subscribe to our youtube
channel and hit the notification bell so
you don’t miss cool tutorials like these
okay we’re almost there on desktop it
works well
but what about the other devices let’s
switch to tablet mode and see how it
looks
the effect still works just like in
desktop all we need to do is adjust the
size of the heading
and the image
these device icons indicate that we can
tweak these settings for tablets and
mobile devices
so i’ll go ahead and increase the image
as you can see the value is empty which
indicates that it’s inherited from the
desktop
i’ll adjust it a bit for tablet
that’s great now let’s fix the heading
widget
in typography you can see that the size
also has device icons
okay that’s better what i’ll also do is
decrease the padding in the right column
just to give the content a bit more
space
looks great
alright we are nearing the end of this
webinar last thing to do is check out
the mobile
the tweaks that we made for tablets are
now inherited for mobile
so the image and the heading they look
good no need to touch it
as you can see the columns on mobile
automatically take up 100
of the space which works well for the
design
you can control this with the column
width settings
it also has device icons
but i’ll leave it as is because i want
the visitors easily to see the content
on mobile screens
also since the columns are stacked on
mobile the side-by-side part of the
effect doesn’t display her
but our section reads pretty well
i have a webinar about all of these
responsive settings so make sure to
check it out as well
if you are new to it alright
we’re done i hope you managed to follow
along and learn some new things during
this webinar
and feel confident to apply creative
sticky scrolling effects
to your own website projects they won’t
only elevate your designs but also help
boost user experience
and improve conversion rates elemental
pro provides you with so many creative
tools that give you the ability
to turn ideas into real designs that
would otherwise take much longer to
build
for example you could apply the sticky
scrolling effect on pop-ups
lottie animations or custom menus so
play around with your own designs
experiment with different widgets and
combinations and surprise us with your
creations by sharing them in the
comments below
also be sure to join our facebook group
for loads of helpful tips and tricks
and become part of our huge elemental
community full of like-minded web
creators
don’t forget to subscribe to our youtube
channel full of fun tutorials that help
you master elementor
and lastly on our website check out the
help center for easy access to the
knowledge base
faqs docs and a lot more i will also
send you a link to a survey
just to give some feedback on this
webinar so we can improve them
and keep making relevant and to the
point webinars so good luck
and most of all enjoy being creative
thanks for tuning in
ciao for now
you
