Linking to a Specific Part of a Page

A particular, specially identified part of a page is called a page “fragment”. You can link to a fragment instead of linking to the whole page. When following a link to a page fragment, the web browser will scroll the page until that fragment is at the top of the viewport.

The basic steps

  1. Identify the section of the page you want to link to (set the ID).
  2. Create the link.

Two ways to set the fragment ID

  1. On the block.
  2. Within the WYSIWYG editor.

Setting a block’s ID

  1. Click on the block.
  2. Choose the “Design” option.
  3. Press the “CSS” tab.
  4. Enter the desired ID value in the “CSS ID” field.
  5. Press the “Save” button.

Setting an ID on an element in the WYSIWYG editor

  1. Select the element you want to identify (usually a header).
  2. Press the “Insert/Edit Attributes” button.
  3. Enter the desired ID value in the “ID” field.
  4. Press the “Insert” button.
  5. Press the “Save” button.

Note: An ID should only contain letters, numbers, and underscores, and it cannot start with a number.

Creating the fragment link

To link to a page fragment, just add a number sign and the fragment’s ID value to the end of the URL for the page. For example, if you assigned an ID value of “summary” to a fragment on a page with this url:

http://www.example.com/about

You would link to the fragment with this URL:

http://www.example.com/about#summary

Here’s how:

  1. Highlight the text you want to turn into a link.

  2. Click on Link To Page, which opens the Choose A Page panel.

  3. Select the page to which you wish to link by clicking on that page’s name. The Choose A Page panel will close.

  4. Now you need to edit the link you just inserted to add the fragment you created on the other page—#summary in this example. To do that, make sure the original text is still selected.

  5. Now click on the Insert/Edit Link button (since we’re editing the link). The Insert/Edit Link panel will open.

  6. You’ll see that Link URL is already filled in with the URL you just inserted, which should look something like this: http://www.example.com/index.php?cID=711. At the end of that, place the fragment you created, so that it now looks like this: http://www.example.com/index.php?cID=711#summary.

  7. Press Update to close the Insert/Edit Link panel.

  8. Press Save to close the Edit Content panel.

  9. Publish your changes.

Note: If you are using the WYSIWYG editor, linking to a fragment is created as an external link, even if it’s on your own site.

Note: If you are linking to a fragment of the same page that contains the link, then you can enter only the number sign and id and skip the rest of the page URL.

←  Internal links: Link To Page
Removing Links →
secret