9 Ways To Use Toggle Elements To Boost Your Conversions

Much like a magician, sometimes it’s wise not to show ALL of your content cards to online visitors at once.

Why?

Because in some content scenarios, it’s more useful to reveal your content instead. 

In fact, strategic reveals can even be used to boost a particular conversion goal or make your content more engaging for readers.

But just like it is for a magician, presentation is important. So if you want to make your content reveals look professional, nothing makes that easier to do than the Toggle element inside Thrive Architect and Thrive Theme Builder.

Want to learn 9 ways you can start using our Toggle element to strategically stage clever “Ta-da~!” moments within your own WordPress content?

Read on to see us reveal them all one... by... one…

More...

But First, What Does the Thrive Toggle Element Do?

Basically, the Toggle element is a unique kind of button: when pressed, it reveals content in a dropdown box:

Default Toggle Template Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus commodo nibh, ut elementum velit sollicitudin at. Donec suscipit commodo risus. Nunc vel orci eget ligula elementum consequat. Fusce velit erat, convallis scelerisque aliquet ut, facilisis egestas tellus. Quisque sit amet sapien placerat, ultricies sapien ut, vestibulum ex.

Looks simple enough, but this element is more powerful than you think.

Inside Thrive Architect (our page builder plugin) or Thrive Theme Builder (our WordPress theme), you have access to all sorts of features with it.

Like multiple-column and multiple-row toggles that can be set to "Auto-collapse" so no more than one toggle is ever open at the same time:

Multiple

Your Toggle elements...

Multiple

...as well as...

Columns

...can be setup to have up to 4 columns...

Rows

...an infinite number of rows.

On top of that, you can have toggles that Jumplink from anywhere on a page to a Toggle — and have your Toggle destination open immediately.

Click here to see this jumplink Toggle feature in action:

Jumplink Toggle Example

See how the jumplink scrolls down to this location and opens the toggle?

You can also have your Toggle elements automatically open as soon as your page loads (instead of being closed as is the standard Toggle element behavior):

Open on Page Load Toggle Example

See how this Toggle element was open already without having to click on it first?

And as you can probably tell by now, the Toggle element has several pre-designed templates to choose from with your Thrive editor window!

To access the Toggle element template library, first drop a Toggle element onto your Thrive Editor window. Then, click on the "Template" box under the Template Options left-sidebar tab. Finally, select your desired template from the popup lightbox that appears.

By showcasing these different features, this article will explain the many ways you can start using the Toggle element to its fullest potential.

But first, you’re probably wondering...

Are Toggle Elements SEO Compatible?

Let’s keep this answer short and sweet.

YES.

Toggle element content is part of the HTML code of your page — so it’s always readable by the search engines.

That means, even when a Toggle element's content isn't viewable by visitors (i.e. when it's closed), the search engine web crawlers can still read it to help index your pages.

So now that we’ve got that big question out of the way, let’s look at how you can start using Toggle elements to optimize your content for better conversions and engagement.

Starting with the most important use case of them all...

1. FAQ Sections for Sales Pages

If you’ve got a landing page actively selling products on your website, then nothing works better to display your Frequently Asked Questions than Toggle elements.

Instead of listing out a long line of static questions followed by answers — covering all the common customer questions and need to know information about your product — you can showcase the same content with better results using the Toggle element.

Just take a look at the FAQ section we put together for Thrive Theme Builder to get an idea of how you can use them for your sales pages or product launches:

Thrive Theme Builder Frequently Asked Questions

When will theme builder be available?

Theme Builder is currently available exclusively for Thrive Members.

WHO WILL GET ACCESS TO THRIVE THEME BUILDER?

Anyone who’s a current active Thrive Themes Member on the 2nd of March. This includes agency members.

HOW MUCH DOES IT COST?

$0 - Thrive Theme Builder is free for all current Thrive Members and will not be available for sale as a standalone product yet. Only Thrive Themes members will get access during the launch phase.

WHEN WILL THEME BUILDER BE AVAILABLE AS A STANDALONE PRODUCT?

There’s no official launch date yet. We want to thank our members for their ongoing support which is why they get exclusive early access.

WILL THIS CHANGE ANYTHING FOR ME? WILL I HAVE TO CHANGE MY WEBSITE THEME?

No! Thrive Theme Builder is a completely new product. This means that unless you choose to install it on your website, nothing will change. Your current theme will not automatically update to Theme Builder - you need to take action on each individual site to install Theme Builder.

WILL THIS MAKE ANY PRODUCTS OBSOLETE? WHAT ABOUT THRIVE ARCHITECT?

Many people asked whether Thrive Theme Builder replaces our page builder, Thrive Architect. The answer is NO. Thrive Theme Builder and Thrive Architect work hand-in-hand. Thrive Theme Builder helps you build your theme, Thrive Architect helps you create amazing content. Stay tuned for more information on how the two products differ from each other.

I’M USING A THRIVE THEME ALREADY, WILL MY WEBSITE STOP WORKING?

No! We’ll keep supporting the legacy themes for the foreseeable future.

WILL I HAVE TO BUILD MY OWN THEME FROM SCRATCH?

No! Thrive Theme Builder will be launched with the Shapeshift theme, the first Thrive Theme Builder theme designed with you in mind.

CAN WE SEE THE SHAPESHIFT THEME?

Patience my little padawan. We’re working hard on setting up the perfect demo site for you to see, as soon as that’s ready, we’ll send you a notification.

WILL THERE BE TRAINING ON HOW TO USE THRIVE THEME BUILDER?

Yes! Today is only the announcement of the official launch date. By the time the product is available to you, we’ll have created a ton of step-by-step, over the shoulder training material for you to make sure creating your site with Thrive Theme Builder is easy and fun!

Not only does a Toggle element FAQ section make your content more skimmable to help readers find specific answers about your product, it elevates the overall production value of your sales page.

That translates into more trust in your product and better answered product questions resulting in more sales.

So if you’re not already using the Toggle element as the key Q&A reveal for your sales pages, it’s super easy to make that change with Thrive Architect right now.

2. Podcast Episode & Video Transcripts

Are you a podcaster or use video marketing in your business?

Then you already know that transcribing your podcast episodes and online videos into text is a great way to help generate more indexable online content for search engines.

Not only can you create dedicated summary pages for each podcast episode or video you publish (for example, check out all the video focused blog posts we create for the Thrive Themes blog as well as all of Shane & Hanne's dedicated podcast posts on ActiveGrowth), but you can also add your audio transcripts to those pages as well.

But don’t just do a dirty cut-and-paste job with the transcript text.

Use the Toggle element to nest your audio transcripts within your episode pages to boost readability and engagement.

Here's an example of how the ActiveGrowth podcast nests episode transcripts on dedicated posts for each episode.

This will make your dedicated podcast and video posts look more organized and appealing, which in turn helps boost both visitor and search engine engagement.

3. Table of Contents Display Toggle

The Toggle element can also be used in other cool ways to streamline the look and feel of your content.

For example, if you want to hide a blog post’s Table of Contents on page load, you can nest it inside a Toggle element to give readers the option to hide or show such navigation links at their own discretion.

For example, here's how we did it for this very blog post above:

This can be especially useful for epic pieces of content that generate super long Table of Content elements. Instead of readers being forced to scroll past it before they can begin reading the main content of an article, they get to choose whether or not they want to see the quick navigation first:

Here's how the nested Table of Contents looks inside the Toggle element on our epic blog post about how to create ultimate guides.

4. Simple In-Content Quiz Questions

If you don’t want to go so far as adding actual conversion focused online quizzes within your content, you can use the Toggle element to create simple quiz questions for your readers instead.

Really, this can be as simple as asking a question through text in the top of the Toggle item and then revealing the answer in the clickable dropdown:

Pop Quiz: How many templates are available in the Toggle element library?

15 pre-designed Toggle templates and growing!

How cool is that?

What a simple way to boost reader engagement with your content!

5. Promote or Preview Your Online Courses

If you sell online courses, then the Toggle element can actually help you promote your products.

For example, Jon Morrow from SmartBlogger uses Toggles to showcase and make short sales pitches for his 5 different online course products — all on the same page:

Jon Morrow from SmartBlogger uses Toggle buttons to promote all 5 of his online courses on the same page.

Another strategy is to use the Toggle element to preview what's inside your online courses like Consulting.com does with it's Consulting Accelerator product:

The Consulting Accelerator online course sales page previews what's inside by using Toggles.

You can set up something very similar for your own online course sales pages using the Toggle element in Thrive Architect.

6. Payment Options + Shipping, Return and Refund Policies

If you’re selling anything online, then you definitely need to explain certain policy procedures, including:

  • The different ways people can pay for your products
  • How shipping and returns work (for physical products)
  • How delivery and refunds work (for electronic products)

And once again, the Toggle element is a great tool to use for this so your customers can clearly see how you deal with each of these critical steps in your sales and post-sales processes.

Here's how one yoga studio deploys the Thrive Architect Toggle element to explain the different ways payment can be completed to attend online yoga classes:

You can use Toggle elements to help explain your payment methods just like this Namibian Yoga Studio is doing.

So if you have some sort of policy matter to explain on your website, make sure to use the Toggle element to get the right information conveyed both clearly and attractively to your visitors.

7. Step-by-Step Instructions

Let’s face it, sometimes explaining how to do stuff well can be hard to do.

That’s why most instruction pamphlets that accompany DIY furniture or new electronics are such a struggle to follow.

But one way you can keep from overwhelming your readers during step-by-step instructional procedures is by… you guessed itusing the Toggle element.

Again, instead of just listing some long, drawn out and hard-to-follow instructions, you can make life easier for your readers by breaking information up into discrete, toggleable steps. For example, I can use a Toggle element to explain how to use Toggle elements:

How To Use the Toggle Element in Thrive Architect:

Step 1: Drag & Drop the Toggle Element onto your Thrive Editor Window

Click on the icon within the narrow right sidebar of your Thrive Editor window. After the right sidebar expands, search or scroll down the right sidebar to find the Toggle element icon.

Drag & Drop the the Toggle element icon onto your desired location within the Thrive Editor window.

Step 2: Select a Toggle Element Template

With your Toggle element selected, open the "Template Options" tab found at the top of the left sidebar.

Click on the "Templates" button to open the Toggle element template library — a popup lightbox will appear.

Select the Template design of your choice and click the "Choose Template" button to continue.

Step 3: Modify the Design of Your Toggle Element

With your Toggle template now loaded and highlighted, work your way through the different design option tabs in the left sidebar to modify all the different display features at your disposal (like Toggle behavior, Toggle element colors, font settings, layout pixel spacing, and more...).

Step 4: Edit the Design of Your Individual Toggle Items

With your Toggle element still highlighted, open the "Main Options" tab in your left sidebar and click the peach colored "Edit Toggle Items" button. The Thrive Editor window is now in the "Editing Toggle" mode and will allow you to edit the design and content of individual Toggle element items.

First modify the titles of each Toggle item.

Then add Text elements or any other right sidebar feature you need (like Image elements, Video elements, etc.) into the dropdown areas of your individual Toggle items.

Click the peach "Done" button to exit the "Editing Toggle" mode.

To expand individual Toggle items for editing, click on a Toggle item and then press the green "Expand" icon that appears within the Thrive Editor window. The Toggle item expand icon is located next to the Drag & Drop, Clone and Delete element icons that normally appear whenever you highlight something within the Thrive Editor window.

Or perhaps if you’re detailing the steps of a cooking recipe, the Toggle element can be used to make all of the ingredients, cooking-ware and action steps needed more clear:

How To Make Delicious "Egg-nana-jack" Pancakes:

Ingredients

  • 1 over-ripe banana
  • 2 eggs
  • Coconut Oil
  • Honey
  • Limes

Cooking-ware

  • Frying pan
  • Mixing bowl
  • Spatula
  • Ladle
  • Fork
  • Serving plate

Batter Preparation

  1. Completely smush the banana in a bowl with your fork.
  2. Add the two eggs and mix them with the smushed banana using your fork. (don't whisk the batter!)

Cooking Steps

  1. Preheat your frying pan at a medium to high temperature.
  2. Add a small amount of coconut oil to your frying pan.
  3. Use a ladle to add an amount of batter to your frying pan that creates the shape of a pancake or flapjack.
  4. Once the bottom side of your Egg-nana-jack is golden brown, flip it over with your spatula to fry the other side.
  5. Add honey and lime juice to the top of each finished Egg-nana-jack and serve warm!

Not only will readers be able to easily skim through each step-by-step “headline” to get the 30,000 foot view of the full task, but they can also easily keep their bearings about which step they’re currently on if you activate the “Auto-collapse” toggle feature (only one toggle can be open at any given time).

8. Job Descriptions

If your business is growing quickly and you’re in need of hiring some additional team members to help out, the Toggle element can make creating an attractive job description page SUPER easy.

Instead of putting together some bland page that lists job descriptions in a long, unreadable fashion, the Toggle element allows you to organize and displaying each posting in an easy-to-find way:

Division of Company You're Hiring For (e.g. Marketing)

Example Position #1: Content Marketer

Add details about the position here like:

  • Role Summary & Purpose
  • Essential Responsibilities
  • Qualifications & Requirements
  • Desired Skills & Characteristics

Example Position #2: Video Marketer

Add details about the position here like:

  • Role Summary & Purpose
  • Essential Responsibilities
  • Qualifications & Requirements
  • Desired Skills & Characteristics

Example Position #3: Video Editor

Add details about the position here like:

  • Role Summary & Purpose
  • Essential Responsibilities
  • Qualifications & Requirements
  • Desired Skills & Characteristics

See how quick the Toggle element gets hard jobs done?

9. Help Desk, Support and Tutorial Content

Finally, if your online products require customer support (and let’s face it, of course they do!), then the Toggle element makes organizing and displaying support information in a logical manner much simpler — especially for sophisticated products.

For example, we created this tutorial support page for Thrive Theme Builder to do just that. Here's an excerpt from Theme Builder's tutorial page:

Thrive Theme Builder Tutorial Page Excerpt

On this tutorial page, we organized the links to all our knowledge base articles for Thrive Theme Builder in a way that not only looks great, but walks new users through a step-by-step process. It outlines the order of operations they should follow to get up-to-speed with the product as fast as possible.

The design of the tutorial page allows readers to begin by scrolling through all of the available content quickly and then click on the subject that will help solve their current problem.

Upon clicking, the Toggle items open to reveal links to specific knowledge base articles likely to help them most with the current issue they’re facing.

Toggle Time: Now It's Your Turn

After reading through this post, we hope it’s clear to you just how versatile the Toggle element inside Thrive Architect and Thrive Theme Builder really is for your website.

Start using it right now on your sales pages to create super helpful FAQ sections...

...or on your blog posts to quiz readers about the content they’re reading about in your articles.

Honestly, the examples you’ve seen here are just the tip of the iceberg.

What are some other ways you can use the Toggle element to improve the quality, presentation and organization of your online content?

Share your ideas in the comments section below!

Author: Matt Totten

Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • Karen McCamy says:

    Hi Matt,

    This is great! :D

    I’ve played around with the Toggle element before, but you’ve presented some *great* new uses! My favorite is placing the TOC element in a Toggle! Yay! (never would have thought of doing that, but it makes so much sense…especially in the use case you highlighted [EPIC post]!)

    Is it possible to add images in the Toggle text? I’m thinking of the “instructions” use… I teach software, so having visuals (screenshots) for most steps is essential! (I’m guessing it is, since I notice you placed a button in the ‘Job Opening’ example.)

    Having the new Toggle templates is also a great addition! :-)

    Thanks! <3

    • Matt says:

      Thanks Karen! Yup, there’s so many use cases for the toggle element… especially because — yes you can add whatever elements you want inside the dropdown area. Images, video, icons, you name it. Have fun crafting the Toggle that suits the instructional needs of your site!

      • Dimitris Moshopoulos says:

        I can add images, videos and text in the dropdown area??? Wow, this REALLY made my day! You can’t imagine how helpful this info has been for the new website I’m about to build with your products! The whole blog post has been very helpful, but this last info stands out of all I’ve read in this post (hearts are popping out of my eyes right now – LOL!). This was one of the (too many) best posts I’ve read so far on your website, so please accept my e-hug, you and everyone else here that provide so much valuable help! The toggle element and its potentials seems to be the perfect tool for what I’m about to build with your products. THANK YOU! <3

      • Matt says:

        Hi Dimitris, you sure can add images, videos and anything else you want in the dropdown area of the post… you can even use Post List elements within the Toggle element dropdown area! Check out the tutorial video I just added to the top of this post for some examples. Thanks so much for your comment!

  • This is interesting but I’d prefer to see a video in order to get the full view of the concept in action.

    • Matt says:

      Thanks Gail… I’ll try to add a screen-share video soon to see if we can’t walk you through how to create these Toggle assets in real time.

      • Tony says:

        I second that Matt. An in-depth video would be great. Article great content but nothing beats a great explanation video. Ta mate opened my eyes up to a great aspect Of Thrive Themes.

      • Matt says:

        Thanks Tony… working on a Toggle element tutorial video as we speak!

      • Tony says:

        Sounds great, thank you.

      • Matt says:

        Hey Tony, your requested tutorial video is now available at the top of the post!

      • Tony says:

        Brilliant. Thank you Matt. Great stuff.

    • Matt says:

      Hi Gail, your requested tutorial video is now available at the top of the post!

  • Plus, put toggles inside of toggles.

    • Matt says:

      Totally right Mark! I imagine you can create some super advanced Toggle behavior if you start experimenting down that rabbit hole!

  • Guy Downing says:

    Listing benefits. Our start up products and services have many benefits, but we don’t want to overload a potential customer with a long list, and many of the benefits won’t apply to every customer.

    So, I’ve been thinking for sometime about using a toggle to list all the benefits, and then click on the arrow to drop down and see more detailed information.

    So, this is a perfect article at a perfect time. Will be using the toggle element for benefits.

    • Matt says:

      That’s a great idea Guy… sounds like you’ll be able to create a useful product benefits section that all your different types of customers can easily skim through to get the info they’re looking for. Thanks for sharing!

  • This is wonderful – so many different ways of using a toggle. I am quite inspired to give these a go!

  • Timmy says:

    Great post Matt. We’ve never really used the toggle because we thought it wasn’t SEO friendly. NOW we know it is so… it’s “Toggle Time!” Thanks again. Keep Having FUN!

    • Matt says:

      Awesome news Timmy! Glad we got that SEO question cleared up for you.

  • >