A hyperlink is a clickable word, phrase, or image on a webpage that takes you to another place when clicked. Think of links as signposts - they help readers easily navigate our site and guide them to external websites, additional information, files, and even to compose emails.
Using hyperlinks is a great way to keep your page concise and engaging. It allows you to provide additional information without overwhelming your readers, giving them the option to explore more if they’re interested.
Whether you're using the classic (or 'old') Contensis, or the newer version, this page will guide you through:
Do's and don'ts when adding links
- Make sure you add a clear purpose to your links to help visitors understand where they’ll go when they click. This makes our website easier to navigate and more user-friendly. It also improves accessibility for screen readers, as descriptive links provide better context for users with visual impairments. You don't have to link just one or two words, you can link whole phrases too, here's an example:
Do: “Watch this video about why links should explain their purpose.” (This tells users they will watch a video and what it's about.)
Don’t: “Click here to watch the video.” (This is vague and doesn’t inform users about the link’s destination.)
- Keep things consitent. To make our website easier for everyone to use, especially people with disabilities, make sure that buttons or icons that do the same thing look and are labeled in the same way on every page. If you're creating a page that has lots of documents to download, if every download button is labeled “Download [Document Name]” and uses the same colour CTA button, users will quickly learn that this button always means they can download something. This consistency helps everyone, especially those using screen readers, to navigate the site more easily and predictably.
Adding a link to text or an image
There are four types of links we use:
- Internal links which connect to another page on our website.
- External links direct users to external websites.
- Email links these open the users email client to compose a new message.
- Anchors these allow readers to jump to a specific place on a page.
Internal links (including links to anchors on different pages)
In classic Contensis, the quickest way to add an internal link, is to...
- Highlight the text you want to link.
- Find the page you want to link to in the folder structure on the left.
- Click on the icon next to the page name and drag it over to the highlighted text in the editor window.
If you want to link to an anchor on an internal page, after following the steps above...
- Click the chain icon in the toolbar to edit the link.
- In the ‘Standard Link Options’ section, select the anchor you want from the dropdown menu, then hit save.
For 'new' Contensis...
- Highlight the text you want to link.
- In the tool bar, select the insert / edit link button.
- If the page you're linking to is a 'new' Contensis page, click on the folder structure icon at the side of the link box and select the page from the list. If the page is in 'old' Contensis, you'll need to paste the full url of the link into the link box.
- If you have pasted the url, don't forget to give the link a title - this can be the same as the title of the page that you're linking to.
- Select 'current window' as the target.
- Click 'Update'.
External links (including linking to the staff or student intranet)
For classic Contensis...
- Using your curser, highlight the word or phrase you want to turn into a link or click on the image you want to use.
- With your text or image highlighted, click on the 'Insert / Edit Hyperlink' icon in the editor toolbar - it's next to the insert image icon and looks like a little chain link. Or, you can right-click and choose ‘Insert Hyperlink’ from the drop down menu.
- Select 'URL' from the drop down in the pop up window.
- Type or paste the URL you want to link to in the ‘URL Address’ box.
- Select ‘Yes’ for the popup window option.
- Click 'Save' to add the link.
To add an external link in 'new' Contensis...
- Highlight the text you want to link.
- In the tool bar, select the insert / edit link button.
- Paste the full url into the link box.
- Give the link a title - this can be the same as the title of the page that you're linking to.
- Select 'new window' as the target.
- Click 'Update'.
Email links
In classic Contensis...
- Highlight the email address you want to link.
- Click on the 'Insert / Edit Hyperlink' icon in the editor toolbar, or right-click and choose ‘Insert Hyperlink’ from the dropdown menu.
- Select 'Email link' from the drop down in the pop up window.
- Type or paste the email address into the email address box.
- Click 'Save'.
In 'new' Contensis...
- Highlight the email address you want to link.
- Click on the 'Insert / Edit Hyperlink' icon in the editor toolbar.
- Type 'mailto:' and then the email address into the link box e.g. mailto:someone@brunel.ac.uk
- Type or paste the email address into the email address box.
- Click 'Update'.
Linking to anchors on the same page
Note: This is for classic Contensis only.
- Highlight the word or phrase you want to link.
- With the text highlighted, click on the 'Insert / Edit Hyperlink' icon in the editor toolbar, or right-click and choose ‘Insert Hyperlink’ from the dropdown menu.
- Select 'Anchor on this page' from the drop down in the pop up window - just make sure you’ve created the anchor point on the page first for this option to show up.
- Select the anchor you want from the 'Anchor' drop down menu.
- Hit 'Save'.
Creating a page anchor
Anchors let readers jump to a specific spot on a page - these can be on the same page, or on a different page. By creating anchors, you can help your readers find content quickly and easily. Note: This is for classic Contensis only.
- Decide where you want to place the anchor point on your webpage and click to insert your cursor.
- Click on the 'Insert / Edit Anchor' button and a pop up window will appear.
- Give your anchor a meaningful name that describes the content at that location - but don't use spaces or special charactors e.g. brunelresearchstories
- Click 'Save'. When you're in edit mode, anchor points will show up as small grey boxes, however these won't apear on the live webpage.
Call to action buttons
A call to action, or CTA, should be used to encourage users to take a specific action, like booking an open day, making an enquiry, or making a purchase. CTA buttons are designed for stand-alone links only - don't use them for links within a sentence. Note: This is for classic Contensis only.
- Right click where you want your CTA button to go in the editor window.
- Select 'Insert webcontrol' -> 'Custom' -> 'CTA(s) - Call to action button(s)'.
- Give your CTA button a title. This is the text that will appear on the CTA button. Make sure it's clear and informative e.g Apply now or Email us
- Add your link. There are six link options: CMS page link and CMS PDF link - both of these are internal links. To add these links, click the folder icon to browse for the page or document you wish to link to. External link, anchor link, email and phone - these last four require you to type or paste the information into the relevent box.
- Choose a colour for your CTA button. Give a guide as to what colour to use
- Click 'Save'.
Changing a link
The steps are the same, reguardless of whether you're using classic or new Contensis.
- Click on the link you wish to edit with your cursor.
- Select the 'Insert / edit link' button, or if you're using classic Contensis, you can also right-click the link and choose ‘Insert Hyperlink’ from the drop down menu.
- Make your changes in the edit window and save.
Removing a link
Sometimes you might need to remove a link completely if a page has been moved / deleted or the url has changed. This is what we call a 'broken link'. These steps are the same, when using both classic and new Contensis.
- Click on the word, phrase, or image that contains the link you want to remove. When selected, the 'Unlink' button will become more prominent or darker.
- Click on the 'Unlink' button. This action will remove the link from the selected text or image.