Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
How to Password Protect a Section of Your Page Using the WordPress Password Protect Page Plugin
Hey everyone! This is Mark from Wicky Design. In this Elementor tutorial, I’m going to show you how you can password protect a certain section within your Elementor page.
Out of the box, Elementor and WordPress don’t have much functionality or control over your password protected pages. The only functionality is within WordPress, you’re able to password protect a whole page. Now, we get asked by our clients a lot of times, “can we password protect one little section of a page?” And yes, you can do that with a plugin.
Password Protecting Pages the Native WordPress Way:
So I’m going to show you what most people are familiar with when it comes to the WordPress password:
So if you go under visibility and you create a password protected page. Let’s say the password is “test123”. Once you update this page, you’re probably pretty familiar if you’ve done this route before, where you need to type in a password to see all of the content on the page. So if I just type in “test123” and hit enter, now the user will be able to see the content on the page.
Our clients, like I said, didn’t want this functionality, they wanted to be able to see just one section. So now I’m going to show you how you can achieve that inside of Elementor.
Install the WordPress Password Protect Page Plugin
The plugin that you’re going to need to install is called WordPress Password Protect Page, or PPWP. This plugin is completely free and will give you all the functionality you need to be able to password protect a section within your Elementor page. If you go down here, it actually works with other page builders as well, so this is a really good plugin that gives you a lot of extra functionality on how to password protect pages throughout WordPress.
After this is installed, let’s jump over to the Elementor page
Now that you have the plugin installed, we need to go into our Elementor page and create the section that’s going to be password protected. To do that, you just go over here to your left side panel in Elementor and type in PPWP, or password protection. Just click and drag that over as you do with any other Elementor widget and as you can see right here, this area is going to be the password protected section.
If the user is, let me go to the preview here…so you can see right here that the user can actually see the content down here in this simple call to action section. So you aren’t restricting the user from seeing the whole page. This is already exactly what we are looking for.
Now what we can do is, within here, they have settings where you type in your password. You can do multiple passwords, which is pretty cool. So let’s just do “test”. Another cool feature is that you can make it where this will show automatically if it’s assigned to one of these roles inside of WordPress. That could be a feature that you’re looking for.
So this is what is going to show once the user types in the password. It’s going to show whatever is in this text widget right here. They give you a little extra functionality:
- You can type in the tile, which would be right here
- The placeholder
- What the button says
- and this text right here
They give you the ability to make those edits, which is pretty nice. If you need to add any customizations to styling, like spacing, or if you want to have the button look a little different, you’ll have to go into advanced and add some custom CSS. In most cases, this is just going to pick up the styles from your theme and you might not even have to customize it. If you need to, it’s all within your custom CSS.
Now, let’s just do a test and see how this works. The password I assigned was “test”, so let’s go back to the page, refresh, and type in the word “test” in the password field. This should all disappear and you can see the area inside that text widget.
How to add Elementor Templates
Next, I’m going to show you how to add an Elementor template within here so there is more to see when a user types in a password. This allows users to see more content than what is built into this generic text editor.
Let me jump over to some saved templates. Let’s say you have a call to action section that you would like a user to see when they type in a password.
You can see this call to action section is just a little header, some text, and an image. It would be nice to have it where someone types in a password and they could see something like this instead of just the generic text that the plugin gives you.
It’s really simple to do: Once you create your saved template within Elementor, all you need to do is copy this shortcode right here and go back into your password protected widget, and paste it in here. You can see it shows up right here. Let me change this password so it refreshes correctly. Hit update, and now when the user goes in here, they should now be displayed with that new call to action section. So let’s give it a shot. The password is “test123”, type that in and hit enter, and there you go. Now the user is going to see this.
You can do anything within a template, so this gives you a lot more functionality and can be very useful for password protecting sensitive content.
That’s it for this tutorial. I hope that it was helpful. If you liked this video, make sure you give it a thumbs up, subscribe to our YouTube channel, and hit the bell to receive notifications whenever we post a new video like this. Thanks, this is Mark from Wicky Design.
