How to Use Anchors on Your Page
Using anchors is an effective solution for guiding users to a specific section of your page.
Step 1: Create Your Anchor
You can create an anchor using an HTML element. Here’s how:
Add this code where you want the anchor to be placed:
<div id="my-heading"></div>
Make sure to replace “my-heading” with a unique ID for each anchor.
Step 2: Link to Your Anchor
Now that you have your anchors set up, you can link to them in different ways:
Direct URL: Use the following format to link directly to your anchor:
https://www.example.com/pages/example#my-heading
Button Element:
For same-page anchors, just add
#my-heading
in the URL field of your button.For anchors on different pages, use the full URL.
Text Element Hyperlink: You can also create a hyperlink in a text element
Why Aren't My Anchors Working?
If your anchors aren't functioning as expected, here are a few things to check:
Unique IDs: Ensure each anchor ID is unique.
Editing Limitations: Anchors won’t work in the editor or page previews, only on the live site.
Active Tabs: Anchors won’t link to content inside inactive tabs.
Page Load Issues: If your page has many images, it may drop users to a higher point because images load as they come into view.
Theme Conflicts: In rare cases, conflicts with your theme may cause issues. If you suspect this, please reach out to our support team at support@getshogun.com.