Create Anchor Links in Hostinger Website Builder
TL;DR:
- Anchor links let visitors jump to specific sections on your page
- Create them by adding an anchor to your target element, then linking to it with #anchorname
- Test your links in preview mode before publishing
- Keep anchor names unique and descriptive
Anchor links are one of those simple features that can transform how people navigate your website. Instead of forcing visitors to scroll through long pages hunting for specific information, you can give them direct shortcuts to exactly what they need.
In Hostinger Website Builder, setting up anchor links is refreshingly straightforward. Here's how to add them to your site and make your pages more user-friendly.
Setting Up Your First Anchor Link
The process works in two parts: first you create the anchor (your destination), then you create the link that points to it.
Creating the Anchor
Start by selecting the text or element where you want people to land when they click your link. This could be a heading, an image, or any other element on your page.
Click the "Link" icon in your toolbar. You'll see a dialogue box appear with several tabs. Click on the "Anchor" tab.
Type in a unique name for your anchor. Keep it simple and descriptive – something like "pricing" or "contact-info" works well. Avoid spaces and special characters.
Creating the Link
Now you need something for people to click on. Select the text or button that will serve as your clickable link.
Use the link tool again, but this time stay on the main linking tab. In the URL field, enter a hash symbol followed by your anchor name. So if your anchor was called "pricing", you'd enter #pricing.
That's it. Your anchor link is ready to go.
Getting Your Anchor Names Right
The key to avoiding headaches later is choosing good anchor names from the start. Each anchor on a page must have a unique name, so plan ahead if you're adding several.
Keep names short but descriptive. "about-us" is better than "section1" because you'll remember what it does six months from now. Stick to lowercase letters, numbers, and hyphens.
Styling Your Anchor Links
Hostinger's Website Builder gives you the same text formatting options for anchor links as regular text. You can change colours, fonts, and text styles using the standard formatting tools.
The important thing is making sure your links are clearly clickable. Use colours that stand out from your body text, and consider adding underlining or other visual cues that signal "this is a link".
Testing Your Links
Before you publish, always test your anchor links in preview mode. Click each one to make sure it takes you to the right place on the page.
Pay attention to where exactly the page scrolls to. Sometimes you'll want to adjust the position of your anchor so the destination content appears properly in the viewport.
Test on mobile devices too. What works on desktop doesn't always translate perfectly to smaller screens.
Common Anchor Link Uses
Think beyond basic page navigation. Anchor links work brilliantly for:
- Table of contents at the top of long articles
- "Back to top" links at the bottom of sections
- FAQ sections where questions link to answers
- Portfolio galleries with category shortcuts
- Multi-section landing pages
Troubleshooting Anchor Links
If your anchor links aren't working, check these common issues:
Make sure your anchor name matches exactly what you've typed in the link URL (minus the hash symbol). Even a small typo will break the connection.
Verify that each anchor name is unique on the page. Duplicate names confuse the browser about where to scroll.
Check that you've included the hash symbol in your link URL. Without it, the browser treats it as a regular web address.
FAQs
Do anchor links work on all Hostinger templates?
Most templates support anchor links without any issues. If you're having problems with a specific template, try testing with different elements to find what works best.
Can I link to anchors on other pages?
Yes, you can combine regular page URLs with anchor names. Just add the anchor (with its hash symbol) to the end of any page URL.
Will anchor links affect my SEO?
Anchor links can actually help SEO by improving user experience and page navigation. Search engines appreciate well-structured, easy-to-navigate pages.
Jargon Buster
Anchor Link – A hyperlink that scrolls to a specific section within the same webpage rather than loading a new page
Hash Symbol – The # character used before anchor names in URLs
Viewport – The visible area of a webpage on the user's screen
Wrap-up
Anchor links are a simple way to make your website more navigable and user-friendly. Once you've set up a few, you'll start seeing opportunities to use them throughout your site.
The process in Hostinger Website Builder is straightforward – create your anchor, create your link, and test everything works. Your visitors will appreciate being able to jump straight to the information they need.
Ready to dive deeper into website building? Join Pixelhaze Academy for more practical tutorials and expert guidance.