How to Use Elementor Display Conditions to Hide Sections, Columns or Widgets

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.

A9Ou6dMyNrc7pANMdnnrWJ825yEzbX16qKmbLIK tLomjTh74V5PkUmVCj6ygWsfO2Rr5uRIUhPw3vLvj3GWKxw bDcAQFpwRuddL

When you’re done setting this up, go back to your Elementor editor.

premium addons for elementor display conditions

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)

pXZShhn4r6vt8uqx QouZQgXq V5BirC50pzhVIrWBUnynozBezAnE22er17tfr

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)

dSciO2DFNsEghpJB2AhL nedBQ lGUU1f8Vz6HsCR2raFabSHQBN t2DHgG4WdSPwnleaxa 50DWtB0m4KjBLsCqfCq48cPiucRaX KC2hpPp9 DbD8mruWxPhF A6BqpR LKpEL

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)

IS5z49A00yK073EK GjHhlThb24nKVHkiU1sg4jcAdYEWYpoIkErVbmN3iX FqyEwHz2eWDClSfEIEQXRW1qz8eZCa0Lshqi7bNTOEXoAuTO79WDhS0bqr4 ATkwNK2zCeTVD3Nw

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.

UidXfHip7 eSB8AB7HeZjrLPzonV0H1HJhP5jIurbwoX8D8OdUzwiplOIy5kRZHrjk6A5nOJ1EHahqE9yIX6tQ0 d8FRgZ7 qUT0AzyDtDhMqQ6FReLMZuB7utk17TmZQR8br8tf

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  TypeIP 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)

xdpJXlSWeMHb28Ncko43NB ro7SuFjCgwefrDbbRmvkR8H 3uwwWjMpkirD1hg6H1r2hoWx1aOadT1kBTFlXPCmWDWDC

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).

Ah t2e2ppSRSI4 4iPRFyIwOgCZtdbDP6 CjqWReYn0dBnxbVDy9Xm1vectS1RuYGVYmDH7l9Qi61Rkzmuacl78U41GDuJJN21oE9lMpAIjvBTH ZshkbVq6hXjRuk75YbTrAYZZ

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!

Nlb5hUAfEwpQWV2xQtk5Dw6nB OmdYTDXG3WRU72ho0X98mrFApJ1ZgvwJBqRrVLK2xkBPTuvvThi6I EkLvT8igog0ZhdrWuX2v2 oPKTJJb7 E7SwpN30lPZ2SuVHuaCdN8rvv

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)

TQYFH GWYrBfwB6E3P7ADAgmMq4 gUPT7kyMrraOrZDsxvl7j0vLWUlkaCeKeNmtqiJV5RO

2. User role; they should be an Editor or Author or whatever you prefer (under the Type and Value options) (07:14)

YmE5Ya8YaF3RIBn7ZUvqiiaX364TBPQro0ML0Qtho3FpKxNw8f74YdkZklr3CelxFZ

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)

ujjt 5 C y00G8R9nGuQVb8dzsCoDjHdu8Gn3P1Rx Lay6Fw09MHK65T7pz BEbGOxzoVZr9CfemyQMdVIpxI9IxFfLpgsy07ij5qZWBdYD4jVj frHwvgw3a Mq0ruddmc8lVjk

 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)

rVmt8MHMlLdbgu4PJzGCRzk1Gni5H2VE FRcRpYByK6aEB1KJQ7H1VVYmnzEuO OVxBbmZMbbuaJ NcV4

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)

wmjdML5l 2ZL2vE8lPtvTvjdNG0mc5j6TLP55UobBU1AcwyZAAvxTOFO2yXVkRTyHBaKCFZsrYCTRbwmTS52v9easQEcaSZmNyRvMS MlWH2RJIdii4LuhqJfp2q8GHX

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users