Skip to main content

What are the different types of links and how should I use them?

When you add a link you can link to another SiteBuilder page, link to an external web site, link to a specific section on a particular page, or act as an email link which launches the default mail client and inserts the email address.

Linking to another SiteBuilder page

When you link to a page within your own site or to another SiteBuilder site, use a relative path. This is easily done using the Links Picker via the content editor.

  1. Browse to the page where you want to add the link.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. In the content editor, select (highlight) the text you want to act as the link and click the Links Picker icon in the toolbar. A new window opens showing a tree of all the pages and files in your site:
    Links picker screen
  4. Browse to the page or file you want to link to and select it. You'll see the relative path for the link appear in the Link URL box. Optionally, you can modify the link caption or link tooltip by entering text in the respective boxes.
  5. If you want the target page to open in a new window, select the Open this link in a new window checkbox. (Generally, we recommend not forcing web pages to open in a new browser window.)
  6. Click Insert. You should now have a working link on your page – preview your page and test the link to make sure!
Also see: further information on the Links Picker.

Linking to an external website

When linking to an external site use an absolute path. For example, to link to the Higher Education Funding Council's website, use the following path:

http://www.hefce.ac.uk
  1. Browse to the page where you want to add the link.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. Highlight the text you want to act the link. Go to Link options... > Edit link. The following dialog box appears:
    Insert hyperlink screen
  4. Enter the URL of the page you want to link to in the Link URL box. You don't have to modify any of the other fields.
  5. Click Insert. You should now have a working link on your page – preview your page and test the link to make sure!

Linking to specific sections of a web page: anchors

You can use ‘anchors’ as links to jump to specific points within a page (there are some at the top of this page).

  1. Browse to the page where you want to add the links.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. Place your cursor at the the point where you want the link to jump to.
  4. Go to Link options... > Add an anchor.
  5. Enter an appropriate anchor name in the dialog box, such as admissions, and click Insert.
    Insert anchor dialog box

    The anchor name can contain any combination of letters and numbers however it cannot begin with a number or contain special characters (such as / * _).

  6. Go to the top of your page. Type the link text you want the user to click to jump down the page.
  7. Highlight the text and go to Link options... > Edit link.
  8. Select the appropriate anchor from the Anchors drop-down menu. Notice that the Link URL box now shows your anchor link prepended with a hash e.g. #admissions.
    Insert or edit link dialog box
  9. Click Insert.
  10. Publish your page and check the anchors work as you intend. (Click the link at the top of the page and you should jump to the anchor within the page.)

Adding email links

  1. Browse to the page where you want to add the email link.
  2. Go to Edit > Edit centre content (or Edit right content).
  3. In the content editor, place the cursor at the location where you want to add the link.
  4. Go to Link options… > Email link.
  5. Type the email address in the dialog box and click Insert.
    Insert email dialog box
  6. The email address now appears in your page content like this:
    [email]annacademic@example.com[/email]
    This method of adding an email link ensures the email address is obfuscated when the page is rendered, so the email address will not be detected by spam bots. Users will see the email link as intended.

    Note: It's good practice to give the actual email address as the link (e.g. annacademic at example dot com not Ann Academic, so users can copy and paste the email address if necessary.

 

Note: Blind and visually impaired users with speech reading technology often scan through a page listening to just the links, so don't include link text that makes no sense when read out of context. For example, don't use:

'For the W3C WAI guidelines click here'

Instead write:

'W3C WAI guidelines'

Support

SiteBuilder support forum
Email webteam at warwick dot ac dot uk
How to report a problem