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

Introduction

• An anchor in web design is a hyperlink that points to a specific position on a web page, whether it's 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 efficient way to find and access precise 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 search for this term in the code of the page where you 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 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 ID of the element (see point 3 below)
      <a href="#chapter1">Go to chapter 1</a>
   2. if the target is on another 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>
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) which you will need to specify (or modify beforehand - see point 3 below) in order to link to it.

Find the reference of the destination block

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 in question.
3. Click on the Edit my site button to start the editor:
   

Once in Site Creator:

1. Hover over the content block you want to modify and click on the gear icon:
   
2. Scroll through the settings to the bottom to find the ID of the block:
   
3. Double-click on the field displaying the ID 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:

1. Select the text.
2. Then, click on the link icon:
   
3. In the advanced options, choose the "Section" type to create a link to a part of the same page by selecting the block reference obtained above:
   
   
   Other possibilities:
   1. Use the link with the hash symbol (link to the same page):
      
   2. Use the page name followed by the ID (useful if you are placing the link to another page on 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…