In this tutorial, I’m going to show you how to use the premium addons for elementor display conditions to set a condition based on the user’s computer, IP address, location, browser etc.
For example, you can set that a specific section, column or widget is shown or hidden if the user is coming from a certain website or if you’re an admin, editor or author.
Or, you can set that a section or widget is hidden if the visitor is using a certain browser or coming from a specific country, or even using a certain device.
You can apply these display conditions on Elementor sections, columns and widgets.
Please note that the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video
What you’ll need to Set Elementor Display Conditions.
For you to be able to do this all you’re going to need is Elementor, and the free version of Premium Addons for Elementor, this is what will enable you to use the Display Conditions.
Start off by pressing CTRL+E or CMD+E
Go to the plugins area in a new tab and activate the free version of Premium Addons for Elementor.
Under Premium Addons for Elementor, go to Global features (01:03) and make sure the Display Conditions option is enabled (01:09), that is; make sure it’s in green color.
When you’re done setting this up, go back to your Elementor editor.
Example 1: Hiding Information Based on User’s Device
Using an Elementor section that I created in one of my tutorials I am going to show you how to hide a specific widget based on the device a user has. If you’re interested in checking out this tutorial please refer to the link below.
Link to the vCard Tutorial: https://youtu.be/osBHFbV9SpY
Otherwise, in our example here I want to be able to hide the “Download CV” button from someone visiting this website via a mobile device or any device with a smaller screen. (01:35)
To do this:
Go to the Elementor editor
Select the Download CV button widget
Go to Advanced and under display conditions.
Since we want to hide the button we select the action “Hide element”, (01:48)
Go down to the Display When option and then select to display when “Any Condition is met”, we have one condition and that is the device type. So under Type select Device and go on to specify “small screen” under the Value option that is device type. (02:01)
This means that if the user is using a small screen for example a tablet or phone, then this button will not be visible.
You can now click Update and go over to preview (02:16)
Change to a smaller device (02:24) for example a mobile phone or Ipad mini, you’ll see that when you scroll down you can only see the contact button, the download CV button is not visible. If you go back and preview via a bigger screen both buttons will be visible.
Let’s go and look at other interesting ways to hide or show elements using Display Options.
Example 2: Displaying Content based on Different Conditions
Here is another example of a Bakery selling pastries with specific prices for different geographical locations/regions. Here I have prices in USD, EURO and UGX. What I want is to set up these specific prices to show up based on the location of the user, their IP, their forwarding URL or the browser they are using to access the site.
Step 1: Display based on Browser
Select the first section that is USD and go to Advanced in the Edit Section on the left. (03:13)
Go down to Display Conditions select to “show element” when “any condition is met”, in this case you choose the condition to be “Browser” and you specify the Value as Google Chrome. (03:20)
This means that this widget will only show for users who are accessing via Google Chrome.
Step 2: Display based on IP Address Location
Now lets go ahead and set up the next display condition.
Select second section, that is the EURO section and go to Advanced
Under Display Conditions change to “show element” based on Type “IP Location”, in this case the IP location Value should be “Germany”, meaning only a user viewing this site from Germany will be able to access this particular widget. (04:00)
Step 3: Display based on Location or Specific Browser
In the third section; the UGX, we want to set the widget to be visible under any of the two conditions; that is; either the user is accessing from IP Location Value “Uganda” (04:32)
or if the person is using the Safari Browser (set this under condition Type>Browser>Value is Safari) (04:43).
After saving, copy the url for the page and paste it in the Safari browser, you’ll notice that the section is visible, because you’re accessing it from Uganda so the Ugandan prices are showing, and you’re using the Safari browser.
However, you’ll notice that one section is not showing up in our display (05:32) which brings us to the next step!
Step 4: Elementor Display Conditions Based on URL
Here we set up that for this particular section to be viewed; a user should be coming from a certain URL, for example from Facebook, Google etc, so you’d have to include specific parameters in the URL in the Display Conditions.
To do this:
Back to your Edit Section, select the particular widget (the one that wasn’t displaying), Go to the Display Conditions in Advanced, under this set “show element” when “any condition is met”, under Condition choose “URL Referrer”, set Type to “URL Parameters” and under Value add whatever parameters you want to require in your URL. Then the section will be visible. (06:02)
In case you’re wondering where this kind of scenario can apply, it can be used for example in cases where you are running ad campaigns or offering special coupon for people who are signing up when they see your ad from a certain page, you simply copy that particular URL parameter from that referring page and include it in the Value section of your URL referrer.
Step 5: Display Specific Message
Another way to apply Display Conditions is if you would like to send specific messages to specific users on specific dates. Here, you can be able to for example say ‘Happy Birthday’ to your users or send any other specific message to a particular user.
Do this by:
Select the widget and go to Advanced in the Edit Section, Display conditions, set the Action to Show Element when “All Conditions are met”
That means it should only display when these conditions below are met:
1. Login status; the person should be logged in (set this under Type and Value options). (07:06)
2. User role; they should be an Editor or Author or whatever you prefer (under the Type and Value options) (07:14)
3. Special date: they should be logged in on a specific date; you can choose the date you want as well as the time zone under the Value option. (07:33)
For the “Happy Birthday you are loved” message to display, you simply add dynamic data by:
Under Elementor Elements select Heading widget and add it (07:43)
Click on the Database icon and select user info, under this you can add the user’s first name and then under Advanced you can add the before and after text, that is; ‘Happy Birthday’, put a break (br) and add ‘you are loved’ (07:56)
In conclusion
That’s how you can use premium addons for elementor display conditions and add them to your sections, columns or widgets to be able to display unique and custom information to your website visitors.
Hope you’ve enjoyed this tutorial and have learnt from it. If you have any questions or comments please let me know in the comments section below.
Remember to subscribe to my youtube channel and newsletter to not miss out more tips and tutorials.
