Compatibility:

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 setting 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

Let's have a look at a practical example to better understand how anchors work.


If we for instance want to create a FAQ page, we can create a brief summary where we report the list of the questions. The users can the rely on the anchors we set to reach  the contents reported on the Page itself, so to find the answer. 

You can set Anchors on the Objects or on the Rows: the final result is the same. Let's analyze both alternatives:


1st alternative - Setting Anchors on the Objects

  • 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 referred to the first FAQ (row 2) and click on the  button to give it an Anchor.
  • Give the Anchor a name in the window that opens, for instance "FAQ1". You can't use spaces nor special characters for the names. 
  • Repeat these steps to set the Anchors to all the Text Objects referred to the answers.

2nd alternative - Setting Anchors on the Rows

  • After you added the Objects in the layout grid, click on so to open the Row Formats.
  • Select the Row where you added the text Object referred to the first FAQ (Row 2)  and click on the  button to give it an Anchor.
  • Give the Anchor a name in the window that opens, for instance "FAQ 1".
  • Repeat these steps to set the Anchors to all the Text Objects referred to the answers (Rows 3 and 4) and make sure to give them different and relevant names. 


#tip - You can add Anchors on both Objects and Rows within the same page: still, don't forget to give them different names.


Adding a link

Now you added an anchor, you can move on and set the link:

  • 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.


The "Back to the beginning" link

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.


Anchors on Full Height pages

While in our example placing an anchor on an Object or on a Row basically give the same result, there is one specific case you should pay attention to, namely when you create a Page using the Full Height function to get scrolling slides. 


By using the Full Height you can make all the rows taking on the same height of the viewport, i. e the  browser window visited by the user, regardless the height of the contents. In this way, when you scroll down a page you will display one single row after the other, thus creating some stand-alone blocks. 

So, if you use this function the row height isn't fixed anymore, but it varies according to the viewport: if the available space is reduced, the contents placed on the row will determine the minimum height. On the other hand, if there is much available space, the contents will be aligned in the center. 


In order to maintain the scrolling slides effect, if you need to place Anchors on Full  Height pages, you will need to place them on the Rows. In fact, only in this way the linked contents will be displayed as centered on the browser viewport. 


#tip - For more information see : How to use the Full Height option to create scrolling slides on your pages


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:
#anchor_name

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