Add links to text
Stanford Sites comes with many options for adding links to text, including email links and internal documents.
Adding links to text within a text area
When adding a link to text, you'll want to write or highlight text that communicates the purpose of the link.
- Highlight the text area you would like included in the link.
- Click on the Link button in the Text Area toolbar to open the Add Link modal.
- In the URL field, add the url of the web page (internal or external) you would like to link to.
- Add a Title if desired.
- Click Save.
Adding a link to the homepage (front page) of your site
On your Stanford site you'll encounter a variety of methods for adding links to your home page.
In some text edit fields on your site you can use <front> to create a link to your home page. However, in the WYSIWYG editor, to link to the home page use a forward slash, i.e., /. If you use <front> you will get an HTML error and the link will not work.
Here's how to add a link to your homepage from the WYSIWYG editor:
- Highlight the text you want to link and click the link icon in the WYSIWYG editor. (To edit an existing link, right-click on the link and choose Edit Link.)
- Click in the URL field and type / (forward slash) then press ESC to close the drop-down list of pages.
- Click OK.
Email Links
Email ("mailto") links can also be added to text within text areas, as well as other paragraphs. Email links will be displayed with an email icon that is added automatically.
Adding email link within Text Area
Option 1: Clicking Link Button
- Highlight the text area you would like included in the email link.
- Click on the Link button in the Text Area toolbar to open the Add Link modal.
- In the URL field, add "mailto:" followed by the email you would like to link to. For example:
mailto:jane@stanford.edu. - Add a Title if desired.
- Click Save.
Option 2: Adding email link using shortcuts
Keyboard shortcuts can also be used to add an email link in a slightly different manner as option 1. For mac, the shortcut is "command" plus "K", and for PC, the shortcut is "Ctrl" plus "K" (Chrome recommended). Using these shortcuts will open up a link modal with a few extra options. This keyboard shortcut can also be used to modify existing links.
- Highlight the text area you would like included in the email link.
- Type the keyboard shortcut (Mac: "command" plus "K", PC: "Ctrl" "K") to open the Link modal.
- Add the text you want displayed under Display Text.
- Select E-mail in the Link Type dropdown.
- Enter the email address under E-Mail Address.
- Exit the Link modal and paragraph.
- Click Save.
Adding email links within other paragraph types
Many paragraph types offer a URL field without an Add link modal. You can still add e-mail links into these fields, following a similar approach as option 1 for the text area.
- In the URL field, add "mailto:" followed by the email you would like to link to. For example:
mailto:jane@stanford.edu. - Add required Link text.
- Click Save.
Adding internal documents to text as links
File documents added to your media library (txt, rtf, doc, docx, ppt, pptx, xls, xlsx, pdf) can also be linked to in your text. For instructions on adding documents to your media library, see How to Add Media.
- Highlight the text area you would like included in the link.
- Click on the Link button in the Text Area toolbar to open the Add Link modal.
- In the URL field, start typing the Media Name for the document you are trying to link to. Suggestions of documents will appear as you continue to type.
- Once your desired document appears, select it.
- Add a Title* if desired.
- Click Save.
*Adding a title to your document link
When a site visitor encounters a link on your site, you'll want them to know when a link is to a document and not another page. Here are some recommendations:
If you don't change the title of the document
When you add a document to the site, you may have the option of changing the title. If you don't provide a title, the filename including the extension will display. The extension sufficiently indicates that the link is to a document, in this case a PDF:
If you do change the title
When uploading your document to the site and you do change the title, we recommend that you indicate in the title that it opens a document, i.e. (opens <document type>):
If you link directly to a file
This is the preferred approach providing access to files on your site. It is a little different that the previous approaches as it allows access to the file through a URL and not as a media file.
For example, suppose you want to link to a file in Google Drive or Box. You'd navigate to the file, get the URL, then add the link using the steps in the section above entitled Adding links to text within a text area. For the name of the link you'd want to indicate that it's to a document and the size of the document, i.e. (<document type>, <size>). For example:
Troubleshooting Links
How do I remove email links if they are displayed unintentionally?
In a few use cases, an email link (with mail icon) may unintentionally appear on non-linked text after the page is saved. For example, this can occur for some code snippets or examples that include the @ sign. In these situations, you can remove the email link and icon by wrapping the text in a <code> tag.
- Within the Text Area WYSIWYG toolbar, Click Source to display your Text Area as HTML.
- Find the text that is unintentionally displaying the email link, and wrap it with an opening <code> tag and a closing </code> tag.
How do I create an anchor link?
In some cases, you may want to create a destination or anchor link. This can be done using the Anchor tool in the toolbar, or by adding an id="<anchor-name>" attribute to a header.