WebSite X5 Evo and Pro

Sometimes you may need to set links that lead to a specific content on the current Page or onto a different one, bringing it to the foreground. This is possible thanks to the Anchors. 

What is an Anchor

An anchor is a reference to identify the position of an Object in a page: as previously mentioned, they are used to set up links directly to the object from any other point of the Website.

In WebSite X5, there are no limits to the number of Anchors you can add to a page: theoretically, there is one Anchor per Object. To simplify your work, we suggest to:

  • place an Anchor on an Object only when this is strictly necessary
  • give Anchors recognizable names by which you can identify them easily.

How to create a page summary using the Anchors

For example, you can use Anchors to create a brief summary the users can rely on to reach the contents reported on the Page itselft:

  • In Step 4 - Pages create the pages, inserting all the Objects you need to complete the page contents: insert a Text Object at the beginning for your summary (row 1), and then other Text Objects for each content to create a link to (rows 2, 3 and 4).
  • In the page layout table, select the Text Object for the first content (row 2) and click on the  button to give it an Anchor: give the Anchor a name in the window that opens.
  • Do the same for each Text Object  you have inserted (rows 3 and 4), making sure the anchor names are clear.
  • Double-click on the Text Object of the opening summary (row 1), to open it in the editor.  
  • Select the first item in the summary and click on the  button to open the Link window.
  • Select the WebSite Page option and use the  button to display the website Map and select the page to work on. 
  • Click on the Internal Page Anchor field to display all the anchors available and select the one that identifies the contents in the summary item (the one available on row 2).
  • Repeat this operation for all the other summary items you want to create a link for.

You can improve the navigation for  the visitors by adding a link at the bottom of each paragraph that takes them back to the top of the page:

  • With the  button, add an anchor to the Text Object that corresponds to the initial summary (on row 1).
  • Open the Text Object editor for the first content (row 2) and add a caption such as "Back to top" at the bottom of it.
  • Select the "Back to top" item and click on the  button to create a link with the Page, making sure that you indicate the anchor associated with the summary.
  • Repeat the operation to add the "Back to top" item at the bottom of each paragraph.

Instead of the "Back to top" item, you could use a graphic element:  you can create it by adding an image in the Text Object or by using an Image Object (in this case, you can use the mouseover effect): in any case, the procedure for creating the link is the same.

How to create and manage Anchors via code

If you need to place an anchor inside a text, and not at the beginning, for example next to a paragraph of a Text Object, you can do this in two ways:

  1. Split the original Text Object into two separate text objects, and you will place the Anchor on the second one.
  2. Manually create an Anchor in the Text Object.

To create an Anchor via code you must proceed in this way:

  • Open the Text Object in the editor and click on the  button to activate HTML code recognition.
  • Move the cursor to where you want to place the Anchor and type 
<A NAME="anchor_name">&nbsp; </A>

Obviously, "anchor_name" in this example should be replaced by the name that you really want to give to the Anchor. In the example, "&nbsp;" means that a blank space will be added so to create a content for the tag.

When you create a link to an Anchor, you must remember that manually-created anchors are not included in the list shown by the Internal Page Anchor option in the Link window. So you must proceed as follows:

  • In the Link window, select File or URL.
  • In the Internet file field, type:

Clearly, you need to write the real Anchor name instead of "anchor_name".