How To Create Anchor Links In Gutenberg Editor
Hi Everyone!! Today, I am going ro share with you the steps to Create Anchor Links In Gutenberg Editor. So, let’s start with the basic information about anchor links.
What Are Anchor Links?
Anchor Linkswhich are also referred to as table of contents or jump menu linksare links which when clicked instantly take you to a specific section orpart of the page. They are also used to link an external page.
Pros andCons of Anchor Links
Pros of Anchor Links
- One of the biggest advantages of anchor links
isgiving a better user experience while browsing your website. These links allowsusers to jump to a section or part of your post.
- Adding anchor links on headers lets you link direct links to different sections in your posts.
- Anchor links can also be used for things such as “back to top”.
Cons of Anchor Links
- Anchor Links or Table of Contents candecrease the average time on site per visitor as the visitor can directly jumpto the step or part which he wants to read.
- Anchor Links can impact your adrevenue. This is because the visitor can directly jump to a section of yourpost leaving the ads behind.
How ToCreate Anchor Links In Gutenberg Editor
CreateAnchor Links Manually
Create adisplay text for your link and add a hyperlink to it.
To create ananchor link you will have to add an anchor name to the text you want to linkto. URLs that are assigned anchors contain a “#” character proceeded bythe anchor name. You can name this anything you want but it isrecommended to keep it related to the actual name of the header.
If you look at the HTML view, it looks like this:-
<a href=”#test1>Test 1</a>
You need to add an ID to the header on which you want your anchor link to jump to. To do this you will need to Edit Block as HTML. Add the same ID which you chose with the # in Step-2. The anchor name and ID have to be same for the link to work correctly.
<h2 id=”test1”>Test 1</h2>
Must Read: How To Justify Text In Gutenberg Editor
CreateAnchor Links With A Plugin
If you want to add an anchor link to your headers without the HTML code then creating
This pluginautomatically generates table of contents for your headers and lets you insertanchor links into your post with the help of a simple shortcode.
Afterinstalling and activating the plugin, there are some settings which you willprobably want to change. These settings can be found in Settings → Table of Contents.
- The Enable Support option allows you to choose the post type on which you want to enable
- You can choose whether you want to add
tableof contents automatically or manually.
- The Show When option allows you to choose the number of headings a post should have to show
CreateAnchor Links With Block Settings
The Gutenberg blocks have built-in settings for adding anchor IDs to headers.
Highlight the header block in Gutenberg and click on Advanced present in the settings on the right-hand side. Here you will see an option to add an anchor to the header.
If you want to link text to it, just create a hyperlink to the anchor text. In the hyperlink, add anchor name with a # before it.
So, these were some steps to Create Anchor Links In Gutenberg Editor. If you found this post helpful and informative then please share it with your friends and colleagues. If you are having any doubts/suggestions regarding the post then please comment in the comment box below.