Editing Links

Create, Modify, and Remove Hyperlinks

Welcome! This guide will teach you how to create clear, effective, and accessible links in Cascade CMS. Whether you're linking to another page on the FHSU site, a helpful external resource, or a specific section of your own page, we'll walk you through each step.

On This Page:

• Interactive Walkthrough
• Instructions
  • Understanding Link Types
  • How to Insert Links
  • Creating Special Links (Email, Phone, Anchors)
• Best Practices
  • Use Descriptive Link Text
  • Provide Contextual Clarity
  • Avoid Using URLs as Link Text
  • Add Titles for Additional Context (When Needed)
  • Include the File Format for Downloads
• Additional Resources

Interactive Walkthrough

Instructions

1. Understanding Link Types

First, it's important to choose the right type of link. Cascade organizes links into two main categories based on where the content lives. This table will help you decide:

2. How to Insert Links

Follow these simple steps to add links to your content.

(1) Link to an FHSU Page (Internal)

1. In the editor toolbar, click "Insert/edit link" button.
2. Click "Choose File, Page, or Link".
3. A window will pop up. Browse or search for the FHSU page or file you want to link to. Select it, then click "Choose".
4. Enter the display text—this is the clickable words your visitors will see (e.g., "View the academic calendar").
5. Click "Ok" to save your link.

(2) Link to an External Website

1. In the editor toolbar, click "Insert/edit link" button.
2. Select the "External" link type option.
3. In the "Link Source" field, enter the full web address (URL), including "https://". For example, https://portal.kansas.gov/.
4. Enter clear, descriptive display text for the link.
5. Click "Ok".

3. Creating Special Link

Cascade also allows you to create links that trigger specific actions, like opening an email or dialing a phone number.

(1) Insert an Email Address

Create a link that opens the user's default email program with a new message ready to send.

1. Follow the steps for an External Link.
2. In the "Link Source" field, type  mailto: followed immediately by the email address.
   • Correct:  mailto:web@fhsu.edu
   • Incorrect:  mailto: web@fhsu.edu (no space after the colon)

(2) Insert a Phone Number

On mobile devices, this link will prompt the user to call the number. On a computer, it may open a calling app.

1. Follow the steps for an External Link.
2. In the "Link Source" field, type  tel: followed immediately by the phone number, using the international format.
   • Correct:  tel:+17856284206
   • Incorrect:  tel:785-628-4206

(3) Insert an Anchor

Anchor links let you send users directly to a specific section, like "Contact Information" or "Application Steps."

Part 1: Mark the Destination (Create the Anchor)

1. In the editor, click on the heading, image, or text you want to link to.
2. In the toolbar, click the "Anchor" icon.
3. Give the anchor a simple, unique ID, like "contact-info" or "section-3". Click "Ok". (This invisibly marks that spot.)

Part 2: Create the Link to Your Anchor

1. Highlight the text you want to turn into the link (e.g., "Jump to contact info").
2. Click the "Insert/edit link" button.
3. In the "Link" window, find the "Anchor" field and type the exact ID you created (e.g., contact-info).
4. Enter your display text if you haven't already, and click "Ok". Now, clicking this link will scroll the user right to that anchored spot.

Best Practices: Creating Accessible Links

Creating clear, descriptive links is essential for all users, especially those using screen readers or other assistive technologies. Following these simple guidelines ensures our website is welcoming and usable for everyone.

✅1. Use Descriptive Link Text

Your link text should tell users exactly where they will go or what they will get.

• Avoid vague phrases: "Click here," "Read more," "Link."
• Do use clear descriptions: "Download the annual report (PDF)," "View our accessibility policy," "Apply for undergraduate admission."

✅2. Ensure Links Make Sense on Their Own

People using screen readers often browse by tabbing through links, hearing them out of context. Make sure each link is understandable by itself.

• Avoid: "Learn more" (learn more about what?)
• Do use: "Learn more about our financial aid options."

✅3. Avoid Using Full URLs as Link Text

Long web addresses are difficult to read and confusing for screen readers.

A long web address like "https://www.fhsu.edu/academics/" is difficult to read and confusing when read aloud by a screen reader. Use descriptive text instead.

✅4. Add Titles for Additional Context (When Needed)

The "Title" field adds a tooltip that appears on hover. It can provide helpful context, but should not repeat the link text.

To add a title:

1. Select the link in the editor
2. Click "Insert/edit link"
3. In the "Title" field, enter your supporting information
4. Click "Ok"

✅5. Indicate File Types for Downloads

If you're linking to a document like a PDF or Word file, note the file type in the link text. This sets the right expectation.

• Example: "FHSU Brand Standards (PDF) " or "View the meeting agenda (DOCX) .""

Additional Resources