How to link to a specific section on a WordPress page using Elementor Pro

One question I get a lot from clients is this: “How do I link from one page straight to a specific section on another page?” For example, if you’re a cake maker, linking from your homepage to the flavours section on your services page, rather than sending people to the top of the page and making them scroll to find it.

Essentially, what you’re trying to create is an “Anchor Link”.

An anchor link is a link that takes you straight to a specific section of a page, rather than just the top. It works by placing an invisible marker, called a CSS ID, on the section you want to jump to. The link then points to that marker using a hash symbol, so clicking it scrolls the visitor directly to the right spot on the page.

The good news is that Elementor Pro makes this easy once you know where to look. Here’s how to do it.

Step 1: Add an ID to the section you want to link to

First, you need to mark the spot you want people to land on. In this example, that’s the flavours section on your services page.

1. Go to your services page in Elementor and click the section, column, or widget that contains the flavours content.
2. In the left hand panel, click the Advanced tab.
3. Find the field labelled CSS ID.
4. Type a short name with no spaces, for example: flavours-section (Tip: Only use lower-case letters and dashes. Don’t use full stops or any other characters or numbers for your ID, but you can make up any word you like. NEVER use a hashtag here!!!)

Think of this as placing an invisible label on that part of the page. It doesn’t change how anything looks, it just gives that spot a name you can link to.

Step 2: Create the link on your homepage

Now go to the button, image, or text on your homepage that you want people to click.

1. Click the element and open its link settings.
2. Enter the full URL of your services page, followed by a hash symbol and the CSS ID you just created. For example: https://yoursite.com/services/#flavours-section

That’s it. When someone clicks that link, it will take them to the services page and scroll them straight down to the flavours section.

Step 3: Test it on the live page

Always test this on your published site rather than inside the Elementor editor, since the scrolling behaviour only works properly once the page is live. Click the link and check it lands in the right place.

A few things to watch out for

I do want to flag a couple of common issues before you get started, since they trip up a lot of beginners.

Each CSS ID must be unique on the page. If you use the same ID twice, the link may not work reliably.

Don’t include the hash symbol in the CSS ID field itself. The hash only goes in the link, not in the ID name.

Sticky headers can hide the anchor point. If your site has a sticky menu that stays fixed at the top when scrolling, the flavours section might end up partly hidden behind it once the page jumps there. If this happens, Elementor Pro has a scroll offset setting under Site Settings, Layout, that you can adjust to compensate.

How to add the link to a standard WordPress menu

If you want to add this link to your main navigation menu rather than a button or text link, you can do that using the custom link option in WordPress.

1. In your WordPress dashboard, go to Appearance, then Menus.
2. On the left side, find the box labelled Custom Links.
3. In the URL field, enter the full page URL followed by the hash and the CSS ID, for example: https://yoursite.com/services/#flavours-section
4. In the Link Text field, type what you want the menu item to say, for example: Flavours
5. Click Add to Menu.
6. Drag the new item into place in your menu structure, then click Save Menu.

This works the same way as the homepage link. The CSS ID still needs to exist on the destination section for it to work, and the same sticky header caveat applies.

Do I need a plugin for this?

No. This is a built in Elementor Pro feature, so there’s no need for an additional plugin just to link to a section on a page.