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 (typically an invisible marker placed in the source code) on 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 browser such as Brave, Chrome, Edge, Firefox, Opera, Safari… will search for this term in the code of the current page and direct the user to it: click here to reach it!

Create this type of link on Site Creator

Usually, to create an HTML anchor, 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

Start by logging in to the Infomaniak Manager with your credentials (user account with the necessary permissions for the relevant product):

1. Click here to access the hosting & website management interface (filtered to display only Site Creator).
   • If nothing is displayed, you may not be in the Organization to which your website is linked (❓: help).
2. Click on the name of the Site Creator in question:
   
3. Click on the button to edit your site:
   

Once in Site Creator:

1. Hover over the content block you want to modify and click on the gear icon:
   
2. Scroll to the bottom of the settings to find the ID of the block in question:
   
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 the block located further down on the same page:

1. Select some 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. Add the link with the hash symbol (link to the same page):
      
   2. Add the page name followed by the ID (useful if you place 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…