Hi everyone and welcome to this tutorial!
In this video I will be showing you how to
create a full page scroll with the help
of Elementor page builder. What else
except Elementor will need is a JetElements plugin that you can get if you
follow the link in the description down
below. For this tutorial, I will be using
Monstroid 2 WordPress theme that
you can also get if you follow the link
in the description. It is a multipurpose
Elementor WordPress theme, going with a
modular constructor, that you can see in
action in the minute. So to create a full
page navigation we will need to create
at least two or three sections just so
we can see how the effect works. So to
create my sections I will go to "Magic
button" which is a part of Monstroid 2 modular constructor. With the help of the modular
constructor I can add entire sections to
my pages. Let me show you an example.
Let's go to sections and filter them by
topic. Let's choose the topic called
"Creative", choose the section you like and
insert it on our page. One section is
done. Let's click on the "Magic button"
again, go to sections then filter again,
choose the topic,
and insert one more section. I guess
we'll go with three sections so we can
better see the effect. We go to "Sections"
again, filter and let's insert the last
section. Here we go. Now we've got three
sections in total. Now I'll go to the
elements panel and search for "Scroll
navigation" widget which is a part of
JetElements plug-in and I'll drop it
somewhere here in my first section. So
now in the items tab you see that you've
got these three items which represent
your sections and you have to look to
the section ID this is the information
that we need to grab from here and go to
our sections click "Edit section", go to
"Advanced" and find the "CSS ID" field and I'll need to paste the ID, that I
grabbed from the item right here in the
CSS ID of my section.
I guess it's clear and since all the
items have the IDs "section_1",
"section_2" I will go and
repeat the same process with all the
other sections, but just changing the
digit and then "section_3".
So we're set. What else we can do is we can
click on the scroll navigation widget
again and have a look at the settings.
You can see that when you hover over
these dots you see a little kind of a
tooltip. There is also an option to style
the look of these dots.
If you find them to be too big you can
make them smaller so they look a little
more neat. Like so, and here you see that
you can tweak the behavior of these dots
on different states, like normal, invert, or
hover, and active, etc. Here are the
settings for the style of the hints. The
hints are these tooltips, right, so you
see what settings you've got.
By the way, if you toggle this option to
"yes", it will allow you to scroll through
the sections with the help of your mouse,
without even touching these dots. Now
let's update and go and have a look at
the preview. And here we go.
Now I'll try and scroll it with my mouse
without even touching the dots. It
scrolls through the page and jumps to
the section right away. You can play
around and create different types of
sections or use Monstroid 2 modular
constructor. So I hope this video helped.
If you liked the video leave a thumbs up
and subscribe to our channel.
Thank you for watching!
