Conditional (Personalized) Elementor Content

The If-So & Elementor Integration allows you to set a condition for each Elementor Element (or Section). The element will be displayed only if the condition is met.

A complete personalization solution

Simple to use, dozens of conditions, and:

Page Caching Compatibility

Load the dynamic content after the page loads from the cache

Server-side Solution

Only one version is rendered on page loads

Audiences (segmentation)

Segment visitors and show personalized content when they visit other pages

So▸Simple! Any Elementor Element or Section can be made conditional

With our Elementor Integration, you can add an If-So condition to any Elementor Element or Section. All you need to do is click the element, go to the advanced tab, and select a condition from the list.

If the condition is met, the element will be displayed. If the condition is not met, by default, nothing will be displayed.

Default content – By default, if the condition is not met, nothing will be displayed. If you want to set content to be displayed if the condition is not met, you can click the “Default” tab and set alternative content.

Which conditions can I set with the Elementor Integration?

You can set each one of the If-So conditions, including conditions added using other integrations like WooCommerce, LearnDash, and any other integration.

For a full list of conditions

Assigning Users to an Audience

If-So allows you to provide a consistent user experience on your site by assigning the user to an audience and then showing dynamic content anywhere on your website to users assigned to that audience (based on a cookie).

To assign or remove users using the Elementor Integration, click the “Audiences” tab and select the audiences you want to assign or remove once a condition is met.

For more information and options for assigning users to an audience

Page Caching Compatibility

If-So is entirely compatible with page caching. If you are using cache on your site, simply enable the Ajax Loading option (located below the condition). The dynamic content will be loaded using Ajax right after the rest of the page loads from the cache.

Note that since the content is loaded after the page loads from the cache, there will be a slight delay before the appearance of the dynamic content. In most cases, the delay is insignificant. If you find it too long, the alternative is to disable the page caching for the specific page with the dynamic content (this is not recommended, of course).

Apply Elementor templates into an If-So trigger

In some cases, you might need or prefer to create your dynamic content using an If-So trigger instead of setting the condition directly at the element level. Such cases might be:

  • You want to make use of If-So’s built-in analytics system
  • The condition you wish to use is only available on our triggers (A/B testing, schedule, start and end date).

To create your content with Elemntor and apply it to an If-So trigger, simply, create the content on your page, save it as a template, and apply the template to the trigger using a shortcode.

Once done, use our Elementor widget or paste the trigger’s shortcode inside a text, shortcode, or HTML element on your page.

A short video showing how to do it

Screenshots

Frequent Questions

  • Elements are not functioning correctly while dynamic content is loaded using Ajax

    When you choose to load the dynamic content using Ajax, the content is loaded in a separate request to the server after the static content loads from the cache (click here to learn more about how Page Cache works). 

    In some cases, the appearance and/or functionality of the content loaded via Ajax may be broken. This usually happens when it needs to be initialized with javascript, which by default happens on page load (and so doesn’t affect the Ajax content, since it is loaded later).

    Make sure the problem is caused due to the Ajax Loading

    To check if the problem is caused by the Ajax loading, go to If-So > Settings (on your WordPress dashboard) and disable the Page Caching Compatibility option. Alternatively, depending on how you have set the dynamic content, you can disable the Ajax loading specifically for the content that’s experiencing problems:

    • Dynamic triggers: Add the attribute ajax=”no” to the trigger’s shortcode.
    • Gutenberg / Elementor blocks/elements: Make sure the “Ajax Loading” option is off.

    Solutions:

    Before checking the possible solutions, bear in mind that If-So allows you to disable the Ajax loading for a specific trigger by adding the parameter ajax="no" to the trigger's shortcode.

    There might be use cases in which page caching might not be relevant or crucial so excluding it from the cache might be the best option. Two popular use cases in which you might prefer excluding the page from the cache:

    1. If you are using one of the query-strings conditions (UTM Parameters, the Dynamic Link, or the Page URL conditions) - Most caching plugins do not cache URLs with query strings anyway. If you are using the UTM Parameters, the Dynamic Link, or the Page URL conditions (with query parameters), your pages aren't cached anyway (or can be cached separately).
    2. No significant meaning to the loading speed - If the page on which you use the dynamic content is an internal page with no significant value to its loading speed (your 'thank-you' page for example).

    Elementor users

    If the issue you experience is related to an elementor element, paste the code below on your functions.php file:

    wp_register_script( 'ifso-dummy-enqueue-to-attach-to', '',);
    wp_enqueue_script( 'ifso-dummy-enqueue-to-attach-to' );
    wp_add_inline_script( 'ifso-dummy-enqueue-to-attach-to', "
    document.addEventListener('ifso_ajax_triggers_loaded',function(){
     elementorFrontend.init();
    });");

    All other cases except Elementor (dev skills are required)

    If-so provides javascript events that are fired after the Ajax content has been loaded, making it easy to initialize your content after it has been loaded:

    Ifso_ajax_triggers_loaded - Fires when the dynamic content in all the If-So triggers present on the page has been loaded.
    Ifso_ajax_conditions_loaded -  Fires when the dynamic content in all of the If-So standalone condition widgets (Gutenberg, Elementor) present on the page has been loaded.

    Example:

    document.addEventListener('ifso_ajax_triggers_loaded',function(){  document.getElementById('myClickButton').addEventListener('click',myClickCallback);
    });
    

    Workaround (for non-developers)

    A non-elegant solution that works in some cases is to include an invisible (hidden with CSS) copy of the dynamic content and load it without Ajax. This would allow the initialization routine to run in addition to the content loaded with Ajax.

    To hide the content from the user, wrap the content in a div with a display:none attribute and apply it to the page inside an HTML/code module.

    If you're not familiar with HTML and CSS, you can copy and paste the following code to your site. Just make sure to replace the trigger's ID (123) with the ID of your trigger.

    <p style="display:none;"></p>
  • Does the Elementor integration work on the free version of the If-So plugin?

    Yes, it does.

    Yes, it does. All the functionality and conditions included in the free version will also work with the Elementor integration (click here for a list of the free vs. pro features).

  • Was this Helpful ?
  • YesNo
Elementor Integration
Free
Requirements: If-So Pro or Free-trial license