One Page Text Link Element
The One Page Text Link Element is a link that scrolls to another part of the same page. It pairs with the Menu Anchor Element: the anchor marks the target, and this link takes the visitor there with a smooth scroll instead of an abrupt jump.
Use it for “Back to top” links, for “See pricing below” hints under an introduction, or for small navigation lists on long landing pages. The clickable part can be plain text or any HTML, such as an image or an icon.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The One Page Text Link Element
First place a Menu Anchor Element at the target section and give it a Name, for example pricing. Then add the One Page Text Link Element where the link should appear and enter the anchor in Name Of Anchor with a hash in front: #pricing.
Write the clickable content in Text or HTML code. Plain text becomes a text link in your site’s link colors; HTML such as an image tag becomes a clickable image. Use CSS Class or CSS ID if you want to style the link further.
On click, the page scrolls smoothly to the anchor and takes a sticky header and the admin bar into account, so the target section starts just below them. The link also works with any other element that has a matching CSS ID, for example a container.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Name Of Anchor | Unique identifier of the anchor to scroll to on click. Anchor names need to be prefixed with a hashtag, for example #anchorname. |
| Text or HTML code | Insert text or HTML code here (e.g: HTML for image). This content will be used to trigger the scrolling to the anchor. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Always include the
#in Name Of Anchor, and leave it out in the Menu Anchor’s Name. - The name must match exactly, including lowercase letters and hyphens.
- Write a link text that says where it leads, such as
Jump to pricing. Screen reader users often hear link texts on their own. - An anchor on another page can be reached with a full address, for example
/services/#pricing. - To make a button instead of a text link, use the Button Element with the same
#nameas its link.