How To Use Elementor Display Conditions To Hide Sections, Columns Or Widgets

Peter

What you’ll need to Set Elementor Display Conditions.

01

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

02

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.

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.

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.

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

Change to a smaller device 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.

Example 2: Displaying Content based on Different Conditions

03

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.

Video: Elementor Display Conditions to Hide Sections, Columns or Widgets

Note:

Check out more on this story on the link below.