Hyperlinking

On this Page:

There are multiple ways to hyperlink information whether it be text, an email or an image. Here are some general rules to abide by when hyperlinking.

Basic Text

When linking text it is imperative that you follow the accessibility rules as outlined in the Web Accessibility: Being Inclusive on the Web training. Next you will highlight the text you would like to be linked and select the hyperlink icon. Finally, paste the URL into the field and select the apply button which looks like an arrow.

Email

When linking to an email you will need to do the following:

  1. Type out the email in your editor
  2. Highlight the email
  3. Select the hyperlink icon and type in “mailto:” followed by the email. Ex: mailto:Katrina.Frank@kzoo.edu
  4. Select enter or the apply button.

Images

If you were to link an image be sure to include alt text that describes the destination of the link, not the content of the image. Do not include alt text if the image and text are both linked.

Anchors/Page Jumps

You can use an anchor (also called a page jump) as a great way to link to a section of a page. By doing so, your site visitors can click to go from one part of a long page to another part of that same page.

Examples of use at K:

  • When SCEs have a long list of content such as a departmental SIP requirements and various guidelines.
  • If there is a list of section names at the top of a page. You can link each name to the relevant section further down the page so that visitors can jump to a section about the particular information they are interested in. You can then link readers directly back to the original list of all sections at the beginning of the page (reference back to top instruction).
  • When SCEs need to link from one page to a specific area on another page.
  • When SCEs have a lot of information within an accordion.

Directions on Adding Anchors and Sharing Anchor Links

Adding Anchors

  1. Highlight the text you would like the user to click on
  2. Select the hyperlink icon or Ctrl+K on your keyboard
  3. Type “#” and insert the anchor name you have chosen. Example #radish
  4. Hit “Enter” on your keyboard or the apply arrow button
  5. Select the heading on the page where you would like your user to be brought to.
  6. On the right sidebar expand the Advanced option and under “HTML anchor” enter the anchor name you have chosen without the “#.” Example: radish

Sharing Anchor Links

Anchors don’t have to be used only for linking to sections within the same page. You can use an anchor to link from one page to a specific area on another page. To do so, we will need to link to the full page URL, followed by # and the anchor.

For example, if your page has the following URL:

Link: https://is.kzoo.edu/about/staff

and you create an anchor called “websvcs” on that page, then the full anchor link would be:

https://is.kzoo.edu/about/staff/#websvcs

Directions on adding Back to Top option

A “top” anchor is automatically included on every page. You can add a “Back to Top” link after any content section:

  1. Hit “Enter” on your keyboard or the apply arrow button
  2. Add a new paragraph block at the end of your content
  3. Type in the following: Back to Top
  4. Highlight the “Back to Top” text
  5. Select the hyperlink icon or Ctrl+K on your keyboard
  6. type #top

Directions on Anchors for Accordions

SCEs can use the Separate Accordion block to provide an anchor link (called accordion ID for this block) to that exact accordion. An “accordion ID” is automatically included with every Separate Accordion block, but SCEs have the option to add onto the accordion ID to make it more descriptive.

Locating the Anchor/Accordion ID

  1. After adding the Separate Accordion block
  2. Expand the “Accordion ID” drop down in the block settings (right sidebar). There you will find “aab_accordion_” followed by a series of numbers. This is your unique custom ID.
    • Note: Do not delete the series of numbers since this will break the anchor.

Editing the Separate Accordion Anchor

Some SCEs will want to make their anchor link a bit more descriptive. To do so, you will need to:

  1. Select your Separate Accordion block
  2. Expand the “Accordion ID” drop down in the block settings (right sidebar)
  3. Add a “-” at the end of the series and then enter your anchor text.
    • Note: Do not delete the series of numbers since this will break the anchor.

Sharing Anchor Links for the Separate Accordion Block

You can use an anchor to link from one page to a specific accordion on another page. To do so, we will need to link to the full page URL followed by # and the the custom accordion ID.

For example, if your page has the following URL:

Link: https://wordpresshelp.kzoo.edu/instruction-documentation/forms/gravityforms/

and you want the user to land on the Form Settings accordion on that page, then the full anchor link would be:

https://wordpresshelp.kzoo.edu/instruction-documentation/forms/gravityforms/#aab_accordion_c7e55d0b_2

If you would like to take it a step further and have the anchor be more descriptive you can add onto the custom accordion ID:

https://wordpresshelp.kzoo.edu/instruction-documentation/forms/gravityforms/#aab_accordion_c7e55d0b_2-form-settings