Links

There are many types of links that are possible to include within your website. These links are input in slightly different ways depending on what you wish to do. We will discuss each type of link and how to create it below.

Creating a Link to a Document

To begin, highlight the text you would like to link, then click on the link button in the WYSIWYG editor.

Image
screenshot of Drupal 9 toolbar with highlighted link icon

Click on the Media Library button.

  • To upload a new file, click Choose File.
  • To use a file that already exists within the media library, you can search using the Name field, or scroll through the media library.

Once you have uploaded or selected your file, click Insert Selected and your file will now be linked.

Be sure to click Save to save your work.

Creating a Link to a Webpage

  • To begin, highlight the text you would like to link, then click on the Link button in the WYSIWYG editor.
    • If linking content to an external website, the entire address, including ‘www.’ should be used.
    • If linking content to another page within your website, start typing the name of the page you want to link to and then select it from the dropdown menu.
  • Click OK in the link dialogue box and the link will appear where you highlighted the text.
  • Be sure to click Save to save your work.
Image
screenshot of Drupal add link window

Linking to an E-Mail Address

Creating a link to an e-mail address is similar to creating a link to a document.

Type the e-mail address (or person’s name), and highlight the text. Click the link icon and then enter the appropriate e-mail address, preceded by “mailto:“. Be sure to click Save when you are finished adding the link.

Image
screenshot of Drupal add link window with filled in URL for email linking

 

Adding a Button 

Adding a button to your content is simple. There are two different ways that you can add a button.

  1. Follow all of the above steps for adding a link normally, and under the Advanced tab, add 'button' to the CSS classes text box and save. 
    Image
    shows how to add CSS classes to a link to create a button
  2. Add a link normally, and highlight the link and change the Style to button.
    Image
    object styles drop down showing how to add a button

Important Notes

  • Do not apply underlines to links, as it deteriorates the readability of text. The link text will display an underline when the visitor hovers over a link.
  • Don’t use “click”, “click here” or “here” as the link text. Not everyone will be clicking, and it puts too much focus on mouse mechanics. The word “here” conceals what the users are clicking. When calling the user to action, use brief but meaningful link text that:
    • It provides some information when the text is read out of context.
    • Explains what the link offers.
    • Doesn’t talk about (mouse) mechanics.
    • Uses proper nouns rather than a verb phrase.
    • For example: "Read details" instead of "Click here for details"

 


 

Our team at Upanup is always striving to make this guide better and more accessible for our clients. We'd love to hear from you, so we can continue to improve this guide. 

Feedback