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.

More...

#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.

Caught your attention, didn't I? 

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.

Pro Tip

Do you want to animate multiple elements as one? Such as a paragraph and an icon together, instead of having one fly in after the other?

Use a content box with a transparent border and background to group the different elements, then add the animation event to the content box as a whole.

#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.

Opening a Thrive Lightbox from text link

Now you might have noticed when selecting a text, the popup button is not showing in the Actions and Animations menu.

To open a lightbox on click on a text, simply start looking for the name of your lightbox in the link field of the text and it will show up!

  1. Select the text you want to link and click on the "link" icon.
  2. Start searching for the name of your lightbox and select it from the drop down menu.

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!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

58Comments

wow, various quick tips very useful!
thanks

ps: event manager in content box with multiple elements + event manager on text blocks (#) are my favorites :)

Joerg U Reply

Good Inspirations and nice Tips, thanks!

I did not know about all these choices. Fantastic article. Keep them coming.
Thank you so much!

Michael D Reply

Yes.. I get all this, and I use most of these functions now. In fact I’m pretty much use Thrive exclusively.

My question is this…

Do you guys (ThriveThemes) always use Thrive Content Builder when creating blog posts?

The reason I hesitate to do that is because all of my default settings and global code pretty much go away when I do that.

Then I have to manually insert the stuff on each page.

I’m just curious.

    Hanne Reply

    Hi Michael,

    Seems like you’re talking about two things here, pages and posts.

    We do use TCB on all of our blog posts. This doesn’t strip anything out (you keep exactly the same layout as when you’re using the WordPress editor but it’s just so much easier and fun to make a good looking blog post).

    Landing pages are another beast because then you strip out the theme layout. This is useful if you want to create pages that are focused on only one goal and you do not want any distractions (such as leadgeneration pages or certain sales pages).

    If not you can still use TCB to create your pages, without using landing pages simply create a new WordPress page and click on the “edit with Thrive Content Builder” button. This will allow you to create good looking layouts without losing any theme related options (such as the top menu).

    Hope this helps.

    But YES we use exclusively Thrive Content Builder :) I haven’t typed in the WordPress editor in a very long time!

Lorenzo Reply

You are well advised to produce these tutorials, Thrive is so powerful that many functions easily remain out of sight, even though accessing them is actually very easy!
So keep them coming! :)

The trick I learned here was one I have been looking for for a while: creating no-scroll footnotes directly in the text!

I always looked at these on James Clear’s site and said to myself, hmmm, strange that there is no such function in Thrive…

Check this one:

“You start a new meditation habit and your kids keep barging into the room. (1)”

http://jamesclear.com/behavior-change-paradox

Now I know how to generate the same effect with the Event Manager applied on a text link! That’s fantastic.

Still better would be if:

1. we could fit more text into a single tooltip window (Clear’s are even SCROLLABLE 0_o)

2. we could have an actual “footnote button” or just use superscripts inside TCB’s text elements

…or, you know, just have a no-scroll footnotes function :)

Thank you and keep up the great work, you’re simply the best.

    Hanne Reply

    Hi Lorenzo,

    Thanks for sharing that example I never even thought about this use case. In my mind footnotes are something for study papers ;-) But I can see now how you would use them online.
    This is probably not something we’ll implement any time soon (unless we all the sudden get a huge demand for it).
    But you can definitely use the tooltip to get a very similar effect.

Hanne,

Thanks so much for the hard work you do in putting these posts together. They are fantastic. You always provide actionable content that helps the creative juices flow in my mind as to how I could use something similar on my site.

One of the “problems” with all of the elements available in the various parts is that there is so much available as to be overwhelming. These posts, along with the detailed videos, help me see what is possible.

Have you guys ever thought about writing an ebook that gives an systematic overview of all that you have to offer and why you would want to use each module of the Thrive Themes family?

What would be wonderful would be a source that systematically goes through each module and then links to the fantastic videos that you have already provided.

Thanks for all you do

Terry

    Hanne Reply

    Hi Terry,

    Thanks for the nice words and the terrific suggestion.
    We are working hard on making more user friendly content to help our users get the most out of our products and a big “master” ressource is something we’re working towards!

Nice tips… ! Thank you for that … Now our turn to put this all in practice.

Loving the video hack! Thanks for sharing!

Franc K Reply

This is a great tutorial. I had not been using Event Manager until reading this. Now I am hooked.

Thanks!!!

P.S. With Animated Content Elements, I can only use images. It doesn’t work for me with anything else.

    Hanne Reply

    Hi Franc,

    Yes, mission accomplished :D
    You should see the event manager for other elements too, such as content boxes or buttons.
    If you have the latest version of TCB installed and you still can not find this function be sure to ask our support forum to check it out!

Merci beaucoup pour ces super conseils! A mettre en pratique de suite :)

Andrew Kordyban Reply

Wow great post Hanne. The possibilies are endless!

Thanks, I had no idea that your organization had training video. I just paid to have a website design, and I am heartbroken about the outcome. Thanks for sharing this video

Quentin P Reply

Hanne, I’ve been a “Thriver” ever since it came out and I didn’t know half this stuff! You’ve given me some great ideas too. Thank you.

    Hanne Reply

    Hi Quentin, I’m happy I can still show you some cool new tricks :)

Bruce P Reply

Super helpful! Thanks so much!

Rauno T Reply

Hanne, is there a way to apply Zoom Image Event to all images on a post?

Adding it manually to every single image is slow (I’ve 20+ images in each post) and I haven’t been able to get any Image Lightbox plugins to work with Thrive Themes.

    Hanne Reply

    Hi Rauno,

    No sorry this is not somthing you can add automatically to all of the images.
    But what you can do is:
    – Add the first image and apply the Zoom Image event
    – Copy that image
    – Use the “Change image” button

    This will replace the original image with the new image and the zoom event is still active!

Wan Jeffery W Reply

As usual. Useful and enlightening. I just wondering. Do you always create your blog post using TCB? Is there any plan to integrate with normal wordpress panel? Rather than opening a new view?

    Hanne Reply

    Hi Wan,

    Yes we create all of our blog posts in TCB (can’t even imagine not using it anymore, especially because I like to create “nice looking” blog posts with visual elements etc.).

    TCB is a front end visual editor, while the wp editor is back end. The opening in a new view allows you to see exactly how your real blog post will look like.
    This is impossible with the wp editor.

Lovely stuff. Like coffee for my web designer soul. :)

Hi.. I always wanted to know how to take advantage of Event Manager. Thank you Hanne. I didn’t know “Adding an event to text with #” it is really a hidden gem. New for me tooltip “cool”, show a full size image, I like how Stephanie showed multiple choice and multi-step opt-in forms. It was a fantastic post very organized. Will we have Popover for YouTube and others in the future? It is cool and engage visitors.. I can’t image a popover video in a multi-step opt-in forms or in “quizzes” wow…I like event manager!

    Hanne Reply

    hahahha Juan, I can almost see the wheels spinning in your head ;-)

    We have no plans to make a Youtube Popover (but like I showed you, you can get pretty close with the lightbox! Put the video on autoplay and hide the title and you’ll get almost the same result).

Very nice work. Having too many options could confuse visitors but 2 is a good number offering positive benefits with both. I think it will harness those visitors that otherwise may have left the page. Thanks again Thrive team. I definitely renewed my membership for another year.

    Hanne Reply

    Happy to hear Martin.

    FYI we’re seeing pretty good results with 3 different options too ;-)
    So you should definitely test what works for you!

Beltrán Reply

Hi Hanne,

Thanks for sharing this awesome post

I´m only a beginner using this tool but I´ve realize already that it´s really useful and easy to use

Keen to practise on your tips

Cheers

Brilliant as usual. I have not come across any company that helps businesses produce exactly what they want, in relation to their websites, better than Thrive.

I have tested the Events manager. Excellent. My question is, how do I make the scroll down icon visible? It seems to be in white in colour. I could not find it while doing editing. (screen shot http://imgur.com/a/IxTbH)

Congratulations on your work. I already have Thrive Leads and I’m thinking of buying the theme as well. It would be perfect to have all the features.

Bruce B Reply

Hanne,
I would echo Terry’s comment and several others that Thrive has the ability if not the intention to overwhelm. I have commented on this several times when I have found it impossible to find how to do something in the tutorials and had to resort to help tickets.

While the support is exemplary it is still a waste of your money and my time which could be avoided if the information was more readily available.

You are starting to get there with your videos but his suggestion of an ebook and starting with what you can do and then showing us how to do it is the right way around.

There is always the tendency to produce a new function and then show us what it does. This is the same as telling your prospect about the features before getting around to the benefits.

Whether it is an ebook or Thrive University or some other method it doesn’t matter – but the starting point should be whatever the user wants to achieve – and then tell us which element/function/plugin we need to use to achieve it and then how to do it.

This all sounds like a complaint but really it’s a compliment. There’s just so much to Thrive that it’s difficult to keep up.

And a great video – thank you. :-)

    Hanne Reply

    Hi Bruce,

    Thanks for the comment. Like I said we’re working very hard on this but as you can imagine it’s not a small task :)
    I think we’re heading in the right direction though with Thrive University courses like “How to Build a Conversion Focused Website from Scratch” and others that guide the user from start to finish to accomplish a specific goal.

Will this be available in Architect?

    Shane Melaugh Reply

    All of it already is. A new tutorial will be published soon, as well.

    Hanne Reply

    Updated the article to show how to do this in Thrive Architect, Samuel :)

Phil Reply

Amazingly helpful as always. Once I return from my holiday in Denmark I will start playing around with Thrive Architect.

Can’t wait to get my hands on a computer

Carly Elizabeth Reply

One thing I am greatly missing from the old builder was the ability to choose a “trigger” and then an action. I can no longer figure out how to make an image with the trigger being hover and adding an effect to the action. is there any way to do this anymore?

Matt Reply

I love this plugin/theme.

BUT for changing state you MUST use an existing multi step template?
I’ve just spent a fairly long while creating a multi step optin from scratch and looks like you can’t create a NEW button and link it to another state – is that correct, if so when will this be fixed – or is the only way around it to start again with a multi step template?

    Hanne Reply

    Hi Matt,

    No you do not need to use an exiting template. You can use the actions and animations menu and add a new action called “switch state” (You can find this in the custom integrations option).

Paul C Reply

I am blown away by all that you have done with the release of Thrive Architect and all the supplementary tools and functions, as you have here. You guys are simply the best, across the board with your attention to and commitment to excellence. Thank you very much, I am so glad to be a member here!