One Page Text Link Element

Last Update: March 11, 2024

The One Page Text Link Element is a very simple element, that allows you to add an anchor link anywhere on your page. This connects with an anchor id, somewhere else on the page.

By setting up an anchor link, and then adding an anchor id somewhere else on the page, potentially with the Menu Anchor Element, users can click on the anchor link and be taken directly to the section with the anchor id. The anchor link can be plain text or HTML. See below to read more about this handy element. For more information on anchors generally, follow the link below to the Anchor Scrolling documentation.

The One Page Text Link Element is an inline element, which means it can be accessed from the Inline Editor and can also be used through the Avada Shortcode generator. But it can now also be used as a normal stand-alone Element, increasing its versatility. There are various ways to use it, depending on whether you want to use it in a standalone line of text, in amongst other paragraph text, or you want to use some other element, like an image, as the anchor link.

Usage Example: This is an Anchor Link created with the One Page Link Element, that will scroll down to the Anchor ID lower on the page when clicked.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

One Page Text Link Element via Avada Builder Element Generator

If you’re using the Back End Builder and you want the link to be a part of a paragraph of text, using the Avada Builder Element Generator is the way to go. This method is very simple.

Step 1. As can be seen in Example 1 below, simply select the text you want to be the link in the Text Block Element, and then click the Avada Builder Element Generator link. The usual Element Window pops up, and here, you’d select the one Page Text Link Element.

Step 2. The One Page text Link Element dialog appears, with your selected text already populating the Text or HTML code option. All you need to to now, is to give your Anchor a name, starting with a hastag symbol. As you can see in Example 2 below, the Anchor name is #anchor.

Step 3. When you’ve added your anchor name, click Insert. This brings you back to the Text Block Element, with the code added, as can be seen in Example 3. From here, just save your changes, and go and add your Anchor Id somehwere else on the page. See the Adding Anchor IDs section below for more detail.

Example 1
One Page Text Link Element Example 1
Example 2
Inline Editor - Step 2
Example 3
One Page Text Link Element Example 3

One Page Text Link Element via Inline Editor

If you’re using Avada Live and you want the link to be a part of a paragraph of text, the method is almost identical to the situation above. The main difference is that in Avada Live, it’s easiest to use the Inline Editor to add the One Page Text Link Element.

Step 1. As can be seen in Example 1 below, simply select the text you want to be the link to be, and the Inline Editor appears. The Plus Button at the end gives you access to the Inline Elements, as can be seen in Example 1 below.

Step 2. Select the One Page Text Link Element and the Element dialog appears in the Sidebar. Complete the Element options in the same way as usual.

Example 1
Inline Editor - Step 1
Example 2
Inline Editor - Step 2

Adding The Element On Its Own

You can also add the one Page Text Link Element on its own, as a normal stand-alone Element. This is useful when you want the link to be text by itself, not as part of a paragraph, or you want to use HTML content as the anchor link instead. The process is basically the same.

Step 1. Add the Element where you want it to display in your content. The usual dialog appears.

Step 2. Add both your Anchor Name, and the text or HTML code you want to be the trigger. If you want, you can use any HTML content to be the trigger, such as an image. Avada Shortcodes will also work. In the Example below, I have used the Avada Builder Element Generator on a blank page to get the shortcode I need for an image, and then I’ve pasted that shortcode into the One Page Text Link Element. On the front end, this generates an image, which links to the Anchor ID added further down the page.

Using An Image As An Anchor link

Adding The Anchor ID

This Element works in conjunction with an Anchor ID. There are a couple of ways to add these. One way is to use the Menu Anchor Element. Simply place this Element wherever you want on the page, and add the corresponding anchor name to your Anchor Link, only this time, without the hashtag. See the Menu Anchor Element document for more details.

Alternatively, you can just use the CSS ID field, which is found in almost all Elements to add your Anchor ID. In this way, you can link to virtually any content on the page you wish. Just ensure there is only one Anchor ID per page, or it won’t know which one to scroll to.

Inline Elements In Avada Live

Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.

Inline Editor > Inline Elements

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

HeadingDescription
Name Of AnchorUnique identifier of the anchor to scroll to on click. Anchor names need to be prefixed with a hastag, ex: #anchorname.
Text or HTML codeInsert text or HTML code here (e.g: HTML for image). This content will be used to trigger the scrolling to the anchor.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.