In addition to heading styles, another feature that applies to all Cascade documents is links; regardless of the type of document, you will add links the same way for each.

You can add a link to an image or text so that it will navigate to another document when clicked. In this tutorial, you will learn how to create different types of links and a _links folder.

Internal/External Links

Internal/external links are simple links that can be applied to text or images; they have the option of linking to pages in your website (internal) or outside of your website (external).

To add an internal/external link:

1. Select the content (image or text) from a WYSIWYG content field

2. Click the Insert/edit link iconadd-link.png
3. On the pop-up window (see screenshot below), choose internal or external link:

Internal Link:

link-popup.png

  • Click the "Link" field and navigate to the page within your website that you want to link to 
    • Note: Please choose this option for all links to pages within your website. This way, if the linked page is moved or renamed in the future, the internal link will be preserved and your website won't have a broken link.  

External Link:

ex-link.png

  • Copy the URL (for example, "https://www.jmu.edu/some/page.shtml" or "https://external.website.com/") and paste it in the "Link" field
    • Note: Email links should be external, and have "mailto:" before the email address, with Target field set to "None."

IMPORTANT: When you enter an external link, the "Link" field will already has "https" as a way of preventing broken links. If you add a link that begins with "http"; a warning will pop up to remind you it should be "https."  If you are certain that the website does not support "https," then you may disregard the warning.

4. Fill in other fields:

  • AnchorAnchors allow viewers to scroll automactically to a specific place on a page. If desired, add an anchor to a link.
  • Text to display: The text to display is the text that appears in place of the URL. It is a best practice to be specific and descriptive with link text. Instead of saying "Click here," try more descriptive link text like "Apply to the Honors College."
  • Title: The link's title is the alternate text that appears if the link's text to display does not. This error is uncommon, but if you wish to fill the field, either type the same text as the text to display, or if you do not have text to display, follow the text to display guidelines to create a title.
  • Target: Target refers to which window the link will open in when a user clicks on it. Select "None" in the Target field so that the link will open up in the same window. If you select "New Window," it makes it more difficult for users to manage your website because they would have to click between two or more tabs.
  • Class: Classed can be used to add custom text styles to a link. For example, select purple button from the dropdown to create a purple button link.

5. Click "Ok"

Anchors

Anchors allow viewers to scroll automactically to a specific place on a page. For example, if you have a very long page with several headings, you could create a few links at the top of the page which correspond to the headings below, and if you set up the anchors and links correctly, it would scroll the page down to that heading. This page uses anchored links at the top. When you click "Anchors" at the top of this page, it scrolls down to this section.

All grid cells have a "Grid Cell Anchor" field, which can be specified to add an anchor to that grid cell. After adding the anchor, you can specify that anchor tag in links on the same or other pages.

Adding anchors to a grid cell


1. In a content field, highlight the text you want to add an anchor to, and then click the "Insert/edit link" button in the content field's toolbar
2. Select "Internal" and choose the page you want to link to 
3. Type an anchor tag (usually it is an indicator word or the first word of the content to which you are anchoring; in the example below, the anchor tag is "maygrads")

anchor1.png

4. On the page you are linking to, navigate to the content's grid cell that you want the link to go to

5. In that grid cell, type in the same anchor tag you created in the content field in the "Grid Cell Anchor" field

grid-cell-anchor.png

NOTE: You can specify that anchor in links on other pages of the internet too. To do this, specify the anchor at the end of the URL link by typing # followed by the anchor tag. A URL with an anchor looks like this: https://www.jmu.edu/cascade/docs/creating-content/all-documents/adding-links.shtml#anchors

For example, if you wanted a link to skip directly to a grid cell with the "maygrads" anchor, you simply have to specify "maygrads" in the "Anchor" field of the link.

Adding multiple anchors to a grid cell


In certain cases, you may need to link to multiple pieces of content within a grid cell, in which case, adding one single anchor to a grid cell would limit what you can link to. To create multiple anchors within a grid cell, follow these steps:

1. In a content field, highlight the text you want to add an anchor to, and then click the "Insert/edit link" button in the content field's toolbar

2. Select "Internal" and choose the same page you are inserting the link on

3. In the same window in the "Anchor" field, type an anchor tag

4. In the same grid cell, scroll down to the content where you want the link to navigate to

5. Select the content and click the "Anchor" button in the content field's toolbar; type the same anchor tag you created in step 3

anchor2.png

 

6. Repeat these steps to create more anchors within the same grid cell.

Button Links

Buttons are links with a special class added to them. You have the option of either yellow or purple buttons.
buttons.png

  1. In a WYSIWYG content field, type the text you want to appear on the button
  2. Select the text in the content field, and then click the "Insert/edit link" button in the toolbar
  3. Click the Class dropdown to apply "yellow-button" or "purple-button"
  4. Click "Ok"

See Cascade Example - Button

Links to PDFs

You may want to link to PDF files on your website. Before adding a link, you will need to upload the PDF These into a "_files" folder. Remember, if you have Word files to add, you should convert them to PDFs for Cascade. Follow these instructions to link to a PDF:

  1. In a content field, select the text you want to link to the PDF and click the "Insert/edit link" button
  2. Check "Internal" and then click the "Link" field and navigate to your _files folder in which you uploaded the PDF
  3. Click "Ok"

Creating _links Folders

Before learning how to create HTML links, you will need to create a "_links" folder if you do not already have one. To create a link folder, follow these steps: 
  1. In the top-left corner of the Cascade window, select: Add Content > _ALL > Folder
  2. Type "_links" in the folder name, display name, and title fields
  3. Place the new "_links" folder in your website folder

 

HTML Links

An HTML link is a useful way to add external links to multiple pages on your website while only having to edit the link from one place (in your _links folder); in other words, when the external link changes, you do not have to visit each page the link is on to edit it.

Step 1: Create HTML link
  1. Select: Add Content > _ALL > HTML Link
  2. Name the link with a display name and title
  3. Place the link into your _links folder
  4. Enter the link URL in the Link field
  5. Select "Submit" in the vertical ellipsis
html1.png
Step 2: Add HTML link to a page
  1. Navigate to the page's content field you want to add the HTML link 
  2. In the content field, select "Insert/edit link" and check "Internal"
    • Note: If you copy and paste the link into the External link field, it will not be connected to the HTML Link, which means you will not be able to update all the links at once using the HTML Link.
  3. Click the "Link" field and select the HTML Link
    • Browse > JMU > [your website] > [_links folder] > [HTML link]
html2.png

Back to Top