Please read our student and staff community guidance on COVID-19
Skip to main content Skip to navigation

Insert links, anchors and email addresses

Accessible link text

People who use screen readers may scan pages and listen to the links. Therefore, ensure that the ‘purpose of each link can be determined from the link text alone’ (Web Content Accessibility Guidelines 2.1).

For example, instead of:

To learn more about how to apply, click here.

write:

Learn more about how to apply.

Link to a SiteBuilder page

When you link to a page on your site or another SiteBuilder site, use a relative path. The Link picker in the visual editor inserts relative paths by default.

  1. Go to the page where you want to add the link.
  2. Go to Edit > Edit centre content or Edit right content.
  3. In the visual editor, highlight the words you want to act as the link.
  4. Select the Link button in the toolbar. Alternatively, right-click the highlighted words and choose Link. The Link picker window shows a tree of all the pages and files on your site.
  5. Browse to the page or file you want to link to and select it – the relative path appears in the URL box. Alternatively, you can copy any link and paste it in the URL box.

    Link picker window

  6. If you want the target page to open in a new browser tab or window, select Open this link in a new window. Generally, we recommend not forcing web pages to open in a new browser window.
  7. Select the Select button. Preview your page and test the link to make sure it works.

Link to an external website

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

https://www.hesa.ac.uk/
  1. Go to the page where you want to add the link.
  2. Go to Edit > Edit centre content or Edit right content.
  3. Highlight the words you want to act as the link.
  4. Select the Link button in the toolbar. Alternatively, right-click the highlighted words and choose Link.
  5. Enter the URL of the target page in the URL box.
  6. Select the Select button. Preview your page and test the link to make sure it works.

Link to a file

To insert a link to a file – for example, a PDF or Microsoft Office document:

  1. Go to the page where you want to insert a link.
  2. Go to Edit > Edit centre content or Edit right content.
  3. Position your cursor in the visual editor where you want to insert the link.
  4. Select the Link button in the toolbar. Alternatively, right-click the highlighted words and choose Link.
  5. If you have already uploaded the file to SiteBuilder, browse to the file on the This web site tab and select it. In the Caption box, enter the text you want to display as the link:

    Select a file in the Link picker window

    Alternatively, to upload the file now, select the Your computer tab, attach the file and enter a Caption for the link:

    Upload a file in the Link picker window

  6. Select the Select button.
  7. The link appears in the visual editor with the Caption you specified. You can edit the link caption text in the visual editor.

    Note: it's good practice to let visitors know that selecting a link results in something other than opening a web page. To do this, we recommend adding a document icon within the link caption text.

Link to a section of the current page with an anchor

Anchors act as links to sections within a web page. They're useful for enabling visitors to jump to a section rather than scroll down a long page. We use anchors for the ‘In this article’ links at the top of each SiteBuilder help article.

To add an anchor:

  1. Go 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 in the page where you want the link to point to.
  4. Go to Insert a > Anchor.
  5. Enter an appropriate anchor name in the Id box. The anchor name can contain any combination of letters and numbers, however, it cannot start with a number, or contain special characters such as / * _ or spaces.
  6. Select Ok.
  7. Go to the top of your page. Enter the link caption text you want the user to select to jump to the anchor.
  8. Highlight the text, then select the Link button in the toolbar.
  9. In the URL box, enter the anchor name you specified in step 5 prepended with #. For example, if your anchor name is properties, enter #properties in the URL box.
  10. Select the Select button.
  11. Publish your page and check that the anchor works as you intend. Select the link at the top of the page and check that you jump to the anchor further down the page.

Link to an email address

  1. Go 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 visual editor, place the cursor at the location where you want to add the link.
  4. Go to Insert a > Secure email link.
  5. Enter the email address in the Secure email link window, then select Insert.
  6. The email address appears in the visual editor like this:

    [email]anne.jones@example.com[/email]

    This method obfuscates the email in the published page to prevent spam bots harvesting the email. Visitors still see the email address as intended.

    Note: it's good practice to use the email address as the link text – for example, anne dot jones at example dot com not Anne Jones – so that visitors can copy and paste the email address.

Support

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