Full Page Scroll Effect with Elementor Free

In this article, I will help you install a Full Page Scroll Effect with the help of Elementor Page Builder. To do this you will need JetElements plugin in addition to Elementor of course. JetElements plugin is the most popular Elementor add-on that you can buy for just $15.

Today, for creating this effect we’ll be using Monstroid2 WordPress theme. After the recent update, this multifunctional modular Elementor WordPress template became even more powerful and efficient. Are you ready? Let’s get started. To set up a Full Page Scroll effect, you will need to create at least two or three sections so the effect works.

1. To create sections, go to the Magic Button which is part of Monstroid2 Modular Constructor.
2. Go to Sections and filter them by topic. Choose the section you like and insert it on your page.
3. Once this is done, click the Magic Button, go to the Sections filter again, choose the topic, and insert one more section.
4. Now do that once again. We’ll go with three sections in total. Remember that you can always change the number of sections according to your needs.
5. Now go to the Elements panel on the left side menu and search for Scroll Navigation widget which is a part of JetElements plugin. Grab it and drop it somewhere in your first section.
6. After that on the left side menu, you will see the Items tab with three items that represent your sections.
7. Click on Section 1 and go to the Section ID field – there you will see the words “section_1”. You need to copy this information, go to your Sections and click Edit Section above them.
8. Then go to Advanced on the left side menu and find the CSS ID field.
9. Paste in this field the ID you copied from the Item.
10. All the sections have the same name only with different digits like “section_1”, “section_2”, and “section_3”. That’s why you can repeat the same process with all the other sections and just change the digit.
11. Click on the Scroll Navigation widget again and take a look at the Settings tab on the left side menu.
12. When you hover over the dots on the right, the number is equal to your sections number; you can see a little tooltip. There’s also an option to style the look of these dots.
13. Go to the Style section and choose Dots tab.
14. Here you can tweak the behavior of these dots on different states like Normal, Invert, Hover, and Active.
15. If you find the dots too big, you can make them smaller choosing the Dots Style field and changing Box Size.
16. Up above, in the Hints tab you can find and edit settings of the hints (tooltips seen while hovering).
17. After that, go to the Settings tab in the Content section.
18. Toggle the option Full Section Switch to “yes”. This will allow you to scroll through the sections with the help of your mouse without even touching these dots.

Elementor WordPress Themes

Yankee - Digital Agency Elementor WordPress Theme

Demo | Download | Hosting

Intech - IT Solution And Technology Services WordPress Theme

Demo | Download | Hosting

Newshive - Creative, Flexible Magazine, News Portal & Blog WordPress Theme

Demo | Download | Hosting

Cleanmaster - Cleaning Service Responsive WordPress Theme

Demo | Download | Hosting

Logonit - IT Solutions and Business Service Responsive WordPress Theme

Demo | Download | Hosting

Coursia - Course & LMS WordPress Elementor Theme

Demo | Download | Hosting

vCharity - Nonprofit Charity WordPress Theme

Demo | Download | Hosting

Darrell house - Quality Construction WordPress Theme

Demo | Download | Hosting

Context - Construction and Architecture Responsive WordPress Theme

Demo | Download | Hosting

Technology & IT Solution Services WordPress Theme

Demo | Download | Hosting

If you feel like you lack tools for website building, here you’ll find the ultimate solution. ONE by TemplateMonster is a subscription service offering the unlimited number of web products in one pack. At the current moment, it includes more than 8,500 items including top products like plugins, extensions, and templates. You can use all of them as often as you need for as many projects as you work on.

Except for the functionality, you may also be amazed at the price of ONE service. The whole collection of useful elements along with expert service and professional support will cost you just $19 monthly. And if you are a regular MonsterPost reader, get the bundle at a reduced price. Apply promo code BecomeThe1 and save 5% on a subscription.

Final Word

And here we go - let’s try it out. Scroll your mouse without even touching the dots - it scrolls through the page and jumps to the next section right away. You can play around and create different types of sections or use Monstroid2 Modular Constructor. I hope this article was helpful. Have any questions? Write them in the comments area down below.

Read Also

How to Create a Responsive Parallax Scrolling Effect with Elementor

How to Create a Countdown Timer with Elementor Page Builder

JET Plugins for WordPress Elementor Builder [Review]

How to Create Pricing Tables with Elementor Page Builder