How to create anchor links on WordPress Gutenberg editor

How to create anchor links on WordPress Gutenberg editor

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 a third party plugins. It’s there inside the Gutenberg editor.

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 you 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 link?

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 links 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. Let’s know how it is done.

Step 1

Select the section that you want to 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.

create anchor links

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.

create anchor links

Handling link transition

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 a href value containing # are clicked.

Anchor links can improve the overall UX of your website. It’s the best way to deliver long content without having 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.

Leave a Reply

Close Menu
shares

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their uses. To find out more, including how to control cookies, see here: Cookie Policy