Managing links on your website is very important. Links can take the user to another page on your website (internal) or to a different website entirely (external).
How to Add Links
There are three types of links: internal (pages within your website), external (pages outside of your website) and anchor (links within the same page. Each has a different best practice that should be followed.
For internal links, you should use the relative URL path (ex: /edit-links) to maintain accessibility even if the page is moved reorganized in the menu. URL path refers directly to the page it belongs to.
- Create a page or edit an existing one.
- Navigate to the page element in which you'd like to insert a link and select edit.
- In the Text Editor, highlight the text you want to be your link.
- With the text highlighted, click the link icon in the editor toolbar.
- This will trigger a popup where you can paste an external link (see External Links below) or, to make an internal link, you can take advantage of Quickstart's smart linking functionality:
- If you simply start typing, the window will display a dropdown list of suggestions of content on your site, grouped by content type, including pages, documents, events, and more. Click on the item you'd like to link to and then click the green checkmark to insert the link.
- If you don't see the item, you can still link to an internal page using the following steps:
- Navigate to the page you want to link to.
- Copy the portion of the URL path that comes after the .io or .edu portion, including the /.
- Example: /edit-links
- Paste the portion of the link you copied into the link box, then click the green checkmark.
- Apply styles as desired.
- Save.
External links require the full URL to function properly because they exist outside of your website's domain.
- Navigate to the page you want to link to.
- Copy the entire URL, including the https:// portion.
- Example: https://www.arizona.edu/
- Create a page or edit an existing one.
- Navigate to or create a page element with the Editor Toolbar. Highlight the actionable text you want to be the link.
- Click on the link icon.
- Paste the copied URL into the link box, click the green checkmark.
- Apply Styles as desired.
- Save.
NOTE: External Links default behavior will be to open in the same tab/window.
Exception: Links to documents and Trellis events will open in a new tab/window. This will apply to any internal links to PDFs, and any external URLs that begin with the following:
If you want to link to content on the same page (for example you have a table of contents that links down to different headings), you need to use an Anchor Link.
Add Anchor ID
- Navigate to the page you want to add the anchor link on and edit it.
- Edit the page element that contains the content you want the anchor link to jump to.
- Click on the Source view button in the content editor toolbar.
- Locate the content you want to jump to when your link is clicked.
- Add an id inside the content's html element tag.
Example: <h3 id="jumpHere">Using Anchor Tags is Easy!</h3> - If your link is in the same page element click the Source view button again to return to regular text editing, otherwise find that page element and edit it.
Add Anchor Link
- Highlight the text you want to make into a hyperlink.
- Click the link icon.
- In this field add the name of your id, preceded by a #.
Example: #jumpHere would link to our Heading 3 in the previous example. - Save.
NOTE: When adding an anchor link to a Card Link URL field on a card, you may need to include the relative URL path for the page (e.g., /page-title#jumpHere).