To link WordPress menu items to Elementor sections enables you to turn your elementor landing pages into a single jump to section one page websites.
In this quick tutorial, I’m going to show you how to assign your WordPress menu items to individual Elementor sections, so that your website visitor can simply click on any of your menu items and they are taken straight to that particular section that is assigned to the very menu item from the WordPress menu.
For this, we’re going to make use of the custom link menu option and Elementor CSS ID feature.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Link WordPress Menu Items to Elementor Sections
What you’ll Need To Link WordPress Menu Items to Elementor Sections
To achieve this, you’re going to need a premade section with a header, and with menu items that you must have created using the Menus option on your WordPress dashboard (WordPress > Menus > create a new menu).(00:39)
Here, I have this Restaurant Landing menu that I’m going to use, with menu items that are custom links.
To add custom links just go to the Custom Links option, enter a URL, then a link text, and click the Add to Menu button (00:52)
You can also move the item and reposition it to wherever you want it in the menu.
When you’re done creating a menu with your menu items, click the save menu button at the bottom right.
Once you have your header with your menu ready, and you also have your premade sections and content for the menu items, now we can get to the part of linking the menu to the sections.
First, we’re going to assign custom CSS IDs to the sections where we want the website visitors to be taken when they click on any menu item.
To Read: Create a Clean Modern Elementor Info Card with Curved Shape on Hover
Step 1: Add Custom CSS IDs to your Elementor Sections
In your Elementor editor select the section with the menu (01:43), in the Edit Heading area on the left, go to Advanced, under CSS ID assign it as ‘menu’ (01:50)
Note: The CSS ID should be unique and shouldn’t be used anywhere else on this page.
Select the next section header (01:59), go to Advanced, under CSS ID assign it ‘reason’ (02:05)
Do the same for the blog section: Select section, Advanced > CSS ID; blog (02:13)
After doing this, click the update button.
Also Read: Create an Elementor vCard with Download Link and Contact Modal Popup
Step 2: Add the CSS IDs of your Elementor Sections to their Respective Menu Items
After adding IDs to your Elementor sections, you now need to go back to your menu in your WordPress dashboard and assign those IDs to the corresponding menu items.
In your WordPress dashboard, under Menus go to your menu items, select the menu item called Menu and on the URL option give it #menu (with the hashtag) (02:32).
Repeat the same steps for the rest of the menu items; #reasons & #blog
When you’re done, save and preview your website.
This is what you should be having on your website now (02:52). When you click on any menu item, you’re taken straight to that section on the same page.
To Read: Elementor Landing Page – A Step by Step Guide
In Conclusion
That’s how you can easily link your WordPress menu items to your Elementor sections and make navigation easy for your website visitors.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
