This article might be helpful if you want to hide element/s on your website for the non-logged-in user to give exclusivity to your visitor who logged in to your website. Some websites require visitors to log in to access a contained part or the whole website.
Maybe you are wondering, “Is it possible to hide the section for non-logged-in users in Elementor?” Well, everything is possible in Elementor. With Elementor and Happy Addons integration, you can hide the section for the non-logged-in user on your website.
Steps to Hide the Section for Non-logged in User in Elementor with Happy Addons
Step 1: Install and Activate Happy Elementor Pro
To start this tutorial, you must install Happy Addons to your Elementor-powered WordPress site. We need a Happy Display Condition feature to hide the section for non-logged-in users. Whereby Happy Display Condition feature is only available on the pro version. You can download Happy Addons Pro on its official website. Install and activate once you have downloaded the Happy Addons file.
Once you’ve activated the Happy Addons Pro, go to Happy Addons -> Features on your WordPress dashboard. Go to the FEATURES tab and make sure that the Display Condition is enabled.
Step 2: Create a New Content (Post/ Page) or Select an Existing Content
Now, we will use this addon to hide a section for non-logged-in users on the website. You can create new content or edit the existing one. We will edit our existing page (Barber Online Course) in this example. What we are going to do here is hide a section about the barber course videos for non-logged-in users. So, only users who logged in can see that section.
Step 3: Apply the Happy Display Condition Feature
Alright, it’s time to apply the Happy Display Condition features to the section you want to hide for the non-logged-in users. Go to the section settings by clicking the Edit Section button. Next, go to the Advanced tab -> Happy Features.
Once you enter the Happy Features settings, you must make changes to hide a section for the non-logged-in users. Please follow the following steps below:
- Enable the Display Condition option
Go to the Display Condition option and then enable its option by sliding the toggle to the right.
- Hide the Element
Go to the To option, then set it to the Hide Element.
- Set the Condition
Go to the Conditions settings and then click the Login Status options. Next, set the condition of the element (section) based on the login status in which the user is not logged in and can’t see the element/ section (see the GIF).
Update the page to apply the changes.
The Bottom Line
This article shows you how to hide the section for the non-logged-in user with the Happy Display Condition feature based on login status. Besides the login status, the Happy Display Condition feature can help you display your content depending on different conditions like operating system, browser, time, date range, and many more.