How to Hide Elements in Elementor Using JetEngine

Updated: April 7, 2022

Are you looking for an easy way to show and hide elements of your website based on the condition you set?

Look no further because Elementor with JetEngine offers plenty of options for you to choose from. Even though Elementor already has a built-in visibility option by going to the Advanced tab → Responsive block → Visibility, however, its condition option is limited to the choice of the device, they are Hide On Desktop, Hide On Tablet, Hide On Mobile. By installing and activating JetEngine, you can set much more conditions for showing or hiding elements with the Dynamic Visibility feature.

With the JetEngine Dynamic visibility feature, you can hide or show elements by choosing from a plethora of condition options, like post type, a user login status, user role, value is greater than or lesser than, and many more.

In this article, we will show you how to hide elements from guest users in Elementor using JetEngine. This time we will hide a section that has the post archive inside it for guest users and only show it to the members.

Please make sure you already have the Dynamic Visibility feature enabled by going from the WordPress dashboard →JetEngine → switch on the Dynamic Visibility feature

Step 1: Choose the Section You Want to Hide

Firstly, click on the section handle to show the edit section panel and go to the Advanced tab → Dynamic Visibility.

Step 2: Enable the Dynamic Visibility and Set The Conditions

After you decide which section you want to give condition for its visibility, let’s give its condition to show the element if the user is logged in. Start by enabling the Dynamic Visibility block, leave the visibility condition option to its default (Show element if condition met), then add conditionsUserUser logged in.

Step 3: Create an Alternative for Guest Users

After the condition is set, the section before will not appear if the user is not logged in, let’s leave them a message to let them know that the content is for member only. Or you could add any element you want to show to the guest users.

This time we set the Condition to User not logged in, this way guest users will be seeing this message instead of the post archive section before.

Step 3: Check the Result

Okay, after all the elements visibility conditions are set, let’s check the result of it.

So, when we load the page we’ve created in an incognito/private browser, it will display the message for the guest users. We proceed to log in, then the content that was hidden showed up, the previous massage is hidden instead because the website recognizes us as a logged-in user.

To Sum it up

Even though Elementor already has a built-in visibility option, however, its conditions are only for the choice of devices. By installing and activating JetEngine you can set much more conditions for showing or hiding elements with the Dynamic Visibility feature. You can hide or show elements by choosing from a plethora of condition options, like post type, a user login status, user role, value is greater than or lesser than, and many more.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.