Creating Links and Anchors

Use the arrow keys or spacebar to go to the next slide.

Make this presentation full screen for best effect.

An anchor link is a link on a page that brings a user to a specific place on that page. These types of links can be helpful when you want to bring a user to a specific spot on a page.

 

For people that have used our Drupal 7 sites in the past, this feature and interface will look familiar. However, for those who are new to Drupal and Drupal 8 this guide will help introduce you to the new interface with links and the new feature of anchor links.

What is an Anchor Link?

Under the Full HTML text format option in your WYSIWYG for the body section, you will now see a little flag next to the link and unlink icons.

How to add an anchor link

Before we get into anchor links, we wanted to show and give a small introduction to the new interface you will see when adding or removing links within you body section.

The new link interface

The new link interface (cont.)

  • The display text is what the link will actually say. This is the content that you highlighted before clicking the link icon
  • You now have a link type option. This is where you get a drop down of options such as URL, email, and anchor (which we will get into shortly).
  • Based off of what Link Type is selected the interface and fields change. Since we will talk about anchors in a few more slides, here are the interfaces of URLs and Emails

In this interface, you are now given a separate tab for Target. This is where you can select now several different options on what you want the behavior of the link to be when it is clicked. To have the link load in the same tab, the default is fine. If you want to have the link open in a new tab, you would select the (_blank) option.

The new link interface (cont.)

Creating an anchor link

Now that we have reviewed the new link interface, we can now go over the few steps needed to set up an anchor link. This is a two step process. The first step would be creating the anchor itself. You will highlight what you want the anchor to be like in the example shown above and click the newly added flag icon.

Creating an anchor link (cont.)

When you click the flag icon, you get a small pop up window that allows you to create an anchor. This name you enter is just for a reference point for the following step, so you will need to remember what you give for the anchor name for the next step.

Creating an anchor link (cont.)

When you click save, the window will close and you will now see the anchor is created in your body section. The next step is to create a link with the link type of anchor. We will need to highlight the content we want the anchor to link to which can be shown above and then click on the link icon.

Creating an anchor link (cont.)

When this screen displays, change the link type to be "Link to anchor in the text". This will change the display to give you a dropdown to select from all of the anchors you have selected. Since we only created on in this example, we will select that one and click ok.

Creating an anchor link (cont.)

After you complete these two steps, this is what the final product will look like in the body section. Now, when a user clicks the first line/link we created on the page, it will bring them down to the second line/link we created. A use case for this would be if you have a certain page with a lot of text and content. This is not the best example in terms of seeing a final product, however this documentation is aimed to provide users the information and ability to create anchor links within the new link interface.

Congratulations!
You have completed the

anchor link and new link interface  Walkthrough

use the back button to go back to where you were