In this article, I’ll show you how to password protect content using Elementor page builder and the Plus addons for Elementor protect content widget.
You can protect content using a single password, multiple passwords, or even by assigning a user role.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Password Protect Content Using Elementor
What You’ll Need
To do this you’re going to need a plugin called Plus Addons for Elementor
When you have your plugin installed and activated, go to its Settings (01:04) and enable the Protected Content widget, then Save the changes.
To Read: Secure, Block and Stop Malicious Attacks to WordPress websites for FREE
Add Protected Content to your Elementor Page
Go to Pages and open up any page where you want to add protected content, for example, I’ll go to my About page and Edit with Elementor (01:46)
When your page opens up in the Elementor editor, click the (+) to add a new section, then go to your Widgets area and drag the Protected Content widget to your section (02:10)
Select your widget and in the Edit Protected Content area on the left, under Content Source you need to select the content that you want to appear when someone enters a password into the protected content area.
If you want your web visitors to access certain content when they enter a password you can just select Content for the Content Source then type your content in the Content area
In this case, however, we’re going to use a template so select the Page template option under Content Source.
Tip:
To create a template to display here, go to your Templates section on your dashboard and Add New, after you save your template it will appear in your Saved Templates and you can also select it in your editor.
After selecting your template, go to the Protection Type option, you can either use a single password, multiple passwords, or a user role.
When you set your protection type as user role; it means for someone to access your content they’d have to be either an administrator, an editor, author, etc depending on what you choose to assign.
With the multiple passwords option, you would have to set a number of different passwords for someone to use in order to access the content.
In this case, we’re going to use a single password, under Set Password you can add the password of our choice (04:01)
Under the Message option, you set up the message that will appear in the section where someone wants to access your protected content.
You can either leave it on the default: “you do not have permission to see this content” (04:39), or you can use a template.
If you want to make changes to this template, just go back to your Saved Templates on your dashboard, select your template and Edit with Elementor.
In the editor, select the template section and under Background Overlay, change Background Type to gradient the Update (05:37), then reload the page back in the protected content editor.
Select the protected content widget, under Form Text you can edit your input text and button text to what you prefer (06:32)
Under the Error Message option, you can add the text you want to appear when someone, for example, enters a wrong password.
Go to Style;
Under Form Input > Inner Padding, add 150pixels on the left and right, and 15pixels on the top and bottom.
Select the Submit Button next, under Normal, give it green for the Background color, and on Hover give it blue.
You can go ahead and make any other changes for example to your typography, you can give your button some padding, add a border, and so on (09:26).
Under the Form Content option, set the Max Width to 100% (do this for the tablet and mobile devices too).
Do the same under the Protected Content option; make sure the Max Width is set to 100% on all devices. And for Alignment, select the center.
When you’re done, click the Update button then preview the page.
Also Read: How to Create a Top Header and Below Header using Astra
In closing
That’s how you can add protected content to your WordPress or Elemenor website using the Plus Addon for Elementor. This page with protected content can be viewed or accessed on any browser your website visitor may be using.
For any questions or comments about this tutorial or any other, let me know in the comment section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
