Anchor links make navigations on pages easier. Readers can jump over to the target parts without going through all the details. Anchor links are not a much-talked topic at all. But it does have a lot of use cases. Anchor links can improve the user experience and make navigating long-form content a superbly easy.
After the introduction of Gutenberg editor, it became a piece of cake to create anchor links. As the default editor has plenty of blocks with the system to add anchor links on their own, creating anchor links does not require third-party plugins. It’s there inside the Gutenberg editor. Previously, on Classic Editor, you needed to install an anchor link plugin to do this.
Want to know how? Here in the article, we will show you how to create anchor links on WordPress Gutenberg editor in a detailed guideline.
What is an Anchor Link?
Anchor links are some kind of links that instantly take you to a specific part of the page upon clicking on them. They mainly have two parts. One is anchor source – a link element and another one is target anchor.
<a href="#the_anchor_link">Anchor source</a>
<span id="the_anchor_link">Target anchor</span>
Why and When to Use an Anchor Links?
Anchor links is also good for Google. Its spiders can crawl faster through content and have better idea of what your page is about, thus, improves SEO. Anchor links will improve the UX of site content, eases navigation through posts and pages and lower the bounce rate. Reasons of using anchor links are as follows.
- Let users find what they are looking for
- Share direct links to different sections within a blog post or page
- It can potentially help you increase CTR
- Makes your site visitors feel comfortable with the long content
The befitting anchor link’s use cases are:
- Long-form blog articles and pages
- Contents tables
- Landing pages with lots of subsections
- Return to top and jump to main part feature
How to Create Anchor Links on WordPress Gutenberg Editor
You can create anchor links on WordPress Gutenberg editor in two simple steps. You don’t need any third-party plugins for this. So, today, we will show you how to create anchor links on WordPress without a plugin. Let’s do this.
Step 1
Select the section that you want to have an anchor link on. Which will be anchor source. Give a hash(#) link to that content but don’t set that to open in a new tab. Let’s say the hash link is #the_anchor_link just like the image below.
Step 2
Now, you need to go to the target part where you want your visitors to jump to. The target content will have to be one of a heading tags (h1 to h6). Otherwise HTML Anchor field will not be appeared on the Advanced option.
Handling Transition in Anchor Links
By default, links will take visitors to target section with a sudden jump. If you want to apply some transition to IDs, you can install plugins like Page scroll to id. It’s a fully free plugin that can replace the browser’s “jumping” behavior with a smooth scrolling animation when links with ahref value containing # are clicked.
Anchor links can improve the overall user experience of your website. It’s the best way to deliver long-form content without making visitors irritated. On the flip side, The anchor link might decrease the time visitors’ stay on the site but it sure makes them happy and reduces their chance to jump to other websites for the information they are looking for. With our detailed guidelines, you are supposed to be able to create anchor links on WordPress Gutenberg editor easily. Make sure you follow each step carefully.
Do visit Virfice for more of such tutorials. Stay in touch.
It doesn’t seem to work from home page to another page of same website. Attempting to link from welcome page to interview on another page.
You don’t need an anchor link in this case. Link your interview page on the welcome page just like the way you generally place a link. Thanks for your comment.
Hey There. I found your blog using search. That is a well written really
article. I’ll make sure to bookmark it and come back to
reading more of your
useful information. Thanks a lot for the post.
I’m going to be back 🙂
You are welcome. Best wishes.
Thanks my issue Resolved.
You are welcome!