Skip to main content
Web Central Quarterly Enhancements Webinar | Watch Now...

Search

Add Anchor Links to a Page

  • Updated:

Users may add HTML (HyperText Markup Language) anchor links to a page to help assist readers with navigation. Anchor links are shortcuts that lead from one section of a page to another section on the same page.

 

Who can use this feature?
System Administrators | Owners | Publishers | Authors

 

Instructions

 

  1. Log in to your website solution
    Note: Website preferences may change what this looks like, but adding "/admin" to your website's URL will take you to a sign-in screen for administrative login
  2. Navigate to the page you wish to add anchor links to
  3. Ensure that the Live Edit state is toggled to ON:
    Web Central, Admin User Menu Live Edit Toggled to On.
  4. In the Live Edit pane, click the Widgets tab:
    Web Central, Admin User Menu, Widgets Tab.
  5. Drag and drop an Editor widget to your page:
    Drag an editor widget from the Live Edit pane and drop it on to your page.
  6. Create your content in the front-end (default) view of the Editor widget:
    Use the Editor widget to create your content.
  7. Click the Code View button on the Editor widget toolbar:
    The Code View button of the Editor widget allows you to access the HTML version of your content.
  8. Navigate to the desired section and add the HTML attribute <p id="name"> next to the words you want to link to:
    Using HTML to set an ID tag creates a place for an Anchor Link to go to.
    Note: Replace the word name with a specific term/name for each intended anchor link. Leave the quotation marks as part of the code.
  9. Locate the text that you intend to link to the anchor you just created and add the HTML code <a href="#name">[text]</a>:
    Add your Anchor Link code to the text that should link to your ID tag.
    Note: Replace the name with the specific term/name used in step 7, and leave the quotation marks and pound sign/hashtag.

    Note: Make sure that after the link text, you close the HTML link with a </a>.
  10. Click on the Code View button again to return to the front-end (default) view:
    To return to the default view from the code view, click the Code View button again.
  11. Review the results by checking that the linked text appears as a link. The anchored section from Step 7 should appear as plain text:
    View your content to check that your Anchor Link appears as a link and the text it links to as plain text.
  12. Click the Done Editing button to exit the Editor widget:
    Web Central Editor Widget Done Editing Button.
  13. Click the Save button on the Live Edit bar:
    Web Central Live Edit Page Save Button.
  14. Click the Actions button:
    Web Central Live Edit Bar Actions Button/Dropdown Menu.
  15. Click the Preview Current Page option to view your page in Preview Mode:
    Use the Preview Current Page option to see what the page will look like for end users.
  16. Click on the Anchor link from Step 9 and ensure that it correctly directs to the anchored section:
    Click your new Anchor Link to check that it functions as intended.

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

2 comments

Date Votes
  • Mike Jacoby

    Hello, I'm finding this confusing to follow. The example from step 7 to step 8 don't really match (step 7 uses Upcoming Event as the name and Step 8 uses More Events as the name.
    And I think the code in step 7 isn't correct, it doesn't match the screenshot. When I did try this, although I think I figured out what the instructions were trying to show, the anchor doesn't really anchor to the correct area of the page.

    1
  • David Streb

    The anchor attribute appears to work correctly on a phone (or with a narrow browser display on a desktop) but not on a regular browser screen. As a result, we can't really "cheat" on the location of the id or label tag to make it work accurately on the desktop because then it would be off on a mobile device. Is there a workaround for this?

    1

Please sign in to leave a comment.