Anchor Links

Anchor Links are links used to navigate within the same webpage. This tutorial will show you how to create an anchor link by:

  1. Creating a link to point to the Anchor
  2. Creating a header, which will be set as the Anchor.

1. Log into Cascade CMS and select your site.

2. Navigate to the page where you will be adding the Anchor Links.

 

3. Select Edit.

 

4. Select the + icon on Main to add a content type.

 

5. Select Content Area in the newly added content type.

 

6. Use the WYSIWYG editor to help perform the following steps for adding your anchor links, text and media.

 

 7. First, create a list that will later be turned into links to help navigate throughout the page. 

 

 

8. Now add each Header and Content Area you have.

          a. To make a header, first select Format > Formats > Headings > Heading 2. Then type out the title of your Header.

     

 

          b. Next, add any other headers you will need and any content you want to add underneath your headers. 

 

 

9. Now we will turn each of the list items into links. 

      a. To create a link, highlight the desired line that you wish to create a link with and select Insert > Link

     

 

     b. After you click on Link, an Insert Link box will pop up. This is where you will create and name your anchor that will later help you navigate within your page. Here we will name the Anchor "First" and then press Ok.

 

 

10. The next step is to highlight the desired text of where you want your link to jump to within the page. Then select Insert > Anchor.

 

 

11. Here we will name the Anchor Id. The important part here is to name the Id the same as what was named for the Anchor in the Link box in Step 9b.  

 

 

12. Press Ok. You will now see a tiny anchor image next to the text where you placed the Anchor. The text is now linked so when you click on your link at the top it will jump to where you placed your anchor.

 

 

13. Repeat this process for any other anchor links you want to create. 

 

If you would like to look at an example of the Anchor Links on a page, you can do so by clicking on this link:

http://www.csueastbay.edu/cascade-training/anchor-links.html