Greetings WordPressers! Today, we’re revisiting and recreating the one-page smooth scrolling menu, Elementor style. If you’re new here, welcome! This blog is your go-to place for all things WordPress. Now, let’s jump straight into our tutorial.
Around four years ago, I shared a video on setting up smooth scrolling navigation for a one-page website. That video was a massive hit, and after several years, I believe it’s high time we updated it. And here’s the best news: the process is now even simpler than before, especially if you’re an Elementor user. Regardless of whether you have the free or the pro version, this guide will be incredibly straightforward for you.
So, here’s our refreshed, 2021 edition for creating a smooth scrolling one-page website.
Setting Up the One-Page Smooth Scrolling Website
We start off with an Elementor template. For the sake of this tutorial, I’ve chosen a beautiful template for a fictional ‘Delightful Interiors’ website. It consists of various sections, including a hero section at the top, sections for lounge chairs, decor placements, social media, and a ‘Get in Touch’ contact form.
Our initial task is to create a navbar at the top of the hero section. This navbar will also contain a stylish logo. Next, we need to create a menu, and this is where Elementor shines. We don’t require Elementor Pro or an actual menu for this task because we can use the Icon List feature, available in both free and pro versions of Elementor. We’ll set this up inline and align it to the right.
This ‘menu’ will be our navigational tool. It should link to the different sections of our website. For this example, we’ll name the menu items Lounge, Decor, Follow, and Contact, corresponding to the respective sections.
Establishing Scroll-to-Anchor Points
Elementor comes with a built-in feature allowing links within a page to scroll to specific anchor points. By assigning unique CSS IDs (or anchor tags) to each section on the page, we can link our menu items directly to these sections. In our case, we assign the CSS IDs ‘Lounge’, ‘Decor’, ‘Follow’, and ‘Contact’ to the respective sections.
Now, by linking these CSS IDs in our menu (through the format #ID), we enable smooth scrolling between sections. Try it out in preview mode – you’ll find a one-page website with smooth scrolling enabled.
Enhancing User Experience
To enhance the user experience, we need to ensure our navbar stays visible even when users scroll down the page. This is achieved by making our navbar ‘sticky’. Additionally, we give our sticky navbar a white background for visibility.
Another valuable UX tip is to provide a link for users to easily navigate back to the top of the page, regardless of their current position. While a ‘Home’ link can serve this purpose, modern web users are accustomed to clicking on a logo to return to a website’s starting point. Therefore, linking our logo to the top of the page will effectively serve this purpose.
Ensuring Responsiveness
After setting up our one-page smooth scrolling website, we need to ensure it looks and functions well across different devices. When checked in the tablet preview, you might find slight alignment issues which can be easily rectified in the editor.
For mobile view, you can center-align the content for better aesthetics. Alternatively, you can completely remove the menu for the mobile view, or opt for a compact hamburger menu.
And voila! You now have a sleek, fully responsive, smooth-scrolling one-page website using Elementor.
