Creating and Editing Links and Anchor Links


You can embed links to other pages in your content, using the Link and Anchor Link functions in the WYSIWYG editor.

Watch the 2 minute video:


Embedding Standard Links

To add a standard web link into your content:
Snapshot of link button in WYSIWYG editor
  1. In the WYSIWYG editor, select the content you want to be a hot link.
  2. In the WYSIWYG tool bar, click on the "Link" icon
  3. In the dialog box, select either "Internal" or "External"
    • An "Internal" link points to a location within your site
    • An "External" link points to a location outside your site (it may be another site in the WCMS, or it may be elsewhere on the Web)
      Selecting internal or external in the link dialog box
  4. For Internal links:
    • Click the browse icon next to "Link", and browse to the location you want to link to
    • Leave "Anchor" blank if you are not targeting an anchor point (see below for Anchors)
    • In the "Target" menu, select whether you want this link to open in the same window (users will leave your page to go to the link page), or in a new window (your page will still be open, and the new page will open in a new window)
    • In "Title", enter an alternative text name for the link
    • Leave the "Class" option in the default position
    • Click "Insert"
  5. For External links:
    • Type or paste the target / external link address into the "Link" field
    • Leave "Anchor" blank if you are not targeting an anchor point (see below for Anchors)
    • In the "Target" menu, select whether you want this link to open in the same window (users will leave your page to go to the link page), or in a new window (your page will still be open, and the new page will open in a new window)
    • In "Title", enter an alternative text name for the link
    • Leave the "Class" option in the default position
    • "Click Insert"

NOTE: When building out a new site, do not hard code "yoursitename-new.ucsc.edu/xxx.html" into the link address. These should be Internal links.

  1. The WCMS now automatically detects a URL and will auto-link it for you when you type "www."  OR "http://"

section 508 compliance iconACCESSIBILITY NOTE: If you use the "Target" window and select New Window, please indicate so. (e.g. "(this link will open a new window)" That way those that use screen readers know that they will go to a new window.

Also, clickable links should not say "here" or "click". The link on a page should be descriptive. (e.g. "view the WCMS classroom schedule" instead of "click here to see the classroom schedule")

Inserting Anchor Links (watch the instructional video)

An anchor link is the same as a standard link, except that it points to a location in the middle of the page, instead of simply pointing to the top of a page. To use an anchor link, first there has to be an anchor in your target page (usually attached to a sub-heading or image). Then you can set up a link from another page (or within the same page) pointing to that anchor location.

Creating an Anchor in Your Page

  1. Select / highlight the text or image that you want to use as an anchor point. Typically, this is a main content point in your page, like a sub-heading.
  2. Click the "Insert / edit anchor" button in the WYSIWYG editor. The anchor button in the WYSIWYG editor
  3. Enter a short Anchor Name that describes the target anchor. This name will be used in your link, so it should be lower case, and as short and clear as possible.The insert anchor dialog box
  4. Click Insert.
  5. In the WYSIWYG editor, you will now see the "anchor" icon where you placed your anchor. You can also see this by going into the HTML viewer - an anchor tag looks like: <a name="anchor name"></a>
  6. Now you need to create a link TO that anchor. Highlight the word that one would click to get to the anchor (e.g. the "F" in an A-Z index list)
  7. Click the "Link" icon and in the Insert/Edit Link box that appears, be sure the "internal" radio button is selected and in the "anchor" field, type in the anchor name exactly as you named it
  8. Click "insert" and then submit your changes on that page.

Linking to an Anchor in Another Page

  1. Verify that the anchor exists in the target page (see above: Creating an Anchor in Your Page)
  2. In your page where you want to insert a link, select / highlight the text that you want to be a link.
  3. Follow the instructions above in "Embedding Standard Links," except this time enter the short name that you created for your anchor in the "Anchor Name" field. Enter an anchor name in the link dialog box
  4. In the WYSIWYG editor, your link will look the same as a standard link, but it points to the middle of a page, instead of the top of the page. You can see the special code for an anchor link by going into the HTML viewer - an anchor link looks the same as a standard link, but it has "#anchor name" at the end.
  5. Submit your page and test your link.
Removing (Breaking) Links
  1. Edit the page, and select / highlight the text or image that has the link you want to remove.
  2. Click the "Unlink" button in the WYSIWYG editor. The Unlink button in the WYSIWYG editor
  3. This removes the link from your text or image. It should now appear the same as the rest of your content.

"Back to top" links
When you create a "back to top" link, instead of creating an anchor named "top" you create an anchor called "content" (don't include quotes). Then link the "back to top" text to the anchor named "content".  

FAQ: Can a page title be a link? No. Only content in the main content area of your page can be linked.

FAQ: Can I make a banner image a link? No, see answer above. You can, however, embed an image in the main content area of your page that is the same size as a banner and link it. Any image in the content of your page can be made in to a link.

FAQ: Can I make a phone number a link so when someone is viewing my web page on a mobile device, they can click it and call? YES! See this page for instructions.

See Also