How to Link WordPress Menu Items to Elementor Sections

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.

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)

2djOq54EFD l8TA1Pb2a CI6Hhbf NZZwcDBGHxZW f kdsvcVxChuZ5BAr5iL7xaTDcaID2pad8Zt3mvSEEzr6GQjGt1B0T93CP3gexHiunFPEuju47aI WtKr2gOyC8UDU8lMI

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)

OQTH7cJ uh6powkU1Qudzr8CGvoSQ95p4DbV 0vEeEl6y5FYPYZTcSFDEzl6rxOb4ytnyP1xwRT4Y50PglFTn5t1wLgIKVUy42xGa5VM zaJ1n6qOJC9pHTtoo76mLUqa0Ta RHu

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)OZX eV1cK10iIY58BnxnB7wFSijaF76Rpmh9dDGrVHvD6bpSJ DJji0plUXKOm8t7gxEtiMELXY7BK CN9MdnHU61LyM clmYThl1BFGMTHhONj3Jt6TrrLF5rE8ugjFjzpbgPfH

9KuwtPd fO47 A2NLaWucB0ioC8qnDE7BUnw7Hf1zI4bwjYs4 GCY9r8rrlRQyU2ntq wMuIy6cRY lj9VlF8AruycbCKEL

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)

BvcO0TC18GtQt8G7sE76IGErCjrWBqbMppIi2 oTgYAxXzFnjHoK04lF8S2mbgTFpmno8JEzQlC09ESdMKup4W1BSo5FVF rPTowkKaCww03AZo 6qotSs6H2GNfL4g7ERnhJslD

Do the same for the blog section: Select section, Advanced > CSS ID; blog (02:13)

IwiFsNH6ETdVmS0P1GtrW7hhHRRwWsl8Wr 6ZHNRVQS s2sjeczzDk780PKVCROAFufXCCVMeYTsBdQ41vMcrPJbn90LB0XeSeuzAAdP6Cy9ZqJV rA7K0u4lMk TrMdI8yS2tf8

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).

im5UjGuJTsYnP5dqKibD642ABkXayli1FNdcvgfyZ3Nzwsx la o4Wy7tSeV9Gyzl6N88QG8z1ISd1zmjRiA B3Jn GdZZWlVKPunsCE32 bJOui BhBmJQda M6UCteQ5GDUJXt

Repeat the same steps for the rest of the menu items; #reasons & #blog

5sxK6MCZb3WpMSddB6kys6Y7RKb6E8egJETXCXV8og1fAIb bz1beZGkBh2mYTEm8v5iLh3f7ubuM4MWIc JQoaBPolpqRfMQ1lit2VNBabeA270zXsl h8lNn1zidocojBjZW3X

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.

Link WordPress Menu Items to Elementor Sections

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users