How to Create Anchor Links in GenerateBlocks (& Add to Your Navigation)

Creating anchor links, also known as jump links, is a simple yet powerful way to enhance navigation on your website, allowing users to jump directly to specific sections of a page. Using GenerateBlocks in GeneratePress, you can easily set this up. Here’s a step-by-step guide on how to do it:

Step 1: Set Up the Anchor Link (HTML Anchor)

1. Identify the Section to Jump To: Go to the section of the page you want to jump to when a user clicks a link. For example, if you want users to jump to a contact form at the bottom of your page, scroll down to that section.
2. Select the Container: Click on the outermost container that holds the content of the section you want users to jump to. This ensures that the entire section is targeted.
3. Add an HTML Anchor:
   • On the right-hand sidebar, scroll down to the Advanced section.
   • In the HTML Anchor field, enter a simple identifier, like contact. This will be the ID used in the link that will jump to this section.

Step 2: Link to the Anchor

1. Edit the Link: Scroll back up to the link or button you want users to click to jump to that section.
2. Set the Link: Click on the link or button, and in the URL field, type #contact (replace “contact” with the ID you set earlier). This # symbol tells the browser that it’s an anchor link.
3. Update the Page: Save and update your page to apply the changes.

Step 3: Test the Anchor Link

1. Refresh the Page: Go to your homepage and refresh it to ensure the changes have taken effect.
2. Test the Link: Click the “Contact Us” button (or whichever link you set) and watch it jump directly to the contact form or the targeted section. If the section is further down the page, it should scroll smoothly into view.

Step 4: Use Anchor Links in Your Navigation Menu

1. Copy the Anchor Link URL: When you click the link on your page, you’ll notice that the URL in your browser updates to include the anchor link, such as yourdomain.com/#contact.
2. Add the Link to Your Menu:
   • Go to Appearance > Menus in your WordPress dashboard.
   • In the Custom Links section, paste the anchor link URL (#contact) into the URL field and give it a label like “Contact Us”.
   • Add it to your menu and place it in the desired order.
3. Save and Test: Save your menu and test the navigation. When you click the “Contact Us” menu item, it should jump directly to the contact form or relevant section on the same page.

Additional Tip: Applying Anchors to Other Elements

• Headlines: If you prefer, you can apply the HTML anchor directly to specific elements like headlines rather than entire sections. The process is the same—just add the anchor in the advanced settings of the headline block.

Using anchor links is a great way to improve user experience by making your site more navigable, especially for one-page designs or long content pages. Whether you’re linking within the same page or adding jump links to your navigation menu, GenerateBlocks makes it easy to set up.

I hope this guide helps you make the most of anchor links on your website!