When editing some of the elements from the Thrive Editor, you are able to set up conditional display options, which will grant you control over choosing who exactly can view that content and how.

The elements from the Thrive Editor for which the "Conditional Display" setting is available are these ones:

We have a more comprehensive article about how the Conditional Display option works, that you can find here, in case you need detailed information on how to use the setting. This article will only focus on the advanced options:

The "Advanced" section will only become available once you've added more than one display variant.

This section will unravel the lazy loading options of the content. If you click on the down arrow, you will be able to enable lazy load for the element:

Lazy loading one of these elements means that, when someone visits the page, the space reserved for that element on the page will load prior to the actual element loading, in order to avoid layout shifts.

If you activate lazy load, two more options will become available below it:

Since the different display variants might look so different one to the other that they actually have different sizes/heights, this option will allow you to make sure that the variant with the biggest height is taken into consideration when the content lazy loads.

Here's an example: I have a "Content Box" that displays differently, depending on whether the person viewing the page is logged in or not.

The "Content Box" element contains the link to buy or download an e-book. If the person is logged in, they have access to the e-book, so they will see the "Download e-book" one:

If they are not logged in, they will have to purchase it, so this is what they will see:

As you can see, the two states of this element have two different heights.

This is where the "Uniform display heights" option will come in handy.

If checked, when the page loads, the option will make sure that the space reserved for the element will have the height of the display with the larger height:

And if the option is disabled, the space reserved for the element on the page will match the height of the display that is being loaded:

This last option will let you choose which background should be loaded until the actual element shows up on the page.

Use the dropdown to choose the state from where the background image or style should be inherited upon lazy loading the element:

So, for example, if I choose the "not logged in" state here, this means that the background that is going to load until the element fully loads on the page is going to be the background chosen for the "not logged in" state:

This is how you can use the advanced options of the conditional display element setting.

If you need more information on Thrive Suite products and features, please make sure to check out our knowledge base.