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:
<span id="my-heading"></span>
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-headingin 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
Here's a quick video with the steps.
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. Note that with visibility settings, the browser sees all Shogun elements added to the page, even those with separate visibilities. Therefore, if you are using this feature, you must use differentiated anchor IDs.
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.