Using Conditional Display in Thrive Architect

If you are planning to sell content in very unique ways, then an easy way to do it with the help of the “Conditional Display” feature, from the Thrive visual editor.

This feature allows you to take a block of content from any page, and create different versions of that content. You can assign different display rules to each version, and decide what each visitor to that page will see, depending on what kind of permissions that person has.

For example, you can create a version that is shown to the users who have already purchased a certain product from your website.

Then, for the same block of content, you can create a secondary version that will be displayed to all visitors. This version can be a call-to-action for purchasing your product.

Where to Find it

In the visual editor, select a larger block content such as a “Background Section”, “Content Box” or even a “Block” element:

Important!

Keep in mind that not all elements/containers from the Thrive Editor support conditional display.

Here’s a list of elements/containers that can be used together with this feature:

Then, on the left hand side of the screen, you will notice this new tab, which says “Conditional Display”:

Click on it to expand it:

The first thing you will notice is the “Default display”, which is the actual content that’s available now on your page.

Create a New Display

If you hover over it, you will see this “Duplicate” option. Click on it to create a second variation of your “Block” element:

The duplicate version will appear right on top of the original one:

From here onwards, you can start making all the changes that you want to your new version, using the options and features available in the Thrive editor.

I will be creating a version for all the logged in users of my website, so for that, I will replace some of the text and also the button:

After I make my changes, I can set display conditions that choose which version of this content box will show to my visitors that arrive on the page. My default version will be shown to anyone landing on that page, any visitor that is not logged in, whilst the second one will only be shown only to my logged in users.

Hover over the duplicate, to see the full list of options you can use here:

Edit

The pencil icon allows you to rename the variation, making it much easier for your to later distinguish between the multiple variations that you might have:

I’ve renamed variation “Logged in users”, as I plan to make it available for the already logged in users that land on this page:

Reset

Next, use this option if you want to revert all changes and reset the variation to its initial settings:

Of course, this option works best after you’ve added conditions to your variation. If you use it at this stage, only the name of the variation will go back to the default one.

Duplicate

If you want, you can also duplicate your new variation:

Then you have the “Display conditions”, we will go over those in the following section of this article:

And lastly, if you click on the three dotted line, you’ll get the option of deleting this display:

Set up the Display Conditions

Coming back to the most complex option from here – the display conditions one – here’s how you can set it up for this variation:

Click on it and this will trigger a pop-up where you can set the condition rules:

The top drop-down allows you to choose if you want to display the content for the variation, or simply hide it all together:

You can next proceed with adding a new condition set:

Give it a name:

This will help you remember what kind of conditions you’ve set for this variation:

Open the next drop-down list from this lightbox, to start creating your own custom rule:

Feel free to browse these lists in order to set a condition rule that best matches your needs:

You can add multiple rules if you want:

And you can also use the additional options available if you click on the three-dotted lines for the right-hand side:

When you save your condition as global, it will show up like this:

And you will be able to use it at a later stage, for a different block of content:

The last two available options from this lightbox allow you to add a new set of rules, if you want, or choose from an already existing condition set, that you can save and load later just as explained above:

When you are done customizing this set, click on “Save conditions”:

Back in the editor, you will notice an indicator in the right sidebar that shows there’s some conditioned content on this page:

If you click on it you will be able to see the conditioned content that’s currently listed on this page:

If you’d have multiple sets of conditioned content, then all of them will show up here:

Also, you can very easily switch between the displays from the options that become available when your block of content is selected:

Advanced Options

Lastly, there’s one more set of options available for your to use while in this editor:

If you open the “Advanced” section, the first thing you can do it to activate the “Lazy load” on your page:

This will trigger a new set of options.

These are more advanced features that will allow you to avoid layout shifts by loading first the space reserved for that element prior to loading the actual element:

We have a separate article in our knowledge base that explains in depth what each of these options does:

And now, with this setup, your page should display one block of content to the logged in users, and a different block of content to all the new visitors landing on it.

There are multiple ways in which you can use this feature. Besides the example shown above, you can use it if for displaying different price boxes to your customers and non-customers.

Or, another interesting use case would be if you’d want to show one content box for users who have not purchased yet your product, and a different content box, with a download link, for the users who have completed the purchase.

Feel free to create the display that best suits your needs and take advantage of all the options available in the left sidebar.

And that’s pretty much it! This is how to use the “Conditional Display” option of the left sidebar.

Hopefully, you enjoyed reading this article and you found it useful. Make sure to also check out our knowledge base if you want to learn more about Thrive Suite.

Was this article helpful?

Related Articles

>