In addition to heading styles, another feature you can add to pages is links. You can add a link to an image or text so that it will navigate to another page when clicked. In this tutorial, you will learn how to create links.

Adding Links

Links 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 a link:

  1. Select the content (image or text) from a content field
  2. Click the Insert/edit link icon
    add-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 the Target field set to "None".

IMPORTANT: When you enter an external link, the "Link" field will already have "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 as necessary:

  • 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 title can provide additional text that describes the link. In most cases, this is unnecessary since the "Text to display" should be serving that purpose.
  • Target: Target refers to which window the link will open in when a user clicks on it. If you select "None", the link will open up in the same window. If you select "New Window," the link will open up in a new window, which makes it more difficult for users to manage your website because they would have to click between two or more tabs or windows.
  • Class: Classes 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 automatically 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 that correspond to the headings below. If you set up the anchors and links correctly, it will scroll the page down to that heading when users click the link. This page uses anchored links at the top. When you click "Anchors" at the top of this page, it scrolls down to this section. Try it!

An anchor's terminology can get confusing, so it's important to understand a few terms first. There are two things that have to be set up in order for an anchor to work:

  1. The anchor link (the thing that will be clicked on)
  2. The anchor target (where the link will go when clicked)

Adding an anchor link


In your page, add the link by following the directions above, but in the "Insert link" pop-up, you will see an "Anchor" field. This is where you specify an "anchor id" that will be shared by the anchor link and the anchor target.

anchor1.png
  • Select "Internal" and choose the page that has your anchor target (or will have it if you haven't set it up yet).
  • Type your anchor id. In this example, it is "maygrads."  If you haven't already set up your anchor target, you will have to remember this because you will have to specify this same anchor id on your anchor target.

Now you have created your link. You must now create the anchor target (the place you want your link to go). There are two methods for adding anchor targets:

Method 1: Adding an anchor target to the top of a grid cell


Multi-block grid cells have a field called "Grid Cell Anchor," which allows for you to specify the top of a grid cell as the target of an anchor link. In this example, the anchor id is "maygrads".

grid-cell-anchor.png

So now we have a grid cell with an anchor target of "maygrads".  If a link is set up to this grid cell's page with an anchor id of "maygrads", the page will instantly scroll down to the top of this grid cell.

Method 2: Adding an anchor target within a WYSIWYG content field


If you want an anchor target to be in the middle of a grid cell, or if your anchor target isn't in a multi-block grid cell, you can set up an anchor manually within a WYSIWYG content field. Simply select the text or image that you want to be the link and click the "Anchor" button in the content field's toolbar.

anchor2.png

 

Then specify the same anchor id that you specified when generating the anchor link.

anchor-id.png

Button Links

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

Here is an example of a button: I am a purple button

To create a button:

  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 select "yellow-button" or "purple-button"
  4. Click "Ok"

See Cascade Example - Button

HTML Links

An HTML Link is a useful way to add external links to multiple pages on your website while only having to define the link in one place; in other words, when the external link changes, you do not have to visit each page the link is on to edit it manually. You will just have to edit the HTML link and then republish all pages that use that link.

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 _links 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

Now you are ready to start creating HTML Links.

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"
  3. Click the "Link" field and select the HTML Link
    • Browse > JMU > [your website] > _links > [HTML link]

adding-html-links.gif

Back to Top