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.
Who can use this feature?
Instructions
- Navigate to the page you wish to add anchors to
- Ensure that Live Edit Is On
- Select the Widgets tab on the left-hand side
- Drag and drop the Editor widget to your page
- Create your content in the normal Editor screen
- Click the Code View option on the toolbar
- Navigate to the desired section and add the HTML attribute <p id="name"> next to the words you want to link to
- Note: Replace the word name with a specific term for each instance. Leave the quotation marks as part of the code.
- Scroll to where you want to add the link that users will click on to be directed to the section in step 7 and add the HTML code <a href="#name">[text]</a>
- Note: Replace the name with the specific term used in step 7, and leave the quotation marks and pound sign/hashtag.
- Note: Ensure that after the text you close the HTML link with a </a>.
- Re-click on the Code View button to return to the regular view
- Ensure that one of the sections is a link and the other appears as just plain text
- Click the green checkmark to exit the Editor
- Navigate to the top of the screen and select Save
- View your page in Preview Mode
- Click on the Anchor link and ensure that it directs to your desired section
Feedback About the Article
Let us know what was helpful or not helpful about the article below.2 comments
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.
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?
Please sign in to leave a comment.