Adding links to your website is a great way to connect your pages, guide users to relevant content, and enhance navigation. You can add links to text, images, buttons, and menus using OzSpeed’s Website Builder or your CMS like WordPress. This guide will show you how to add and manage links step by step.
Step 1: Decide the Type of Link You Want to Add #
Before adding a link, determine its purpose and type. The most common types of links are:
- Internal Links: Connect different pages within your own website (e.g., linking to a “Contact Us” page).
- External Links: Direct users to an external website or resource (e.g., linking to a partner website).
- Anchor Links: Jump to a specific section on the same page (e.g., linking to a “FAQ” section).
- Email Links: Open the user’s email client to send an email (e.g., linking to mailto@yourdomain.com).
- Phone Links: Allow users to call a number directly (e.g., linking to tel:+1234567890).
Tip: #
- Use descriptive link text that clearly indicates where the link will take the user.
Step 2: Add a Link to Text #
Using Website Builder: #
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on the Text Block where you want to add the link.
- Highlight the text you want to link.
- Click the Link Icon (🔗) in the toolbar.
- Enter the URL (e.g., https://yourdomain.com/contact) or select an internal page from the list.
- Click Apply.
Using WordPress: #
- Edit the page or post where you want to add the link.
- Highlight the text you want to link.
- Click the Link Icon (🔗) in the toolbar.
- Paste the URL or search for an internal page.
- Click Enter or Apply.
Tip: #
- Check the box for Open in New Tab if you’re linking to an external website.
Step 3: Add a Link to an Image #
Linking an image can make it clickable, directing users to another page or website.
Using Website Builder: #
- Click on the Image element you want to link.
- Click Edit Image > Add Link.
- Enter the URL or select an internal page.
- Click Save.
Using WordPress: #
- Click on the image in the editor.
- Click the Link Icon (🔗).
- Enter the URL or select a page.
- Click Apply.
Tip: #
- Use images with a clear call-to-action (e.g., “Learn More” or “Shop Now”) for better user engagement.
Step 4: Add a Link to a Button #
Buttons are great for directing users to important pages like signup forms or product pages.
Using Website Builder: #
- Drag and drop a Button element onto your page.
- Click Edit Button.
- Enter the text for the button (e.g., “Get Started” or “Contact Us”).
- Enter the URL or select an internal page from the list.
- Click Save.
Using WordPress: #
- Add a Button Block in the editor.
- Enter the button text.
- Click the Link Icon (🔗) and enter the URL.
- Click Apply.
Tip: #
- Use action-oriented text on buttons (e.g., “Buy Now,” “Subscribe”) to encourage clicks.
Step 5: Add a Link to Your Navigation Menu #
Adding links to your navigation menu helps users quickly access key pages.
Using Website Builder: #
- Go to Navigation Menu in the top toolbar.
- Click Add Item and choose Custom Link.
- Enter the link text and URL.
- Click Save to update the menu.
Using WordPress: #
- Go to Appearance > Menus.
- Click Custom Links and enter the URL and link text.
- Click Add to Menu.
- Drag the item to the desired position and click Save Menu.
Tip: #
- Place important links (e.g., Home, Contact, Services) at the top of the menu for better visibility.
Step 6: Add an Anchor Link #
Anchor links allow users to jump directly to a specific section of the same page.
Using Website Builder: #
- Click on the element you want to link to (e.g., a heading or section).
- Go to Settings > Anchor ID and enter a unique ID (e.g., faq-section).
- Highlight the text you want to link and click the Link Icon.
- Enter the anchor link using # followed by the Anchor ID (e.g., #faq-section).
- Click Apply.
Using WordPress: #
- Add a Heading Block and enter a unique ID in the HTML Anchor field (e.g., services-section).
- Highlight the text you want to link and click the Link Icon.
- Enter the anchor link using # followed by the Anchor ID (e.g., #services-section).
- Click Apply.
Tip: #
- Use anchor links for long pages with multiple sections, like FAQs or product details.
Step 7: Test the Links #
After adding links, test them to ensure they work correctly and lead users to the right destination.
Testing Checklist: #
- Check All Links: Click on every link to verify it navigates to the correct page.
- Test on Different Devices: Ensure the links work properly on both desktop and mobile devices.
- Open External Links in New Tabs: Confirm that external links open in a new browser tab.
Tip: #
- Use a link checker tool to find and fix any broken links on your website.
Troubleshooting Tips #
- Link Not Working:
- Double-check the URL for typos or missing characters.
- Clear your website cache in hPanel and your browser cache.
- Anchor Link Not Scrolling Correctly:
- Ensure the Anchor ID matches the link exactly (case-sensitive).
- Use a smooth scrolling script or enable the smooth scroll feature in your website settings.
- Link Opens in the Same Tab Instead of a New Tab:
- Edit the link settings and check the box for Open in New Tab.
Additional Tips: #
- Use Descriptive Text: Avoid using generic text like “Click Here.” Instead, use descriptive text like “Learn More About Our Services.”
- Monitor Link Performance: Use Google Analytics to track clicks on your links and identify popular destinations.
- Regularly Check for Broken Links: Periodically review your site for broken links, especially after updating content or removing pages.