Don’t you love it when you get to a website and the page is super easy to navigate?
You might think that the site is using some kind of custom code or fancy plugin, but often times anchor links are behind the easy-to-navigate page.
In today’s post, I’m going to walk you through what anchor links are and how to create and use them inside of WordPress so that you can create a stellar user experience for your readers.
What are Anchor Links?
An anchor link is a special type of link that instead of taking you to a different page, takes you to a different place on the same page. They can also sometimes be referred to as “jump links” or “Page jumps” because they allow you to “jump” to a different section of the page.
A common example would be a table of contents on a lengthy blog post that allows you to drop down to a specific section.
However, they can also be used in a specialized sticky navigation menu to help the reader navigate the page. For example, on a sales page, you could have a specialized menu that directs prospects to testimonials or the “buy now” section.
How to Quickly (and Easily) Create an Anchor Link in WordPress (Gutenberg Blocks)
The first step is to decide how you’ll use anchor links on the page, are you creating a
- Table of contents
- Special menu
- Jump to your Call to Action
Once you know, you can then figure out where to place your anchor links.
Step 1: Highlight where you want the anchor link
This could be a heading, a section on the page, image, really almost anything you want on the page.
Step 2: Navigate to the Block Editor and open “Advanced” settings in the Block Settings
Once you’ve highlighted or selected the section, navigate to the block menu and open up the “Advanced” section.
Step 3: In the ‘HTML Anchor’ add the phrase to represent your anchor link
Rather than entering the entire heading, a simple short reference that is easy to remember is best. For the example in the screenshot above, you might use ‘Audits’. This phrase is also known as the ID Attribute and when linking to the Anchor, you’re using the “Anchor ID”
Step 4: Make Note of Your Link
You’ll now be able to link to that anchor link, simply by using ‘#htmlanchorphrase’. For our example, it would be, #audits.
How to Link Directly to Your Jump Link from Another Page
If you want to create a link to that section on another page you would do so by adding the jump link at the end. For example, websiteurl.com/blog-title/#audits
Making a Button a Jump Link
Buttons in Gutenberg also have an HTML anchor under “advanced”. But as they are button’s they have a link themselves.
The easiest way to think about it is, the Anchor Link (created using HTML anchor), takes the user to the button from somewhere else. The button link takes the user away from the button.
Buttons can also link to anchor links. For example, the link buttons below will jump you to other sections in this post:
How to Create a Jump Link to a Section
We’ve covered how to create anchor links to a specific text or button, but here we’ll go over creating an anchor link to a section. This is particularly helpful on sales pages or other landing pages.
Some themes offer additional “blocks” that can be used in Gutenberg. For example, I use Kadence theme and have Kadence blocks that I use. One I often use is is the “Row Layout”
How to Create a Specialized Navigation Menu Using Anchor Links
Once you create anchor links, you can link to them from other pages as well. You simply add the reference to the end of the URL, for example yoursiteurl.com/#anchorlink
Which means you can create a specialized navigation menu in WordPress made up of your anchor links.
In WordPress, you would navigate to Appearance>Menus and select “create a new menu”
Name your menu and click the button that says “create menu”.
To add an item to the menu, in the “Add menu items” column open the drop down for “custom links”
Fill in the url with the anchor link, I’ve filled in bloggerbreakthrough.com/resources/#free and for the anchor text, I’ve put free resources.
Then click “add to Menu” and once you have all your links in the menu click the blue “Save Menu” button.
Then when you’re building a landing page where you don’t want your normal navigation to show, you can have this other menu show instead.
Using the WordPress Navigation Menu block in Elementor, I’m able to select which menu I want to be displayed:
How to Set Up Anchor Links in Elementor
Elementor is a powerful page builder, with a visual editor. To create an anchor link in Elementor you first want to select the element that you want the link to “jump” to. In the screenshot below, I’ve selected a spacer.
In the editing dashboard on the left, go to the “Advanced” tab, and click the Advanced option, dropdown.
In the spot for “CSS ID” enter the reference term of your choosing.
Now that you’ve set up the anchor link, you need to actually link to it.
Again you can select either an element on the page (for example, a button) or a section of text. And in the link “url” space you’ll enter a pound sign aka a hashtag followed by the reference term you chose.
In this example, it would be:
Anchor Link Dos & Don’ts
- Use them to create internal links within your own website that can lead readers from one section of content to another.
- Do make note of any necessary forwarding if you change domains
- Do use anchors to help make long-form articles easy to navigate
- Don’t use plugins that install shortcode – if you ever get rid of the plugin all those shortcodes will break.
Linking is a very important aspect of any website and we use different kinds of links to connect pages and pages together. When you are considering which element to use for linking within pages on your site, there are multiple options.
But as with everything, the goal should be to provide the information the reader wants in the easiest way possible.
Hopefully, this post has helped you to understand what an anchor link is, how to create them, and given you some insight on when to use them.
If you have any questions, ask in the comments section below!