How To Password Protect Content Using Elementor

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.

n04g5FGzdUkn84AHsNBiKirrbsahBWrSSyNhoGZaf3SsxJe22nOD0S8O6YbRIXfz8KRpKcO V4NK7GQKAqwu4Q7YFnr7HoZsDND2bpcl4oiRcTNS91GfzyWscUyHuJpQHDI9V0qS

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)

sBKA0V rK ZUn3U TKpX7Vz kmIkQR7njHhq1bYs NP ZIF KHyJF1B2ZW4OwxppNP2H7QvvkvfNwDTuyr6EbAebJ4KUfGQLhrthaWSwgSGglx4oVv8ZQZy0vr 56KemdX71T re

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)

Password Protect Content Using Elementor

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.

piUrxPaurrJRKKzwfaseuY2XUL21L146qc3I2z oY73pf4KgG4dNUBfD0SZ1o3 stO9lTwPZTVxOfSN ldTA7qrEpFctUpDjs6oz1QKD4qdY7acbE3IP2x3TWy4pIcvre4 phawh

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)

d3INkIfjecuhFMI0uftarU pBvoVQZECBx6r0Tim6cDGWWi8Ty vhXXMMIPstRDQIyuvi6eZzTp0

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.

3OsI30F6h4S7iX6nGcDs uS40zo0wlFw3kruzaBMztvNZ4tMcgNzIrnltNFtAZhFQIBktJGeT7pecskM9dOqZCrqpuBjMp9BiVfw11nxa3nlZxwc5Q5kW1j4XTIWO mFs0IZpkwl

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.

OZSK7xAhqYP0 zg5ydPpQWmv6TAs6kSzRQfaZLei839QzvNTDyGH47a9l3aXZoqTvI9bkNYhTy6imoA5TNZa06fCwnYZPfpknO6zRjrtZ9BtvOl30w7YMCM5238q hWw7UzH RSX

Select the protected content widget, under Form Text you can edit your input text and button text to what you prefer (06:32)

bKrUbtXSy3wG17p8UPxpcu 89R5Ov4PVNkJ9w47Yl 0uJKwk

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).

A xg22GpA9woWqbkH ddpEFzxtjjKjt9Iy4ZxB8dHHIcg 82dYUaJifdAuhrdpO0Vvg1z33frgtWY4

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.

JdpXEAZcvJtdezDvutYigKgGVPZjBV

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users