How to Apply Links (Hyperlinks) in Thrive Architect
In Thrive Architect, there are many ways in which you can link a text, a button or other elements. There are fundamentally two different ways in which links are applied in Thrive Architect. Those are:
- Inline text links/Text Hyperlinks
- Links in the "Animation & Action" options.
Some elements also have link options made more conveniently accessible, as we'll see below.
Let's look at these two linking options first and then, walk through various special cases:
1) Create a Text Hyperlink
This is the most basic type of link. It creates a text link that will send the visitor to a new web page, on click. Here's how to do it:
- Click and drag to select the text you want to link
- Then, click on the linking option (chain icon) from the "Panel Options" that appeared on the upper-center part of the editor:
- In the drop down that opens, you will see that the "Static" section is opened, displaying the text that you have selected and below it you can see the URL field:
- Complete the URL field with the URL (starting with http:// or https://) that you want to link the text to:
Note: The URL that you enter here can also contain shortcodes. In this case, when you apply the link to the element, the shortcode will also be rendered. Thus, when a visitor will click on the link, the shortcode will be executed as well.
- If you want to link to a page that you have already created and published on your own website, you can start typing the name of that page in the URL field. You will see search results of matching pages and you can link to the one you want, by clicking on it:
There are 3 more options in the "Static" section of the linking options:
- Text: this is the text visitors will click on to go to your link. By default, this text is the word(s) you have selected to create the link. If you change the link text, the words you selected will change as well:
- Open in new tab: if this is checked, the link will open in a new browser tab. If it is unchecked, the link will open in the same browser tab:
- Nofollow: when checked, it will tell search engine crawlers to not follow the link and not crawl the page you linked to. This is an SEO related setting and if you're not sure what it is about, just ignore it:
Note: The "Open in new tab" and "Nofollow" options are available whenever you create a link and they always have the functions described above.
Last but not least, you have to click on the "Insert" button to apply the link to your selected text:
How to Change an Existing Hyperlink
To modify a hyperlink you have already created, simply click on it or select the text with the link when you're editing the page with Thrive Architect.
Then, click on the linking option (chain icon) from the "Panel Options" that appeared on the upper-center part of the editor:
This will open the drop-down with the linking options:
You will see that you can easily replace the link and/or the text from the fields. You just have to delete the current ones and replace them with the new link/text.
After you have made the necessary changes, you will have to click on the "Update" button to save them.
The "Remove" option can also be found here. If you click on the "Remove" button, then the link will be deleted altogether from the text.
2) Create a Link from (Almost) Every Other Element
When you're editing something that is not a text, you can add a link to that element like this:
- Select the element you want to create a link for.
- In the left sidebar options, go to the "Animation & Action" options and click on the hyperlink (chain icon) option:
- The drop down with the linking options will open:
The linking options here work exactly the same as those for the text hyperlinks/inline text links, described above.
Just like with the linking options of the "Text" element, here, you can also add a link and apply it to your element.
- First, type either a URL or a search term in the input field to find and insert the link.
- Then, choose whether or not you want this link to open in a new tab or be no-follow, by checking the boxes next to these options.
- When you are done, click on the "Apply" button to add the link to the element.
This way, through the "Animation & Action" options, you can add a link to almost any element you use in Thrive Architect.
For example, you can apply a link to a Content Box, which will mean that clicking anywhere inside that content box will open the link.
Quick Access Link Options
Some elements (for e.g. the "Button" element, the "Content Box" element, or the "Image" element) have a quick access link option as well, in addition to the "Animation & Action" one. This is purely for convenience. There is no "right" or "better" way to apply the link, you can use whichever option you prefer.
You can find the quick access link options in the "Main Options" of the element, in the left sidebar.
When you select a button for example, you can enter a link directly in this field:
When you select an Image or a Content Box, you will first have to activate the "Add link to image/to Content Box" option and then, enter the URL you want to link the element to in this field:
3) Linking to a Different Position on the Same Page (Jump links/Anchor links)
Sometimes, you want to link to a specific point on the current page instead of linking out to a different page. There are two ways in which you can do this in Thrive Architect:
- One of the ways to do this automatically, on a page that has many "chapters" you want to link to, is by using the "Table of Contents" element.
You can learn how to use this element in this tutorial.
- The other way is adding jump links/anchor links manually. This way you can add jump links to "Text" elements, to Buttons, Images and Content Boxes. You can set the anchor (the part where the link will jump to) to be any element on your page.
Here are the steps you need to take, in order to apply jump links:
Adding Jump links to "Text" elements
First, select the text you want to apply the jump link to. Then, click on the linking option (chain icon) from the "Panel Options" that appeared on the upper-center part of the editor:
This will open the drop down with the linking options for the text. This drop down has two sections: the "Static" and the "JumpLink" sections. The "Static" section is selected by default, so you will have to click on/select the "JumpLink" section to access the options you need:
The text that you have selected will appear by default in the text field. Under it, you will see the "Smooth Animation" option:
If you select this option, then an animation will also be added when you apply the jump link to the text. This means that, when users will click on the jump link you have set up, the window will smoothly scroll to the anchor/the target element.
If you leave the "Smooth Animation" unchecked, then, instead of seeing the animation, the users will be taken directly, with an 'instant jump', to the anchor/the target element, when clicking on the jump link.
After you have chosen whether to use the "Smooth Animation" or not, the next step is to select your target element from the page. To do that, click on the "Select Target" button from the linking options drop down:
This will activate the "Select Target" mode on the page, which is represented by the orange borders. You can see that in this "Select Target" mode, the left sidebar is disabled to provide you with instructions for what you need to do next:
Look for the element on the page that you want the jump link to lead to. You can scroll up or down the page to find this target element. This can be any kind of element that can is on your page.
Once you have found it, click on it to select it. After you select the target element, an orange dashed border will be displayed around it and the "Add Jumplink" button (in the bottom-center part of the page) will become orange as well. Thus, it will become active:
All you have left to do is to click on the "Add Jumplink" button and the jump link will be inserted to the text successfully. You will be taken out of the "Select Target" mode automatically and taken back to editing the text that you have added the jump link to.
Modify or remove a jump link added to a text
If you want to modify/remove the jump link you have previously added to a text, you will have to click on the text again (or select it). Then click on the linking options (chain icon) from the "Panel Options" that appeared:
This will open the drop down with the linking options and the existing setup. You will see the text that is linked, as well as the target element.
If you click on the target element, you will be taken to it, it will be located on the page:
In order to modify the target element, simply click on the "Modify target" button from the drop down:
This will open the "Select Target" mode and you can select a new target, just as mentioned above.
If you want to remove the jump link altogether, then simply click on the "Delete Target" button from the drop down and the jump link will be deleted:
- Button: if you want to add a jump link to a button, once you have selected it, look for the "Button Link" option from the "Main Options" in the left sidebar. By default, the hyperlinking will be selected, so first, you have to click on the jump link option (anchor icon):
- Image and Content Box: in the case of an image or a content box, you will first have to activate the "Add Link" option (by clicking on the switch next to it) to be able to see the linking options:
Once you have activated it, the linking options will appear, just as in the case of the button, and you can click on the jump link option (anchor icon):
You will see the "Smooth Animation" and the "Select Target" options. These work the same way they do in the case of the "Text" element.
If you want the jump link to take the users to the target element using a smooth scrolling, then check the "Smooth Animation" option. If you want the link to take them directly to the target element, without the animation, then, simply leave the "Smooth Animation" unchecked.
Next click on the "Select Target" button to open the select mode. Scroll up or down on the page until you see the element you want this jump link to take your users to (from the button/image/content box).
After you have found it, click on it to select it and last, but not least, click on the "Add Jumplink" button, from the bottom-center part of the page, to insert the jump link:
If you want to modify or remove the jump link you have added to a button, an image or a content box, then, simply select the respective element again and use the "Remove Target" or the "Modify Target" buttons, from the linking options in the left sidebar:
4) Linking to a specific position on a page & use the link on another page
In certain cases, you may want to add an anchor link to a specific point on the current page (Page 1), and then use that link on a different page (Page 2), to refer back to that specific point of the current page. Follow these steps to do this:
Add an ID to the specific point on the current page
First, go to the specific point you want to link on the current page. Click on the element that is in that point, in order to select it.
The options of the element will appear in the left-sidebar. Look for the section with the "HTML Attributes" options. When you have found it, click on it to open it:
Then, in the field from the ID section, enter an ID, a word(s) that will help you identify this specific point on the page:
This will create an ID for that section and you will be able to use it to create the anchor link you need.
Next, save the page, to make sure the ID is assigned to the element. to do this, click on the "Save Work" button, from the bottom-left part of the page:
Use the ID to create the anchor link
Now, using that ID you have assigned for the element, you can create the anchor link to that specific point on the page that you need. First take the link of the current page and then add a "#" to it, followed by the ID.
For example: https://example-page.com/#exampleid
Use the anchor link on another page
Since you have the anchor link to the specific point on the page, all you have left to do it to use this link. Go to the other page, where you want to add the reference to the current page.
5) Inserting a Dynamic Link
As you might have noticed, there are three available types of hyperlinks: "Static", "Jump Link", and "Dynamic.
Inserting a dynamic link is is a more complex option, and this is why we have a separate, more comprehensive article about how to use the "Dynamic Link" feature, which you can find here.
Note: If you have set up a "Text" custom field type using the "Advanced Custom Fields" plugin, and you want to use it on the page or post that you are editing, you can add custom fields in the form of a "Hyperlink".
The ways in which you can do that are described in more details in this article.
Notice that, if you are using the "Advanced Custom Fields" plugin, when you select the source of the "Dynamic Text", you will be able to select the "Custom Fields" option:
Then, you simply choose the custom field that you want to use, from the second field of the pop-up.
Keep in mind that you will only see the "Custom Fields" option from the list if you have followed the steps presented in this article accordingly.
6) Open a Larger Image on Click
This is a special case of linking: you don't want to send someone to a different page or a different part of the page, but you do want to expand an image on click.
There are two ways to do this:
Zoom an image on click (the same image)
Select an image on the page and check the "Open full size image on click" box from the "Main Options" in the left sidebar:
Now, when a visitor will click on the image, a full size version of that image (or the largest size that fits the visitor's screen) will open up on click.
Please keep in mind, that this option is only useful, if the original size of the image is larger than the size that is being displayed on your page.
Open a Different Image on Click
If you want a different image to be opened on click, or you want an image to be opened on click of an element that is itself not an image (e.g. a button), here's how to do it:
- Click on the element you want to link and go to the "Animation & Action" options in the sidebar. From there, click on the "Popups" section (second icon):
- Select "Open image" and click on the "Choose Image" button:
- In the Media Library that opens up, select or upload the image you want to open on click, click on "Insert into post" and then, on "Apply".
7) Open Videos and Opt-In Forms on Click
Similar to how you can open an image in a lightbox, as described above, you can also open videos and opt-in forms using the same method.
The options are also in the "Popups" section (second icon) of the "Animation & Action" options:
- Open Thrive Lightbox: opens lightboxes that are associated with landing page templates.
If you want to create a new Thrive Lightbox or edit an existing Thrive Lightbox, go to your WordPress admin dashboard and in the sidebar you will find the "Thrive Lightboxes" menu.
- Open Thrive Leads ThriveBox: opens lightbox opt-in forms you have created with Thrive Leads.
- Open Image: opens an image in a lightbox.
- Open Video: opens a video in a lightbox.
If you would like to find out more about the "Animation & Action" options, please check out this tutorial.
Hopefully, this article was useful for you. If so, please give it a smile below :)