Adding Anchors Links

Anchor links (also called jump links) allow users to click a link and be taken directly to a specific section of a page. This is especially useful for long pages, making navigation easier for users. In this tutorial, you’ll learn how to add anchor links to your WordPress website using the Kadence theme and blocks.

Step 1: Add an Anchor ID to the Target Section

To create an anchor link, you first need to assign an ID to the section you want users to jump to.

1. Open your page in the WordPress editor.
2. Click on the block (heading, button, section, or container) where you want the anchor link to jump to.
3. In the right sidebar, under the Block Settings, find the Advanced section.
4. In the HTML Anchor field, enter a unique ID (e.g., about-section, pricing, or faq).
5. Go to the content where you want to add the anchor then add the anchor ID link (e.g., #about-section, #pricing, or #faq).
6. Save and preview, and test the anchor link.

Example: If you enter about-section, the section will be identified as #about-section.

Anchor links can be added to anything from text, to buttons to containers. Anchors can also jump to other pages on your site and other websites, (eg yourwebsite.com/about/#aboutsection), providing an ID link was set in your text or button on the page you’re working on.

Bonus: Smooth Scrolling Effect

By default, anchor links may jump instantly to the section. If you want a smooth scrolling effect, you can add CSS:

1. Go to Appearance > Customize > Additional CSS or add it to Kadence Page Script on the page you’re working on. The latter would be be more ideal if you’re wanting to target only that page.
2. Add the following code: html { scroll-behavior: smooth; }
3. Publish the changes.

Now, when users click the anchor link, the page will scroll smoothly instead of jumping abruptly.

Conclusion

Anchor links improve navigation and user experience, making it easier for visitors to find the content they need. With Kadence, you can effortlessly add anchor links using buttons, text links, or menus. Try adding them to your pages and enhance your website’s usability!

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.