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

Hanne   86

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.

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!

by Hanne  September 6, 2017


Enjoyed this article ?

You might also like:

Leave a Comment

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

    • 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!

  • 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)”


    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.

    • 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


    • 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!

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


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

    • Hi Franc,

      Yes, mission accomplished 😀
      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!

  • 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

  • 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, 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.

    • 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!

  • 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?

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

  • 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!

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

    • 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!

  • 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


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

  • 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. 🙂

  • 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

  • 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?

  • 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?

    • 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).

      • Is there a way to make a regular lightbox have the change state option? It seems like the only way to do this change state option is through thrive leads 2 step forms.

      • Hi Steve,

        If with “regular lightbox” you mean the Thrive Lightboxes that are included in Thrive Architect then no. You can think of the Thrive Lightboxes as a light version of Thrive Leads Lightboxes. In order to be able to switch state, you’ll need Thrive Leads and use Thrive Leads Lightboxes.

  • 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!

  • Thanks so much for all your tutorials. I feel overwhelmed when trying to figure out the best steps as all your products offer so much! Is there an overview that offers guidance on where to start and how to proceed for those of us who are new to all this material and functionality?

  • Hey, is it possible to add a full blown (site) page to a thrive lightbox, not just an image or video?
    So basically make it so when they click a button a window opens up with a page of your site in it.

    • Hmm you could… But I would REALL NOT recommend doing that. Why not just open a new page and use the “open new window” option to make it open?

  • Showing a high-quality and larger image on click is such a helpful feature.

    It’s particularly good for photography sites where we can show a complete image only when someone clicks on it.

    Thanks for this guide.

  • Your tutorials are great. I came across this one while looking for a way to block users from filling out a form more than once. I’m using the form to send free vouchers and need to limit it to 1 per person. I didn’t find a solution here, but was wondering if you have any suggestions.

  • Hi Hanne.

    Quote from your text:
    To add a tooltip:
    Select the element you want the tooltip to appear upon.
    Go to the “Animations and Actions” menu
    Select the “Tooltip” action
    Write the tooltip text, select the style and decide where to make it show.
    Save the event and click “Close”.

    But: I cannot find that “Tooltip” Action under “Animations & Actions”. There is only the choice between “Animations”, “PopUps” and “Create Hyperlink”.

    What I am looking for is a way to make a lightbox visible, when the user moves the mouse over an “info”-Button (trigger-event: mouseover). I remember that was possible in the old EventManager. How could I manage this in the latest version of Thrive Architect?

    Thank you!

      • Hi Hanne. Thank you for answering so fast! You´re doing a great job!!

        I found that button which changes from default state to hover state. And now I am able to enter text, which displays, when hovering.

        Is there any possibility to have an image inside the tooltip? Or even better: Is it (still) possible to open a lightbox on mouseover? I think that was possible in the old EventManager, wasn´t it?

        Best regards,

      • Hi Marco,

        No an image is not possible on hover.
        The open lightbox on click is of course still an option 🙂 You can find the full tutorial here but the short version is:
        – Create the Thrive Lightbox (or if you have Thrive Leads a Thrivebox)
        – select the text and insert a link as if you would insert a normal URL
        – search for the name of the lightbox, it will show in the list

  • Hi, thanks for this tutorial. I understand that this seems pretty simple to do while in Thrive Architect. What about outside Thrive Architect though? I’ve been trying to set up a text link that will trigger a Thrivebox / Lead Gen form to pop up on an existing WordPress blog post.

    For the life of me, I can’t figure out how to do this. I have a version live that’s functional, but I know it’s not working properly. Here’s the post: https://www.runthemoney.com/how-much-money-should-i-save-for-retirement/. When you go to the first blue box, click on the “Download the Retirement Savings Cheat Sheet” and the box pops up, but on a different page. I rather have it be an overlay pop-up on the current page. Does that make sense? Any advice? Thanks so much!

    • Not sure what you mean with “on a different page” when I test this, it shows the lightbox as an overlay…
      Did you find out how it works?

  • I’m using Thrive Light Box Popup. It is working Fine.

    The issue is:
    When I click on close button LightBox should be close but now any where I click Light box is closing.
    Pls give me solution Pop up close when I click on close button Only.

  • Great Article Hanne. I definitely agree with your thoughts. Adding images, animated infographics, and videos will definitely improve reader engagement on the webpages.

    Waiting for more articles. Thanks for a great post.

  • Hi Hanne, I am trying to setup something for a Thrive Apprentice lesson where I can ask a question, display an icon and have the answer revealed when the person clicks on the icon. Is there a way to do this?

  • Great article, however, I’ve been looking for hours to try and find a way to open multiple urls with the click of the button.

    I have a script I can use for CF and SwipePages… Just cant get them to work on Thrive Architect… I’ve tried the HTML Attribute and Custom Scripts, the same way as the other page builders, with no such luck

    Any advice from Anyone?

  • Found the answer to my previous comment – I was making it harder than I needed to!

    Simply insert into the HTML.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}