1000 FAQs, 500 tutorials and explanatory videos. Here, there are only solutions!
Manage anchors on Site Creator
This guide is about Site Creator and the ability to create links to anchors.
What is an anchor?
An anchor in web design is a hyperlink that points to a specific location on a web page, whether it's on the same page or a different one. When a user clicks on an anchor link, they are redirected to the specified location (usually an invisible marker placed in the page's source code).
Anchors are useful for allowing users to quickly navigate to specific sections of a web page or even to a different page. They enhance the user experience by providing an efficient way to find and access precise information.
For example, there is an anchor (invisibly placed) at the bottom of this FAQ. It's named "end," so the following link simply contains the target #end. Without any further indication, a web browser will search for this term in the page's code and direct the user to it: click here to reach it!
How to Create This Type of Link?
Typically, to create an anchor in HTML, here's how you proceed:
- Identify the location on your page where you want to create an anchor (text section, image, or any other element).
- Use the
<a>
tag with thehref
attribute to specify the anchor's target.- If the target is on the same page, simply use the element's ID (see point 3 below)
<a href="#section1">Go to Section 1</a>
- If the target is on another page, specify the complete URL of the page, followed by the target element's ID (see point 3 below)
<a href="page2.html#section1">Go to Section 1 of Page 2</a>
- If the target is on the same page, simply use the element's ID (see point 3 below)
- In the section of your page where you want users to be redirected, add an element with the corresponding ID
<div id="section1"> <!-- Content of Section 1 --></div>
When users click on the "Go to Section 1" link, the page will automatically scroll to the section with the ID "section1." If the target is on another page, they will be redirected to that page, and the anchor will work in the same way.
How to Do It with Site Creator?
In Site Creator, step 3 above is not "free": each block already has its ID (or hashtag) that you need to specify to link to it.
Find the Reference for the Destination Block
To access Site Creator:
- Log in to the Manager Infomaniak (manager.infomaniak.com) from a web browser like Brave or Firefox.
- Click on the icon in the top right corner of the interface (or navigate through the left sidebar menu, for example).
- Choose Hébergement (Web & Domain universe).
- Click directly on the name of the relevant object in the displayed table.
- Click on Site Creator in the left sidebar menu.
- Click on Personnaliser mon site.
Once in Site Creator:
- Hover over the content block to be edited and click on the gear icon:
- Scroll through the settings to the end to get the block's ID:
Create a Link to the Block's Reference
To add a link to text in Site Creator, with the destination being a block further down on the same page:
- Select the text.
- Then, click on the chain icon:
- Choose the "Section" type to create a link to a part of the same page by selecting the block's reference obtained above:
Other options:- Use the pound sign (#) link (link to the same page):
- Use the page name followed by the ID:
- Use the pound sign (#) link (link to the same page):