6 Examples of Using Interactive Elements on your Website to Improve Visitors’ Experience

Opening a link is only the beginning of what can happen when a visitor clicks on a button, text or image. 

There are so many more things that could occur. 

You could show them additional instructions, a light box, a video ...

This is actually very easy to do with Thrive Architect, but we understand that you might not have time to explore and discover exactly what's possible and how to go about it.

That's why we created this master post to show you some nifty things you can do that you probably didn’t even realize were possible.

#1 Show a Full Size Image

When you’re writing a blog post and you’re using screenshot images, it can be difficult to find the right balance between how much space the image takes up in the post and the readability of the information on the image.

This is where the "Open full size image on click" ​option comes in.

To create an image that can be zoomed when clicked, upload your image in the original (big) size. Add it to your article and resize it in a way that looks visually appealing.

Or if you're concerned about website speed (which you should) you can upload a smaller image to display on your site and once you clicked on the "Open full size image on click" you can actually select another image (the big image).

This allows to load only the small image on page load and the big image only when someone clicks. This is particularly helpful if there is a huge difference between the on screen size and the full size Eg. a gallery type of preview (200px) that opens a huge photo (3000px)

To change the picture that will be shown on click, go to the "Animations and Actions" menu. Here you can see that the click action is added and you can edit it by clicking on the pencil icon. Now, you can click on the image name, this will load the media library and you can pick the big image.​

#2 Give Additional Instructions

Sometimes your reader needs a little guidance. Showing a text bubble on an element when they hover their mouse will help with that. This is referred to as a tooltip.

One way to use this is to add an image such as a question mark, and use the "Tooltip" event to give additional instructions.

Showing a tooltip is an event that occurs on mouseover rather than on click. You'll be able to add a tooltip to a linked element. This allows you to inform your visitors about what will happen when they actually click on the image or button.​

Hover over our support guy to see what happens!

To add a tooltip:

1. Select the element you want the tooltip to appear upon. 
2. Go to the "Animations and Actions" menu
3. Select the "Tooltip" action
4. Write the tooltip text, select the style and decide where to make it show.
5. Save the event and click "Close".

Please note that because this event occurs on mouseover, it will not be visible on mobile devices.

#3 Add Animated Content Elements

Have you seen those slick landing pages with elements that appear when you start scrolling and wished you could do the same?

Well, you can!

Thrive Architect allows you to add view port animations to any element in your blog posts and pages.

While we’re not a big fan of elements flying all over the place, a well thought out animation can attract the attention to the most important information on the page.

For this effect to occur:

• Select the element you want to animate (this can be a paragraph, an image, a content box,...)
• Go to the Animations and Actions menu and select "CSS animations"
• Pick your animation and decide if you want to loop it. If you loop it the animation will appear each time the element comes into view port, if you don't it will only happen the very first time.

You'll be able to choose from tons of different animations.

#4 Display a Video

If you do not want to embed a video into a page or post directly, but you don't want your visitors to leave your site either, using a video that appears in a lightbox upon click is the way to go. This is called a video popover.

This will allow you to have these cool full width background images with a play button on them that simply open a video player.

To add a video popup to any element:

• Select the element (such as a button, an image, a content box,...)
• Go to the Animations and Actions menu
• Select the "popup" option
• Select "Open video"
• You'll be able to select the source of your video (Wistia, Vimeo, Youtube or Custom URL)

Click on the button below to see the result (you can ignore the actual video or take a few minutes to learn about gradients in Thrive Architect 😉 )

#5 Display an Opt-in Form

I'm sure you've seen them around, those images or text links that open a lightbox when you click. They are called 2-step opt-in forms. The first step is the click and the second step is displaying the opt-in form, hence the name 2-step opt-in form.

They allow you to have lead generation ​elements without cluttering your website and making it look like a sign-up billboard.

There are actually two possibilities to do this with Thrive Themes tools.

The best method for you will depend on whether you're using Thrive Leads for lead generation or only have access to Thrive Architect.

Thrive Architect has a build-in function for 2-step opt-in forms called Thrive Lightbox. The reason for this is that we wanted to allow this functionality for all of our customers even those who are not using Thrive Leads, our dedicated list building plugin.

Thrive Lightboxes in Thrive Architect is basically a lite version of ThriveBoxes available only in Thrive Leads.

I do encourage you to use ThriveBoxes over Thrive Lightboxes whenever possible because you'll be able to do tons of extra things that will allow you to boost your conversions, such as:

• Know the performances of the opt-in form; you'll be able to see the exact conversion rates for each ThriveBox.
• A/B test the opt-in form​; you'll be able to test different forms, designs, animation,... against each other.
• If you use the same ThriveBox in different places on your website, you'll also be able to see what content is converting most visitors into subscribers with the detailed Leads Reports analytics.

That being said, let's take a look at the options for adding a 2-step opt-in form to your content.

​If you're not using Thrive Leads and you have not created the Thrive Lightbox yet.

If it is the very first time you set up the 2-step lightbox, you should first create you lightbox from within the WordPress dashboard in "Thrive Lightboxes".

1. Click "Add New" in the Thrive Lightboxes menu
2. Give the lightbox a name
3. Customize it with Thrive Architect

When your lightbox is ready, go back to the page or post you want to add the 2-step lightbox to.

Select the element your visitor will click on to open the lightbox. This could be an image, a button, a content box or simply a line of text.

Go to the "Animations and Actions" menu and select popup.

Next you can select the action "Open a Thrive Lightbox", pick the lightbox you want to show and add an entry animation.

If you're using Thrive Leads ThriveBoxes.

When you're using Thrive Leads' ThriveBoxes, first step will be to create a ThriveBox.

To do so, go to your Thrive Leads dashboard and add a new ThriveBox.

You can find step by step instructions here.

Now, linking a ThriveBox to any element on your page is done exactly the same way as linking a Thrive Lightbox but by selecting "Thrive Leads Thrivebox" in the Animations and Actions menu.

​​
#6 Create Multiple Choice Opt-in Forms

The Animations and Actions menu is not only available in Thrive Architect, but also within Thrive Leads.

In Thrive Leads, this allows you to:

• Switch states
• Close a lightbox​

This becomes very useful when you start playing around with multiple choice and multi-step opt-in forms. These types of opt-in forms allow you to ask your visitor to take action first (click on a button) before presenting them with an opt-in form. It's one of the easiest ways to increase conversions, by showing a different opt-in offer based on which button they clicked.

When you start creating a new opt-in form in Thrive Leads, you can choose a Multi-Step opt-in form template. 

This will automatically create an opt-in form with multiple states, with the buttons on the default state already linked to the correct subsequent states.​

But what if you accidentally delete the original button from the template? Or if you prefer one of the “normal” opt-in form templates but you want to make it a multi-step opt-in form?

This is 100% possible with the Animations and Actions menu

Here’s how it works.

• Thrive Leads allows you to create multiple states on any opt-in form.
• You can then use the Actions to switch states when a selected button, image or line of text is clicked.

​

Your Turn to Discover the Power of the Animations and Actions menu

What do you think? Did you know you could do all of this? Or did you learn some new tricks? I would love to hear your experiences in the comments!