Adding Links

You will first need to be logged into your website. For example, to log in on this site, you would type in webtech.wwu.edu/user

There are two ways to add links to content

To add via CTA block

NOTE: It's helpful to know the direct URL you are linking to before you start. If using an internal link, that is if linking to another spot within your website, use LinkIt to link appropriately. If linking externally, for example, to a site that starts with something other than yoursite.wwu.edu, you may copy/paste the URL into the URL field.

  1. Add the CTA link block to the website.
  2. Fill out the fields and configure:
    • title the CTA block
    • uncheck title
    • paste in the URL, or if linking to an INTERNAL link - type in the title of the page so that the site links internally in the correct manner.
  3. Add in the Link Text (this is what will display to the users, and will entice them to click the link).
  4. Click "Add Block" to save.
  5. Click "Save Layout" to save your work
CTA link editing interface with fields for link URL, text, icons, and classes

Open the block you want to change for editing (configure).

Highlight the text you want to be a link and click on the “link” icon (it looks like a little chain).

This will pop up a window for you to search:

Drupal 8 screenshot demonstrating the URL search field

Options for linking:

  1. For internal pages: start typing in the title of the content (page or document) that you want to add.
  2. For external pages: copy and paste in the URL.
    For external webpages only, be sure to include https://websitename.com. 
    You must include "https://" for external sites. Otherwise the URL will format incorrectly. This is a great example of why it's a best practice to go to the actual link, then copy and paste the entire link when linking to an external link.

To link email addresses, type mailto:[email@wwu.edu] into the link field 
To link telephone numbers, type tel:[3606501234]

NOTE: be sure to use all lower case letters when typing tel: and remove all spaces, hyphens, parentheses or other characters between the numbers.

Red text reads: Start typing - a List appears. The window doesn't get larger, so you will need to scroll to view them all

Adding Call to Action classes to links

You may want to style links in a way that stand out or call the user to go to a certain page. These can be styled with our Call to Action ("cta") blocks or by using classes. Examples:

I have a class of cta

I have a class of cta light-green

The block reference page has the CTA link styles available and instructions for adding classes to a CTA link block.

To add classes to links in the text editor, you can find the CSS field in the link editor under the "Advanced" section: 

Add link editing modal, with the CSS classes field containing "cta large"

Important Note

The window that displays the content does not expand – you will need to scroll to view the content to click on what you want to add.

DO NOT try to click on the sidebar to scroll. It will make the pop-up file list disappear.

REMEMBER to Save Layout!

File Naming Conventions

Drupal does not remove content from this list when we replace it in the Files area. Therefore naming conventions MUST be adhered to, so that you know which the most updated version for linking is.

Drupal 8 screenshot demonstrating the importance of File Naming conventions. Red text reads - This is why NAMING is so important (even though the file has been removed/replaced it still shows on this screen)