Links Within a Page

To add a link to a location lower down the page, you will need to set an anchor and then link to the anchor.

The Steps

  1. Create an anchor by selecting the full paragraph, heading, or bullet point that is the destination and then click the “Add / Edit Attribute” tool.
  2. In the field named “Id” create a name for your anchor. Make sure your anchor name is all lowercase, no spaces or special characters, and is unique (not used in any other anchors on the page)
  3. Linking to an anchor is just like linking to another page. You might see your anchor listed in the Anchors drop down after you click “Insert / Edit” link. If not, type #myanchorname in the field for Link URL.
  4. If the anchor is on another page, just select the other page and add #myanchorname to the end of the url (no spaces).

Code Example (paste into HTML view)


<ul>
  <li><a href="#link1">Link 1</a></li>
  <li><a href="#link2">Link 2</a></li>
  <li><a href="#link3">Link 3</a></li>
  <li><a href="#link4">Link 4</a></li>
</ul>

<h3 id="link1">Content 1</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h3 id="link2">Content 2</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h3 id="link3">Content 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h3 id="link4">Content 4</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Code Example Will Output the Following

Content 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

 

 

Content 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

 

 

Content 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

 

 

Content 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.