Compatibility:

WebSite X5 Evo and Pro

When a Page contains a lot of content, it can be useful to let visitors immediately reach a specific point without having to scroll through everything that comes before it. This is the case, for example, with a table of contents that leads to the different topics on a Page or a list of questions that links directly to the corresponding answers.


In WebSite X5, you can achieve this result through Anchors, creating links that lead directly to specific content on the same Page or on another Page of the Website.


What is an Anchor

An Anchor is a reference associated with an Object that makes it possible to identify its position within the Page.


Once the Anchor has been created, you can use it as the destination of a link. When the visitor clicks the link, the Page scrolls to the content associated with the Anchor.


You can add as many Anchors as you need. To manage them more easily:

  • create an Anchor only for contents that need to be reached directly;
  • use unique and meaningful names;
  • avoid spaces and special characters in the names.


How to create an Anchor

To assign an Anchor to content:

  • Go to Step 4 - Pages and open the Page you want to work on.
  • In the Layout Grid, select the Object that should become the destination of the link.
  • Click the Anchor button.
  • In the window that opens, assign a name to the Anchor.
  • Confirm.


Repeat the procedure for all the Objects you want to be able to reach directly through a link.


How to create a link to an Anchor

After creating the Anchor, you can set the link that should take visitors to that point on the Page.


The procedure can start, for example, from a word or phrase inserted in a Text Object:

  • Open the Text Object in the editor.
  • Select the text where you want to insert the link.
  • Click the Link button.
  • In the Link window, choose the Website Page action.
  • Select the Page that contains the Anchor. It can be the current Page or another Page of the Website.
  • In the Anchor within the Page field, select the Anchor you want to reach.
  • Confirm.


When the visitor clicks the link, they will be taken directly to the content identified by the Anchor.


Example: how to create a page table of contents

Anchors are particularly useful on long Pages, where you can add a table of contents at the beginning that lets visitors go directly to the different topics.


Imagine, for example, a Page dedicated to a service and organized into Introduction, Features, Prices, and Contacts.


To create a table of contents:

  • Add a Text Object at the beginning of the Page with the list of topics.
  • Arrange the contents relating to each topic further down the Page.
  • Assign an Anchor to the Object that marks the beginning of each topic, using different and recognizable names, for example 'introduction', 'features', 'prices', and 'contacts'.
  • Open the Text Object containing the table of contents.
  • Select the first item and create a link to the corresponding Anchor.
  • Repeat the procedure for all the other items.


This way, visitors can use the table of contents to immediately reach the content they are interested in.


How to add a "Back to top" link

You can make navigation even easier by adding a link at the end of the different topics that takes visitors back to the table of contents:

  • Assign an Anchor to the Text Object containing the initial table of contents as well.
  • At the end of a topic, add an item such as 'Back to top'.
  • Select the item and create a link to the table of contents Anchor.
  • Repeat the procedure in the other points where you want to offer the option to quickly return to the top.


Instead of text, you can also use a button or an image: the procedure for setting the link to the Anchor does not change.


How Anchors work with Sections

If you have organized the Page into multiple Sections, WebSite X5 also takes into account the position of the Object to which you assigned the Anchor.


When, in the current View, the Object is located in the first Row of a Section, the link takes visitors to the beginning of the Section itself, including any top margin.


If, on the other hand, the Object is located in a later Row, the link takes visitors directly to the Object's position.


This lets you use Anchors both to reach specific content and to correctly link to the beginning of an entire Section.


#tip - For more information, see Page Sections. How do you create layouts with different structures?


How to use Anchors on Full Height Pages

On Full Height Pages, Sections are used as slides that are at least as tall as the Browser window.


#tip - For more information, see Full Height. How do you create slide-style page scrolling?

 

If you want to create a direct link to one of these slides:

  • assign the Anchor to an Object inserted in the first Row of the Section;
  • create the link to this Anchor as usual.


This way, WebSite X5 makes the link destination coincide with the beginning of the Section and correctly preserves the Full Height navigation effect.


#tip - Responsive Website. If the Object to which you assigned an Anchor is hidden in a responsive View, the link remains active and takes visitors to the beginning of the Section the Object belongs to.


How to create an Anchor within a text using code

Normally, an Anchor is associated with the beginning of an Object. However, if you want to reach a specific point within a long Text Object, for example a specific paragraph, you can:

  • split the content into two Text Objects and assign the Anchor to the second one;
  • manually insert an identifier into the HTML code of the text.


The first solution is generally the easiest. If, instead, you want to work on the code:

  • Open the Text Object in the editor.
  • Activate HTML code recognition by clicking the  button.
  • Place the cursor at the point you want to make reachable.
  • Enter, for example: 
<span id="anchor_name"></span>

Replace "anchor_name" with the name you want to use for the Anchor. The identifier must be unique within the Page and must not contain spaces.


Anchors inserted manually in the code are not included in the list available in the Anchor within the Page field of the Link window.


To create a link to one of these Anchors:

  • Open the Link window.
  • Select the File or URL action.
  • In the Internet File field, enter:
#anchor_name

Replace "anchor_name" with the identifier you defined in the code.


Practical tips

To use Anchors effectively:

  • choose short and recognizable names;
  • avoid creating Anchors that are not actually used;
  • on long Pages, consider adding a table of contents so visitors can quickly reach the main contents;
  • if you want to link to the beginning of a Section, assign the Anchor to an Object in its first Row;
  • on Full Height Pages, use an Object in the first Row of the Section you want to link to;
  • always check the links in Preview, including in the different responsive Views.