Live Edit


 






Add Anchors

Who can use this feature?

System_Admin.png Slash.png Owner.png Slash.png Publisher.png Slash.png Author.png

 

 

Overview

Users may add HTML anchors to a page to help assist readers with navigation. Anchors are shortcut links that lead from one section of a page to another section on the same page.

Instructions

  1. Navigate to the page you wish to add anchors to
  2. Ensure that Live Edit Is On
    ensure_that_live_edit_is_on.jpg
  3. Select the Widgets tab on the left-hand side
    select_widgets.jpg
  4. Drag-and-drop the Editor widget to your page
    drag_and_drop_the_editor_widget_onto_the_page.jpg
  5. Create your content in the normal Editor screen
    create_content_in_the_normal_editor.jpg
  6. Click the HTML/Code View option on the toolbar
    select_the_HTML-Code_View_on_the_toolbar.jpg
  7. Scroll to the section you want to navigate to and add the HTML attribute id="hello" next to the words you want to link to within a page. 
    enter_the_id_attribute.jpg
    • Note: Replace the second name with a more specific code. Leave the quotation marks as part of the code.
  8. Scroll to the part you want users to click on to get to a different section and add the HTML code <a href="#name">[text]</a> next to the words you want to link to
    enter_href_code.jpg
    • Note: Again, replace name with a more specific code, and leave the quotation marks and pound sign/hashtag.
    • Note: Ensure that after the text you close the HTML link with a </a>.
  9. Re-click on the Code View button to return to the regular view
    re-select_code_view.jpg
  10. Ensure that one of the sections is a link and the other appears as just plain text
    ensure_that_one_section_is_a_link_and_the_other_is_plain_text.jpg
  11. Click the Green Checkmark to exit the Editor
    select_the_green_checkmark_to_close_the_editor.jpg
  12. Navigate to the top of the screen and select Save
    select_save_to_save_page.jpg
  13. View your page in Preview Mode
    select_preview_current_page.jpg
  14. Click on the Anchor link and ensure that it directs to your desired section 
    click_on_desired_anchor_link_to_check.jpg



I'd Like to Request an Enhancement

2 out of 2 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Michael 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.

  • Avatar
    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?