IMPORTANT: This is for advanced users only. Please do not use this if you are unsure or if you do not have an understanding of HTML.
You can create an URL link that takes people to a specific position within a page instead of simply loading the page from the top.
This article describes how you can use the Text Widget to edit the HTML source code and set an anchor location within a page. You can use this anchor in an URL link to land people at that location in your page.
For example, halfway down a page about "Pricing" you might have content that describes "What is included". This article shows how to set an anchor so that people can click a link such as www.sporty.co.nz/v2/pricing#what_is_included to be taken directly to that content down the page.
1. Add the Text Widget to the position in your page where you'd like people to land when they click your link (or use an existing Text Widget if there happens to already be one at the desired location).
2. Type an appropriate heading into your Text Widget. In this example, our heading will be "WHAT IS INCLUDED IN THE PAID PLANS".
3. Click on the HTML source code icon from the editor ribbon of the Text Widget (note that your mouse cursor needs to be active in the text area of the Text Widget for the editor ribbon to appear)
4. This opens the HTML source code view of your text. To set an anchor, simply add the following HTML to your source code:
<p id="what_is_included"></p>
Note: in this example, replace the text "what_is_included" with whatever anchor text is meaningful to you, since this be seen in the URL link such as: www.sporty.co.nz/v2/pricing#what_is_included
The way the HTML source code appears in this example (which the anchor code highlighted blue) is:
When finished, click OK at the bottom right of the HTML source code editor. Then click to Save your changes in the Text Widget.
5. Now you can add the anchor text (preceded by a hash "#" character) to the end of the URL for the page. In this example, our page URL is www.sporty.co.nz/v2/pricing and so we add #what_is_included to this URL to create www.sporty.co.nz/v2/pricing#what_is_included
Now, when people follow this URL link, it will take them to the location of the anchor down your page.
TIPS:
- You can set more than one anchor location on a page, but each anchor name on a page must be unique per page (you cannot use the same anchor name in two locations on the same page).
- Use the underscore "_" character between words to avoid character spaces since these are not valid for URL links.
- You can use the URL link that includes the anchor name when setting links from buttons on your website or in Facebook posts or emails - anywhere you want to make it easy for people to go directly to a specific location down your page.
- When someone clicks your URL link with the anchor, the page will load with the anchor location at the top of their web browser. Therefore, if your page happens to have a menu or header element that is also set to be fixed at the top of the browser, your anchor will reside behind the menu or header element. Therefore, you can include some breaks after the anchor to push the visible page content lower, so it is not hidden from view behind your menu or header element. For example: