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 conditions → User → User 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.
