Conditional Display Using Dynamic Content for Elementor

Imagine you have a website for your walk-in business, say a small sandwich shop. You are closed on Saturdays and Sundays. You can have someone update the website each Friday evening to show a message about being closed and then again on Monday morning to change it back to show you are open. That would be a lot of work and people might forget. Another option would be to use a conditional display option that only showed the message about being closed on Saturdays and Sundays. Sounds a lot simpler.

There are a lot of potential use cases for a conditional display feature. Perhaps you want to show a holiday notice, share a message with logged in users, or personalize a page for more engagement. In this tutorial I want to look at the Dynamic Visibility extension that is part of the Dynamic Content for Elementor (DCE) addon. Sometimes you may want to show or hide content on a page according to a special condition. DCE provides a large number of options for showing or hiding a section or widget on the page and has a large number of condition types to choose from.

Video Version

Setup

I have a demo site created for a fictitious bird watching club. On their sign up page they have a section telling the benefits of joining and a pricing grid.

Add a Promotion But Keep It Hidden

Dynamic Content for Elementor has a feature where you can set a widget or section to be hidden on the front-end. This is a blanket setting that is on or off and it allows you to work in the Elementor editor and keep that part hidden until you are ready to use it.

Here is the page in the Elementor editor. Note that there is a section for the March Membership Drive, but it is not showing on the front-end. That light red line shows that there is some conditional display option applied.

The promotion section has been hidden from display using the DCE display toggle. Right click on the section to show or hide it on the front. This is a simple toggle with no options that allows us to work on the section but keep it hidden until we are ready to show it.

High Level Display Settings

Dynamic Content for Elementor adds a “Visibility” tab to the Elementor editor. At the top are the high level Visibility settings and at the bottom are the Fallback settings. In between are the different types of display conditions that Dynamic Content offers. As you see, there is a big list.

Opening the top Visibility accordion shows the high level settings. If you are going to use any of the other display conditions then you need to toggle on the “Enable Visibility” option. Under that is the “Always Hide” toggle. This is the same as the right click option shown above that is accessible from the elements context menu. The “Keep HTML” option is used when you want to trigger a hidden div on the page, for example, when a button is clicked.

The “Display Mode” option is important: The “eye” is used when you want your condition to show the element when the condition is met and the crossed out eye icon is for when you want your condition to hide the element when the condition is met. There is also a “Debug” toggle that gives you a bit of information about which conditions are enabled. The “Need Help” link takes you to the Dynamic Content for Elementor documentation pages for the Visibility features.

Show the Section During a Date Range

The section promoting the membership drive has a discount coupon created using the DCE Copy to Clipboard widget. There is a tutorial showing how the DCE Copy to Clipboard widget works. Let’s set this section to show during the month of March.

When we toggle on the DCE Visibility extension we get a lot of options for controlling the display. These include User and Role, Device and Browser, Date and Time, Post, Archive, Context, WooCommerce, Random, Custom Conditions, Events, V2 Backwards Compatibility, and Fallback.

V2 Backwards Compatibility is if you had set display conditions using an older version of the plugin and we don’t need that.

Fallback is for showing a default when the section is hidden. You can have a text message as a fallback, or you can use a pre-saved template. Since I am going to be using multiple conditions, I won’t need a fallback.

Date Range Option

There are several ways you can use the Date & Time options. Note at the top there is a toggle for using dynamic dates. This gives you the option to use date time fields.

When we toggle that on we see two more entry boxes that accept data time values. Under that are the entry boxes for a “Period” of dates. Then there is a Days of the Week option. That gives you the option to add any of the days of the week you need. Lastly there are entry boxes for times. Note that all but the Days of Week options can be pulled from the database using the dynamic tags icons to the right of the entry boxes.

Let’s start by setting the date for showing the section during March. I added a date range using the Period boxes and you can see in the lower right corner that the screenshot was taken during March.

And on the front-end it now shows. That was easy. Now if we forget on the first day of April to update the site it will still be OK as the special section won’t show anymore.

Show a Different Coupon if the Visitor is From Facebook – Context Option

The bird watching club has a group on Facebook and have offered Facebook group members a 20% off coupon. So the next step is to hide the regular 10% off coupon if the visitor to the page is coming from Facebook and show a different 20% off coupon instead. On Facebook there is a link to the membership page that has at the end of the URL “&facebook=true”. For example,

https://birdwatchersunited.com/become-a-member/?facebook=true

Now we can set the page to respond to that link variable. Note that with DCE if any condition matches then the section will show, so first I removed the date range condition entered for the previous example. We will do this using the “Context” display conditions.

In the “Parameter” entry box at the top you can type in the name of your parameter. You could also select a parameter using the dynamic tags icon. If you use the dynamic tags then the full set of Dynamic Content for Elementor dynamic tags are available. Next is the “Site” entry box. This actually gives you a drop down list of some site variables you could use. Below that are two options to limit the number of times the element will show either per day or in total.

Before we add a new section with the coupon code for Facebook members, lets set the existing section to hide if the facebook parameter is found on the URL. Right click on it and go to the Dynamic Display options and go to the “Context” accordion.

In the Parameter text box I entered “facebook”. When you type in a value the Parameter Method and Parameter Status options show. For Parameter Method, I selected the first button with is for GET parameters. The other Parameter Method options are POST, REQUEST, COOKIE, and SERVER.

The three buttons for Parameter Status are, from left to right, “Not isset”, “Isset”, and “Defined value”. If you use “Defined value” then another entry box shows where you can type that value in. For Parameter Status I selected the first button for “Not isset”. So, if the facebook parameter is not found on the URL then the section will show, but if the facebook parameter is present then it will not.

I saved and tested this on the front and the default coupon box shows.

Now I add another section with the Facebook coupon. I set the Context condition as before, except that for the Parameter Status I selected the second button which is for “Isset”. So, the section with the Facebook coupon will show if there is a parameter on the URL with “facebook,” otherwise it will not show.

I saved and tested this. With this URL from my local testing site, that doesn’t have a facebook parameter, I see the default box.

https://juste.local/become-a-member/

And now with the “facebook” parameter on the URL the regular coupon is hidden and the Facebook coupon is shown.

https://juste.local/become-a-member/?facebook=true

Another option for setting conditions by URL might be the Referrer display condition mentioned below. My understanding is that Facebook does a pretty good job of including the referrer value, but if you have it set to open in a new tab using WordPress then the “noreferrer” tag is automatically added to the link.

Show a Message if the User is Logged In

One of the display condition categories is for “User & Role”. At the top you can pick from the roles defined for the site.

Obviously the user will need to be logged in or you can pick the Visitor (not logged in) option.

You can also set rules by “Selected Users”, User capacities (“User Can”), a field from the user’s profile (“User Field”), the visitor’s Remote IP or the Referrer. I toggled on Referrer so you can see that it is a list box with one domain per line.

This is a membership site and if the user is logged in then they are already a member. So, we will show an alert message if they are logged in that won’t be seen by visitors who are not logged in.

First I went into the Display Mode and set it to hide if the condition is met.

Then I went to the User & Role set of conditions and selected the “Visitor (not logged in)” option.

The condition worked as expected. Logged in users saw the member message and visitors who were not logged in did not.

Other Display Condition Categories

I’ve shown examples for User & Role, Date & Time, and Context. There are a bunch of additional categories and these each have a few ways they can be used.

Device & Browser Conditions

DCE has display conditions based on the visitor’s device size and web browser. For example, if you don’t support Internet Explorer then you can show a banner urging visitors to upgrade.

Post-based Conditions

There are a large number of Post-based display conditions. You can set conditions based on a particular Post ID, by post type, and by post title. If you select taxonomy then you have an option to pick the taxonomy and terms. There are options to base conditional display on a field’s value, on the post format, and on a page and its place in a page hierarchy.

Archive Conditions

You can set a display condition based on the archive type. For example, for the author archive you could show an author box.

WooCommerce

There are WooCommerce related conditions. I didn’t have WooCommerce installed, so they did not show.

Random

You can show or hide elements based on a random percentage. So, for example, if you wanted to show something half of the time you would set it on 50, for 50%.

Custom PHP Condition

You can write your own condition using PHP as long as it returns either true or false. You can use all WordPress variables and functions.

Event Conditions

Finally, you can set conditions based on page events. For example, if a button is clicked. You would do this by assigning the button a CSS class or ID and then show or hide the element when it was clicked. Note that you need to toggle “Keep HTML” in the main display conditions at the top. Here we assigned a CSS class in the Advanced tab for the button element.

Then in the Event On Click box you would add the class or id assigned to the button. The “Toggle” toggle means that if the element is hidden it will be shown, and vise-versa.

Conclusion

In this tutorial we have looked at the condition display options of the Dynamic Content for Elementor addon. We have looked at several examples as well as an overview of the full list. In many cases the options are pretty straightforward and easy to figure out. There are a few where documentation help is needed. I found that the documentation on the DCE website is improving, but there are still some gaps.

The conditional display features would be useful for marketing personalization when, for example, someone signs up for your email list and you pass their name on the URL to the thank you page. Dynamic Content for Elementor would make it easy to customize the thank you message. Similarly, these display options are golden for membership sites where you may want show or hide content based on a membership condition.

There are a few plugins in the WordPress plugin directory that add conditional display options for Elementor. There are also a couple of Elementor addon packs that add display conditions. However, it is fair to say that Dynamic Content for Elementor’s options are two, three, or more times more extensive than any other Elementor solution available. The range of display options is very extensive and reflects the developers’ thorough knowledge of WordPress. Dynamic display conditions are a very strong part of the Dynamic Content for Elementor suite of features and most everyone would find them useful.

Visit the Dynamic Content for Elementor Website