Overview

Within individual pieces of content on your Drupal 8 site, you can add links to pages and documents on your site, or to pages on other sites.

This works very similarly to our Drupal 7 sites.

Image Removed  Image Removed

Note on the Screenshots in this Document

This document shows screenshots from a site using the Franklin Vertical Theme, but the same steps apply to those using the Franklin Bold theme.

Image Removed

Image Added  Image Added

Table of Contents

Steps

1) Type and select your text

...

Step 1:  Select the text to be linked

When you are editing a page where you want to link some text, first, select the text (by highlighting with your mouse) you want to be linked and click on the "Link" icon, which looks like a chain.

Image Removed

Step 2

...

: Paste your link url, or select your PDF doc

Now we can add a link to another page on our site, to a pdf or doc, and/or to a page on someone else's site. Click Save. Then make sure to Save the page you are editing.

...

Image Added

Types of Links you can add

You can add links to any file or page on your site, an e-mail address, or a link to any file or page on any external site. Here are some helpful hints about how to approach each case

Adding a link to an e-mail address

Step 1: Type in the text that you want linked to the e-mail address then highlight that text. You may type an actual E-mail address or use other text if you don't want the e-mail address visible on the screen. In this case I'm not printing the actual e-mail address to the screen. Then click the "link" icon. 

Image Added

Step 2: Enter the command to link the text to an e-mail address. To create a link that will open your local e-mail program you simply enter the URL as:

mailto:email@website.com - replacing the e-mail address with whatever you e-mail you want the link to send to. The "mailto:" command is what opens the e-mail program on an individual computer. 

See below in screen capture

Image Added

Step 3: Save the e-mail link, and then save your content and test the e-mail link.

Adding internal links to a page on your site

If you want to link to a page on your own site (an internal link), follow these instructions to get the url of the page to which you want to link. 

A) Step 1: Open your site in a second tab or window and navigate to the page you want to link to. In this example, I am adding a link to the directory. 

Image Removed

Image Removed

B) Step 2:  Select everything after the .edu part.

So if I want In this example, I am going to link to the Directory our directory page located at http://anth.franklin.uga.edu/directory/all, I . Because this page is internal to my site, I only need the part of the URL that is after the domain name. I will select ONLY /directory/all part. 

C) Paste Step 3:  Go back to the page you are adding a link to, and paste the url, including the leading slash "/", in the field.

D) Now Step 4: Save the link, and then save your content and test the link.

Linking to a PDF or another doc

...

on your site

Step 1: From the Link prompt, select , instead of pasting a URL in the field, you will click the link that says "Open File Browser."

This opens up IMCE, the File Manager/Uploader.

Step 2: Locate the file you want to link to.
You can browse for an existing file, or you can click the upload button to get one from your computer. Once you have selected a file, hit the "Select" link.

The file will now be linked to.

...

Save the link and your page, and test your link.

Linking to a page on another website

This is similar to adding a If you want to link to a page on your own an external site, but we will use the entire url. A) In another window or tab, go follow these instructions to get the url of the page to which you want to link. 

Step 1: Open your site in a second tab or window and navigate to the page you want to link to.Image Removed 

Image Added

Step 2:  Select the entire URL

In this example, I want am going to link to the UGA 's Graduate School site  located at http://grad.uga.edu. Because this page is external from my site, I only need the whole URL.

B) Copy the whole url and paste it.

This should include Step 3:  Go back to the page you are adding a link to, and paste the whole url, including the "http://" part when you paste it.

C) Paste the entire url.

Step 4: Save your Link, the Pagelink, and test your link. 

3) Save your link and test it

If you haven't done so already, Save the link, your page, and test the new link to be sure it works. The example below is where I made a link to the Directory, but you should test any link you add, internal, external or to a PDF.

Image Removed

Image Removedthen save your content and test the link.

Related articles