An anchor link is a URL that directs visitors to a specific location on a webpage. Here's how to create and implement anchor links on your website:

Step 1: Add a Code Block and Landing Point

1. Add a code block at your desired landing location
2. Insert this code:

<div id="unique-id">The link leads to this place</div>

3. Replace "unique-id" with your chosen identifier (use hyphens instead of spaces)
4. Replace the text with your desired landing text

Step 2: Create the Anchor Link

1. Add your link text or button
2. Set the URL in this format:

https://yourwebsite.com/page-slug/#unique-id

3. Ensure the unique-id matches exactly with step 1

Step 3: Save and Publish

Click Save to activate your anchor link.

Best Practices:

• Use unique IDs only once per page
• Maintain case sensitivity between link and landing point
• Create memorable, logical IDs
• Include full URLs for most reliable functionality
• Test links while logged out or in incognito mode

Special Applications:

Link to Top of Page:

<div id="top"></div> (in header code)
<a href="#top">Back to Top</a> (in content)

Link to Bottom:

<div id="bottom"></div> (in footer code)
<a href="#bottom">To Footer</a> (in content)

Troubleshooting:

1. Verify URL format and spelling
2. Check ID case sensitivity
3. Ensure straight quotation marks in code
4. Test in incognito mode
5. Consider mobile browser compatibility
6. Verify no duplicate IDs exist
7. Check template-specific requirements (Version 7.0, Ajax settings)

Section links work best with standard block sections. For galleries or auto-layouts, add a blank section above with the anchor link.

Related Articles

Previous Articles