Personalization Conditional Content Conditional Redirect Conditional Pop-Ups Conditional Countdowns Conditional Menu Items Audience-based Content Conditional Design
Geolocation Geo-based Content Geo Redirect Geo Pop-Ups Geo Menus Self-location Selection Geo Woo Products Country Block All Geo Options >
Resources Documentation Blog Contact Support
Examples
Plans
Login
GET IT NOW

Tag: Elementor

Displaying Personalized Content Using Elementor

Posted on by asaf

You asked for it, and our developers made a huge effort and got it done quickly! We are proud to present our new Elementor widget and to show you a simple way to use any Elementor element inside If-So – NO CODING REQUIRED!

Introducing the New Elementor Widget

The new Elementor widget makes it easier to add an If-So trigger to your page, manage your dynamic versions, and best of all, see the results!

Meet the new Elementor Widget

Elementor video

Creating content in Elementor and using it in If-So

To design and create content with Elementor and use it inside If-So:
1. Create the content with Elementor
2. Save the content as a template
3. Go to the templates section on your WordPress dashboard
4. Copy the template shortcode and paste it within the If-So version content field

The option to apply a template using a shortcode is only available on Elementor Pro. If you are using the free version, there are some free plugins, like piotnet, that can add the same functionality.

The option to apply a template using a shortcode is only available on Elementor Pro. If you are using the free version, there are some free plugins, like piotnet, that can add the same functionality.

What dynamic content options are available in Elementor?

Here are two possible methods you can use to achieve this:

  1. Creating Conditional Elementor Elements: By defining conditions at the element (or section) level, you can control their visibility. The elements will be displayed only if the specified conditions are met. Learn more.

  2. Setting up a Trigger and Embedding it on a Page: Utilize a sequence of If > Then conditions to determine the content displayed. Based on the defined conditions and their order, a single version of the content will dynamically appear on the page. Learn more.

Conditional Triggers – An Alternative Method for Setting Up Conditional Elementor Elements

In certain cases, you may find it necessary or preferable to create your dynamic content using an If-So trigger instead of directly setting the condition at the element level. This approach can be beneficial for the following reasons:

  • The specific condition you want to use is only achievable through triggers (such as A/B testing, Schedule, and Start and End date).
  • You’re interested in utilizing If-So’s integrated analytics system
  • You want to create a sequence of “If Not” conditions (e.g., If X, then Y; if not, check if Z, etc.)

When you set up a trigger, If-So first checks the condition of the first content version, if it is met, the version is displayed, if not, it checks the condition of the next content version.

You can create as many versions as you want.

image

The limitation (and the solution)

One limitation of using triggers compared to conditional Elementor elements is that you cannot directly create your content using the Elementor editor within the trigger.

For simple text, images, or titles, you can create them directly inside the trigger editor (WYSIWYG editor). The content will automatically adopt the styling of the surrounding element on your page.

If you need or prefer to create your content using the Elementor builder, you can simply create it on your page, save it as an Elementor template, and then apply the template to the trigger using the template’s shortcode.

*The same method works if you want to apply the template to the default content field of another element.

Step-by-step, creating a conditional trigger

  1. On your WordPress dashboard, go to “If-So → Add New Trigger”.
  2. Click on “Select a condition” and select a condition.
  3. Paste the shortcode of the Elementor template into the content field of the respective version
  4. Repeat the above steps if you want to set up more dynamic versions.
  5. Configure a default content that will be displayed if none of the conditions are met.
  6. Press “Publish” and place the shortcode on your desired page to display the dynamic content. You can use a text, title, or shortcode element – all will work effectively.

Saving content as an Elementor template and applying it to the trigger

  1. Open the page you are editing with Elementor.
  2. Create and design the desired section or element.
  3. Select the section or element and right-click on the “Edit Section” button.
  4. A menu will appear with several options. Choose the “Save as Template” option.
  5. Provide a suitable name for your template and save it.

Obtaining the Template’s Shortcode

Elementor Pro users: On your WordPress Dashboard, navigate to “Templates” and select “Saved Templates”, then Locate the desired template and copy its shortcode.

Free (Elementor) version users: Search for a free third-party plugin, such as Piotnet, that offers similar functionality.

Elementor button element doesn’t render shortcodes

The Elementor button element does not automatically render shortcodes in the “text” field.

If you wish to include an If-So shortcode within an Elementor button field to display dynamic text on the button, you can add the following code snippet to the end of your functions.php file.

//Elementor button - render shortcode in URL
add_filter('elementor/widget/before_render_content',function($el){
    if($el->get_name()==='button'){
        $link_setting = $el->get_settings('link');
        if(!empty($link_setting)){
            $link_setting['url'] = do_shortcode($link_setting['url']);
        }
        $el->set_settings('link',$link_setting);
    }
});