How to Create Anchor Links in the Gutenberg Editor in WordPress
If you’re wondering what the heck is Gutenberg? It’s the new text editor available in WordPress version 5.0. If nothing has changed in your WordPress admin the chances are you’re running an out of date version of the platform.
I would strongly recommend upgrading for both security and performance enhancements if you need assistance take a look at my WordPress web design service.
Below I have created two anchor text links
Clicking on the links below will anchor to the relevant section this is known as an anchor link.
Anchor Links are something that everyone’s familiar with, they also deliver a great user experience. Anchor Links are often found on web pages which display a lot of content. To a non-technical person, anchor links would be described as a link which jumps to the relevant content on a web page when clicked.
Usually, anchor links are found on FAQ pages or a page that displays a table of content. However, anchor links don’t need to be used for the less appealing content. Organising your content so that it’s easily accessible for users is very important. Users don’t have the time or patience to read a 1000 word article the key is to guide them into finding the relevant information.
Anchor links can be displayed in several ways: verticle, horizontal, as text links or as visual navigation, to achieve this some knowledge of web design will be needed.
Creating anchor links in Gutenberg
Give your title block a unique ID
Linking your your anchor through a link
Preview the page or post
Additional ideas to make anchor links work better
By default, anchor links will jump suddenly to the ID further down the page. To some users, this can leave them with ‘Oh what happened then’ feeling. You can change the transition so that it’s a smooth scroll to the anchor. This can be achieved by using the scroll-behavior CSS property.