How to Link to a Specific Section on a Website Using OzSpeed hPanel

Linking directly to a specific section on a page, also known as an anchor link, allows visitors to jump straight to the content they’re interested in. This is particularly useful for long pages like FAQs, product descriptions, or service details. With OzSpeed’s Website Builder and WordPress, you can easily create and link to specific sections on your website. Here’s how to do it step by step.

---

Step 1: Access the Website Editor #

Open the page where the section you want to link to is located.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page containing the target section.

Tip: #

• Use the Preview feature to see the full page layout and identify the section you want to link to.

---

Step 2: Add an Anchor ID to the Target Section #

To link directly to a section, you need to add an Anchor ID. This ID acts as a unique identifier for the section.

How to Add an Anchor ID: #

1. Click on the section you want to link to (e.g., a Text Block, Image Block, or entire Section).
2. Open the Section Settings (gear icon) or the Options (three dots) menu.
3. Go to the Advanced tab.
4. Enter a unique Anchor ID in the field (e.g., #about-us, #features, #contact).
5. Click Save.

Tip: #

• Use simple, lowercase words separated by hyphens for the Anchor ID (e.g., #our-services).

---

Step 3: Create the Link #

Now that you have set up the Anchor ID, you can create a link that directs users to this specific section.

How to Add the Link: #

1. Highlight the text or select the button you want to use as the link.
2. Click the Link Icon (🔗) in the toolbar.
3. Enter the Anchor ID preceded by a # symbol (e.g., #about-us, #contact-section).
4. Click Apply.

Tip: #

• You can also link from a different page by adding the full URL followed by the Anchor ID (e.g., https://yourdomain.com/page#about-us).

---

Step 4: Test the Anchor Link #

Before publishing, test the link to ensure it scrolls smoothly to the correct section.

How to Test: #

1. Click Preview in the top toolbar.
2. Click on the anchor link you created.
3. Verify that the page scrolls directly to the intended section.

Tip: #

• Test the link on both desktop and mobile devices to ensure it works properly across all platforms.

---

Step 5: Publish the Changes #

Once you’ve confirmed that the anchor link works, publish the page to make the link live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Share the updated page with your audience to highlight the new navigation feature.

---

Troubleshooting Tips #

1. Anchor Link Not Working:
   • Make sure the Anchor ID matches exactly, including the # symbol.
   • Clear your website cache in hPanel and your browser cache.
2. Page Doesn’t Scroll to the Correct Section:
   • Check the padding and margin settings in the Section Settings. Adjust them if necessary.
   • Ensure there are no conflicting elements (e.g., fixed headers) that might interfere with the scrolling.
3. Link Jumps to the Wrong Section:
   • Verify that the Anchor ID is unique and not used elsewhere on the page.
   • Test the link in an incognito window to rule out browser caching issues.

---

Additional Tips: #

• Use Descriptive Anchor IDs: Choose Anchor IDs that reflect the section’s content for clarity (e.g., #features for a features section).
• Include Smooth Scrolling: Enable smooth scrolling in the Website Settings for a better user experience.
• Monitor User Behavior: Use Google Analytics to track clicks on anchor links and see which sections are most popular.