This guide concerns Site Creator and the possibility of creating links to anchors.

Preamble

• An anchor in web design is a hyperlink that points to a specific position on a web page, whether it is on the same page or a different page.
  • When a user clicks on an anchor link, they are redirected to the specified location (in principle, 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 specific information.

Anchor example

An anchor is located (invisibly) at the end of the FAQ. It is named "end", therefore the following link simply contains the target #end and without any other indication, a web browser will look for this term in the page code where you are and direct the user to it: click here to reach it!

Create this type of link on Site Creator

Usually, to create an anchor in HTML, here is how to proceed:

1. Identify the location on your page where you want to create an anchor (text section, image, or any other element).
2. Use the <a> tag with the href attribute to specify the anchor target:
   1. 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>
   2. if the target is on another page, specify the complete 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>
3. In the section of your page where you want users to be redirected, add an element with the corresponding ID:
   <div id="chapter1"> &nbsp; </div>
    

When users click on the "Go to chapter 1" link, 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 ID (or hashtag) that you will need to indicate (or modify in advance - see point 3 below) in order to point a link to it.

Find the destination block reference

Access Site Creator:

1. Click here to access the management of your product on the Infomaniak Manager (need help?).
2. Click directly on the name assigned to the Site Creator concerned.
3. Click the Edit my site button to start the editor:
   

Once in Site Creator:

1. Hover over the content block to be modified and click on the gear:
   
2. Scroll through the settings to the end to get the ID of the block in question:
   
3. 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 the block located further down on the same page:

1. Select a text.
2. Then click on the icon of the chain:
   
3. In the advanced options, choose the type "Section" to create a link to a part of the same page by selecting the block reference obtained above:
   
   
   Other possibilities:
   1. Place the link with the hash sign (link to the same page):
      
   2. Place the page name followed by the ID (useful if you place the link to another page of the site):
      

END OF PAGE (and anchor placed on this element) - click here to go back to the anchor located at the beginning of the page...