Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

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.

    Using a <p> element inside a table can cause issues. This is because <p> tags are a block-level element, which adds margins before and after itself. We recommend using <div> or <span> within a table. 
  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.
Was this article helpful?
4 out of 4 found this helpful
Return to top

Feedback About the Article

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

0 comments

Please sign in to leave a comment.