How to Apply Links (Hyperlinks) in Thrive Architect
In Thrive Architect, there are many ways in which you can link 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.
- 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
- Click on the "link" icon in the in-line text menu that appears:
- In the box that opens up, you can enter a URL (starting with http:// or https://).
- 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. You will see search results of matching pages and you can link to the one you want by clicking on in:
There are 3 more options in the link settings box:
- Text: this is the text visitors will click on to go to your link. By default, this text = the words you 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 crawl the page you linked to. This is an SEO related setting and if you're not sure what it's about, just ignore it and don't worry about it.
Note: these "open in new tab" and "nofollow" options are available whenever you create a link and they always have the functions described above.
- The final step: click "Insert" to apply the link to your selected text.
How to Change an Existing Hyperlink
To modify a hyperlink you've already created, simply click on the link when you're viewing the page with the Thrive Architect editor active. You will see these icons appear:
On hover, each of the icons will display a label that explains what the icon does.
From left to right, the functions of these icons are:
- Back to text formatting options (to apply bold, italic etc.)
- Open the link - this opens the link in a new tab so you can preview/test the link.
- Edit the link options - this opens the link settings box where you can make changes.
- Remove the link - this completely removes the link. The link returns to being regular text on the page.
2) Create a Link from (Almost) Every Other Element
When you're editing something that isn't text, you can add a link to that element like this:
- Select the element you want to create a link for.
- In the sidebar options, go to "Animation & Action" and click on the hyperlink icon:
- This settings box will open:
The link options here work exactly the same as those for the inline text links, described above. You can also either type a URL or a search term in the input field.
In this way, through the "Animation & Action" options, you can add a link to almost any element you create 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 have a quick access link option, 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.
When you select a button, you can enter a link directly in this field:
Similarly, when you select an image, you can enter a URL to link to in this field:
3) Linking to a Different Position on the Same Page (Anchor Links)
Sometimes, you want to link to a specific point on the current page instead of linking out to a different page.
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.
You can also do this manually, for any element on your page. There are two steps to it:
- Set your anchor on an element.
- Link to that anchor from a text, button or whatever else.
Here's how to set the anchor:
- Select the element on your page that you want to jump to, when the link is clicked.
- In the options sidebar, go to "Styles & Templates" and enter something in the "ID" field:
You can enter any name for this ID, using numbers, letters, underscores and dashes. Don't use spaces or special characters in the ID name.
You don't need to confirm this entry by clicking on a save button. Whatever you enter in this field will be applied as the element's ID.
Now, you can link to this point in the page by linking to "#your_id_here". For the example above, the link would look like this:
The link format is the hash symbol (#) followed by the ID name, with no spaces in between and no http:// or www. before.
4) 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 (of an Image)
Select an image on the page and check this box in the image options in the sidebar:
Now, when a visitor clicks 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, in a lightbox. Note that this option is only useful if the original size of the image is larger than it's being displayed on your page.
Open a Different Image on Click
If you want to open a different image on click or you want to open an image 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. Click on the "Open Lightbox" icon:
- Select "Open image" and click on the "Choose Image" button:
- In the media manager that opens up, select or upload the image you want to open on click.
5) 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 "Open Lightbox" setting in "Animation & Action":
- 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 dashboard and in the sidebar you'll find the "Thrive Lightboxes" menu.
- Open Thrive Leads ThriveBox: opens lightbox opt-in forms you've created with Thrive Leads.
- Open Image: opens an image in a lightbox.
- Open Video: opens a video in a lightbox.