 One of the things I love to do with Elementor is trying to figure out how to add certain features and functions without resorting to a third party plugin. And then I love sharing all that with you. One of those things that I've recently had to do for my own personal site was to add a condition on showing certain content based if somebody is logged in or logged out. So I found a way to do this and actually the way I found was quite simple like all we are going to do is copy and paste a little snippet of PHP here. We're going to copy and paste a little snippet of CSS right here. And then we're going to use a class to add to any widget in Elementor that we could hide based on if a user is logged in or logged out. What's up, everyone? I'm Jeffrey at Lightbox. And in this video, I'm going to walk you through how to display content based on conditions, whether a user is logged in or logged out with Elementor. And if you do find content like this helpful, then don't forget to subscribe because it really does help to support this channel and helps me to keep putting this stuff out and sharing my goodies and tricks that I'm using myself. All right, cool. Let's go ahead and check it out and have some fun. I really quickly to give an example of how this could work. I'm using it on my own personal website. So here's my site for my academy right here. And you can see on my nav menu, I got my account here. Now, if I were to go to incognito and view it as somebody not logged in, you're going to see the menu is different. It's going to have a member log in right over here. So that way, if somebody isn't logged in, then they could go ahead and log in. They've got a place to log in. But if we go here to somebody logged in, then they could go and see their dashboard. But let's say also somebody not logged in wants to go to the My Account page. Well, if they go to the My Account page, then the dashboard is going to be hidden because there's nothing to show inside the dashboard. And instead for a better user experience, there's a login form right here. And this is just one case where having conditional content based on the user logged in or logged out could be very useful. For this tutorial, we're going to be using this demo site right here. And we're going to apply conditions to these two buttons. So we have open a new account. And we want this to only show for people who are not logged in. And then we have the visit dashboard, which should only show for logged in users. Now to do this, it's only going to take a few steps. So the first step is we have a PHP snippet right here. We need a copy and paste inside the website. I'll walk you through that right now. And also, you could find this code, the PHP and the CSS in the link inside the description. It's totally free, no strings attached at all. Please feel free to use it on any project. It's all good. All right, so let's go back here and to your dashboard. We're going to add our PHP inside our child theme. Now it's really important that we are using a child theme. If you do not have a child theme, then make sure to add one first before adding this. Another option is to use a plugin like code snippets, where you can add your PHP right inside there. So I'll leave that up to you where you want to add your PHP. But in this tutorial, we're going to add it in our child theme. So I'm going to go over here. Let's make sure that it is a child theme. This is super important. And then I'm going to select themes functions for the functions PHP. And right down in here, I'm going to copy and paste and update. Now really quickly to explain what this little snippet is doing right here. This is adding a class. This class here logged in condition. Or this class here logged out condition to the body tag based on if the user is logged in or logged out. And by having this class added here on these conditions, now we can use CSS to target this condition. And in this case, we're going to use it to hide content based on if somebody's logged in or logged out. So the next step is going to be grabbing our CSS. And it's just this little tiny snippet. That's it. So it's only a little bit of code to accomplish this right here. We don't need a membership plugin or anything like that. All right, so let's copy and paste this now for our CSS. There is a few places where we could put it and you probably have your own preference. But I'm going to strongly suggest for this particular case to put it inside your customizer. And the reason why I'm suggesting to put it right here is because it will not cache. And it'll load right when the website is loading. Now we are hiding content. And if we put it somewhere where it's caching or it's in a file that takes time to read, there could be a chance that the hidden content could flash or show when the page is loading. And we don't want that to happen. And the best way to prevent that flash at millisecond, look at the flash of the content. We put it here in the customizer. All right, let's go ahead and publish. And quickly, let me explain what this is doing here. So all this is doing is using the classes that we got from our PHP that goes inside the body tag. And we're using the display none to hide, which we could hide any widget that we want. And then we got two new classes, we have this class hide logged in. And then we have hide logged out. And we are going to use these two classes right here inside our elements or widgets. And wherever we put this class is going to hide based on this condition. So let's go ahead and do that to our demo page. Let me go into edit with Elementor. I'm going to go to open a new account. Now we want to hide this one for logged in users. So I'm just going to put here in my CSS class, hide logged in. I'm logged in. So it automatically hid already. Now it's disappeared from here. So you got to use your navigator if you want to go back into it. So if I want to go back into I got to pull up my navigator so I could access it because it is just hidden for me since I'm logged in. Now let's do the same thing for our visit dashboard. We're going to go to our visit dashboard here in our CSS class. Now we want to hide this for anybody who is logged out. So I'm going to put hide logs out and then I'm going to update it. Now it's still showing for me because I am logged in. Let's take a look in the front end. And we can see the other button sign up button is now gone. But if I were to log out and let me go to the front end. Now we could see the go to the dashboard button is gone since I am not logged in. And that's it. You could add these classes to any widget and you can hide any type of content on the website. All you got to do is put the class inside the CSS class that you want to hide. And that's it. It's a very simple solution. Now this is a simple solution right here. But if you do have a situation where it is more sensitive to hide and protect content from logged out users, then in that case you might want to use a membership plugin because well we're using display known with CSS and anybody that knows how to use inspect element and CSS, if they know what to look for, they could change it around like you could go to my website right now since I showed you what to look for and you could use inspect element and see the stuff that I'm hiding. But mine isn't sensitive. I don't care if anybody sees it. I'm fully transparent. I'm only hiding content on my website for a better user experience. In a first situation like that, this is a really easy trick that I wanted to share and I hope it helps out. I hope you found this tutorial helpful and if you have any questions, drop them inside the comments. I'd be happy to help everybody else out. Also, I got a question for all of you. What do you think about Elementor building conditions right into the Elementor builder when we don't have to resort to third party plugins or even adding in custom snippets? Would you like to see that? I think we need to make a lot of noise for Elementor for certain features we want to see Elementor bring. We already got the loop builder coming in. The container now is going to finalize. I think this is a good time for us to start making noise and start asking Elementor, hey, we want to build this. Can you please start adding this in? I personally feel adding conditions into Elementor would be super dope. I would love to see that. What do you think though? I would like to hear from you. Well, if you did like this, make sure to like and subscribe as well. If you really like content for web designers and web developers, I'd be happy to keep making more and I appreciate the support and I'll be back again soon. All right. Thank you for watching.