One Page Text Link Element

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.

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.

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.

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.

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.

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