Kadence – Creating Anchor Links (Jump Links)

Anchor links (also called jump links) allow users to click a link and be taken to a specific section of a page. This is useful for pages with a lot of content or any content where you want to improve navigation. Follow this step-by-step guide to add anchor links using Kadence Blocks.

This guide will walk you through adding an anchor link to a Row block, but Section blocks, Heading blocks, and more support HTML anchors! Just click on your block and you'll find the anchor link settings under the advanced tab if it's supported.

Step 1: Add an HTML Anchor to the Target Section

• Click on the block that you want to jump to (this could be a Row Layout, Section, Heading, or any other block that supports anchor links).
• In the right-hand Block Settings panel, locate the Advanced tab and open the Advanced dropdown.

• Find the HTML Anchor field and enter a unique ID for the section.

  Example: If your section is titled "Contact Us," maybe you would enter contact-form or contact-us

Step 2: Add the Anchor Link

Linking on the same page:

• Select the text or button block where you want to add the link.
• Click the link icon in the toolbar OR find the link settings in the right-hand Block Settings panel

In the link field, enter # followed by the anchor ID you created earlier.

• Example: #contact-form
• Press Enter or click Submit (the small arrow icon)

Linking to another page:

All of the steps are the same, except you'll want to enter the specific page URL before the anchor.

For example, if you want a button on your Homepage to link to the contact form section on your Services page, it might look something like this:

https://yourwebsite.com/services/#anchor

https://yourwebsite.com/services/#your-anchor-name

Step 3: Test Your Anchor Link

• Save your page and view it live
• It should smoothly scroll to the target section on the same page