1000 FAQs, 500 tutorials and explanatory videos. Here, there are only solutions!
Manage anchors on Site Creator
This guide concerns Site Creator and the possibility of creating links to anchors.
Introduction
- A web anchor is a hyperlink that points to a specific position on a web page, whether it is 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 indication placed in the source code) of the page.
- Anchors are useful for allowing users to quickly navigate to specific sections of a web page or even another page. They improve the user experience by providing an effective way to find and access precise information.
Anchor example
An anchor is located (invisibly) at the bottom of this FAQ. It is named "fin", therefore the following link simply contains the target #fin and without any other indication, a web browser will look for this term in the code of the page where we are and direct the user to it: click here to reach it!
Creating this type of link on Site Creator
Usually, to create an anchor in HTML, here's how to do it:
- 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 target:- if the target is on the same page, simply use the element's ID (see point 3 below)
<a href="#chapter1">Go to chapter 1</a>
- if the target is on a different page, specify the full URL of the page, followed by the ID of the target element (see point 3 below)
<a href="page2.html#chapter1">Go to chapter 1 on 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="chapter1"> </div>
When users click on the link "Go to chapter 1", the page will automatically scroll to the section with the ID "chapter1". If the target is on another page, they will be redirected to that page and the anchor will work in the same way.
With Site Creator, point 3 above is not "free": each block already has its own ID (or hashtag) that you will need to specify (or modify in advance - see point 3 below) to make a link point to it.
Find the reference of the destination block
Access Site Creator:
- Click here to access the management of your product on the Manager Infomaniak (need help?).
- Click directly on the name assigned to the product in question.
- Click on Customize my site:
Once in Site Creator:
- Hover over the content block to be modified and click on the gear icon:
- Scroll through the settings to the end to get the ID of the block in question:
- A double-click on the field indicating the ID allows you to specify your own title instead of the random ID:
Create a link to the block reference
To add a link to text in Site Creator, with the destination being a block located further down on the same page:
- Select some text.
- Then click on the chain icon:
- Choose the type "Section" to create a link to a part of the same page by selecting the block reference obtained above:
Other possibilities:- Put the link with the hash sign (link to the same page):
- Put the page name followed by the ID:
- Put the link with the hash sign (link to the same page):
END OF PAGE (and anchor placed on this element) - click here to go back to the anchor located at the beginning of the page…