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.
- To create sections, go to the Magic Button which is part of Monstroid2 Modular Constructor.
- Go to Sections and filter them by topic. Choose the section you like and insert it on your page.
- Once this is done, click the Magic Button, go to the Sections filter again, choose the topic, and insert one more section.
- 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.
- 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.
- After that on the left side menu, you will see the Items tab with three items that represent your sections.
- 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.
- Then go to Advanced on the left side menu and find the CSS ID field.
- Paste in this field the ID you copied from the Item.
- 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.
- Click on the Scroll Navigation widget again and take a look at the Settings tab on the left side menu.
- 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.
- Go to the Style section and choose Dots tab.
- Here you can tweak the behavior of these dots on different states like Normal, Invert, Hover, and Active.
- If you find the dots too big, you can make them smaller choosing the Dots Style field and changing Box Size.
- Up above, in the Hints tab you can find and edit settings of the hints (tooltips seen while hovering).
- After that, go to the Settings tab in the Content section.
- 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.
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.
Jessica spends 12 hours a day on the internet managing security for web assets and loves her macha tea