Home » Tutorials » Elementor Conditional Display For Dynamic User, Browser, OS
Imagine you want to showcase some content before during your store is open and another when you are closed. Editing the same page twice is boring. Elementor Conditional Display extension will help you to arrange multiple types of content from a different perspective.
Display Conditions is an extension that is available for Master Addons plugin users. I am going to show you in detail about this extension. You can show or hide any content by using a different type of condition. Also as a bonus you can take a look at Entrance Animation too.
I also recommend you to check Elementor Pro Features. Maybe you will get something interesting in the Pro Version of Elementor.
Before diving into the post, you can take a look at the following video. You can understand how to work with elementor Display conditions by Master Addons.
You will see the “Display On” option at the before conditions. There is a simple dropdown for two functions. One is “All Conditions Met” and another “Any Conditions Met“. If you select “All conditions” then your element will be visible for only those visitors which pass all conditions that you have created. Perhaps, if you select “Any Conditions” then your all visitors able to see the element who pass at least one condition.
For example: Imagine, you have created 2 conditions. one is “Only Google Chrome user able to see the element” and Two is “Only Admin able to see the element“. If you select “All Conditions” then only that Admin able to see the element who logged in the website from Google Chrome. Perhaps, if you select “Any Conditions” then anyone who visits the page from Google Chrome can see the element + any admin who logged in from a different browser able to see the element too.
Select any element which you want to show or hide for logging in or non-logged in user. Navigate to the advanced tab. You will see the display conditions tab. Just enable it now. Now you will see a login status condition by default. That’s it, you don’t need to change anything in the condition. Only login users able to see the element now.
Let’s set another condition for non logged users in another element. Only non logged in user able to see the element now. Again go to the advanced tab>Display Conditions>enable it. Now select “Is Not” from the dropdown like the following screenshot. This condition means All visitors who are not logged in the website will see the content.
The logic is the same as the previous logged in vs non logged in user. You just need to change the Condition. From the condition dropdown list, just select “User Role”. Then select your desired user role whom you want to show your content. Take a look at the following screenshot and you will get a clear idea on this. If you select “Is Not” for “Administrator“, then everybody able to see the content except “Admin.” Make sure that, this condition only for logged in user.
There are 3 different types of conditions for Day and time. “Current Date“, “Time of Day“, and “Day of Week“. If you select “Current Date”, it will allow you to select a date range when you like to visible your content. Perhaps, “Time of Day” will help you to select a specific time of a day. Finally, “Day of Week” is necessary to showcase different content on a different day automatically.
Imagine you want to showcase a different type of content for Google Chrome, Mozilla Firefox, MAC OS, Windows users. Here Browsers and Operating System conditions will help you to solve the problem. You can select your desired browser or OS from the list and update your page.
The more you practice the more you can learn about display condition extension. You can add multiple conditions in each element. It will help you to get more control over your content. There are more display conditions like Page, Post, archive page available. You can set conditions in the Header and Footer template for a specific element that you want to showcase on page or post. Check this Header Footer & Comment builder documentation for details info on creating a dynamic header & footer.
I hope you got a clear idea of how to work with elementor display conditions. Feel free to comment here or get in touch with us if you face any problem. You can live chat with us via the website chatting system or message us via the contact form.