How to Create Anchor Links in Gutenberg

Updated: September 6, 2022

Let’s say you want to redirect your website visitors from one section to another section of the content on the same page or a specific section of another page. Well, it’s called jump links or anchor links. Maybe you are wondering, “Is it possible to create jump or anchor links only using Gutenberg WordPress editor?”. With Gutenberg WordPress editor, you can easily create anchor links.

This article will show you how to create anchor links in Gutenberg. It might be surprising because we know Gutenberg has flexibility and compatibility issues in designing a website.

How to Create Anchor Links in Gutenberg

1. Anchor Links on the Same Page

A jump link or anchor link is a hyperlink that will jump to another section/area of the page. It could jump to the same page or another page. First, we start by jumping to the same page.

Go to your Gutenberg WordPress editor; you can create new content (post/page) or select existing content.

We will create a link on the text “By setting Z-Index and By creating a pop-up” to jump straight to the tutorial sections.

Now, go to the block that you want to jump to. Click the Block tab settings panel. Scroll down and click Advanced tab. On the HTML Anchor field, enter a word or two — without spaces — to make a unique web address just for this block; then, you’ll be able to link directly to this section of your page.

In this example, we type a “z-index” on the HTML Achor field of the Z-index tutorial section, and for the popup tutorial section, we give a “pop-up” on the HTML Anchor field (see the GIF).

Next, go to the text where you want to create the link. Highlight the text and then click the Link (🔗) icon. Afterward, type the hashtag (#) followed by an HTML anchor you created, and then press the Enter button on your keyboard.

To see how it worked, you can update or publish your page and then preview the page in the new tab.

2. Anchor Links to Another Page

As you can see from the GIF above, it jumps immediately to the tutorials section when you click the link. That hyperlink is on the same page as you’re jumping to. But, as we mentioned earlier, you can create a link on another page that will jump to the same sections we just added as an Anchor link (z-index and popup tutorials).

To get started, you can create new content (page/post) or select existing content.

Next, go to the text you want to link to the section on the previous page where you’ve just created an Anchor link. Highlight the text and then click the Link (🔗) button. To fill the link field, you must go back to the previous web page where you’ve just created an Anchor link and copy the URL. Afterward, paste the URL into the link field, followed by the hashtag (#) and the Anchor link you’ve just created. You can enable the Open in new tab option if you want to.

To see how it worked, you can update or publish your page and then preview the page in the new tab.

The Bottom Line

WordPress is a very popular tool for individuals without coding experience who want to build websites and blogs. The WordPress block editor or the Gutenberg WordPress editor is an interpretation of WordPress itself–simple and easy to use.

This article shows you how to create jump links or anchor links in Gutenberg. We hope this article is helpful for you and improve your skill in web designing.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.