Webmaster's Blog

Link Within a Page

Published
By

You can link to a specific place within your page using anchors. You can also link to individual sliders or FAQs. This is useful when you have a long page and want to provide shortcuts to certain sections or when you want to direct the user to a specific piece of information within a page.

Setting Up Anchors

The first step is to create the anchor on the page in the place where you want to link to. Sliders and FAQs already have this code, so you would not need to do this step.

  1. Go to the code view of the CMS using the <> icon.
  2. Find the section where you want to link to and find the paragraph or heading tag that is around it. It should look like <p>, <h2>, <h3>, or <h4>.
    A screenshot of the source code showing the heading tag without ID.
  3. Add the ID code into that tag in the form of id=”yourid“. yourid should be short, one to two words, using only use lower case letters, numbers, and hyphens. Each ID you create on the page must be unique to the page. The code should now look like <p id=”yourid”>.
    A screenshot of the code view showing the heading tag after adding the ID.
  4. Save and publish.

Finding the Slider or FAQ Anchor ID

Sliders and FAQs already have assigned IDs that you can link to.

  1. Go to the live page or in the CMS, open the Preview tab for the page.
  2. Right-click on the slider or FAQ title that you want to link to.
  3. Select “Inspect”.
  4. Look at the highlighted code and go up two lines.
  5. You should see something like id=”slider-d11e2783″ for sliders or id=”question-d11e1234″ for FAQs. The text in quotation marks is the name you need to link to.
    A view of the code inspector of a slider on a live webpage.

Please note, if the title in the slider or FAQ snippet changes the ID will also change and your link would need to be updated.

  1. Select the text you want to link from.
  2. Click the Insert/Edit Link icon Linked chains icon in toolbar to insert or edit a hyperlink. in the toolbar.
  3. Enter the appropriate URL.
    1. If the anchor is on the same page as the link you are creating, in the URL field enter #yourid (hash followed by whatever you named the anchor or the slider/FAQ ID).
      Insert Link window showing the hashtag link to an ID on the same page with no other URL.
    2. If the anchor is on a different page than the link you are creating or you are creating the link in a navigation file, first enter the URL for the page that the anchor is on by using the file picker to select the page within your site or pasting the outside URL. Then add #name (hash followed by whatever you named the anchor or the slider/FAQ ID). For an internal page your URL may look like {{f:123456}}#name.
      Insert Link window showing the hashtag link to an ID on a different page with an internal page link. Insert Link window showing the hashtag link to an ID on a different page with a URL.
  4. Click the Save button.
  5. Save the changes in the Editor.

There is no way to test anchor links within the CMS until the page with the IDs is published.

, , , ,