The Protected Content widget for Elementor enables you to secure specific sections of your website with password protection. Whether you want to restrict access to confidential information, private pages, or exclusive content, this widget provides a straightforward and efficient solution. With its password-based protection, you can ensure only those with the correct credentials can view the designated content, adding an extra layer of privacy and professionalism to your site.
Let’s look at each of the options in the Protected Content widget for Elementor below.
Add a Protected Content Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Protected Content”
- Hover over the widget in the search results and click install
- Add the “Protected Content” widget to any Elementor Page
General Settings
Protection Type
Select the protect type.
- Single Password
- Multiple Password
Password
Set the password for content.
Hash SHA-256 Password
If this option is enabled, enter the SHA-256 hashed value of the password in the password field instead of the plaintext password. This ensures the password remains secure and is not exposed on the frontend. You can easily generate the hash of your password using online tools such as the SHA-256 Hash Generator.
Align Content
Set the alignment of content.
- Start
- Center
- End
Layout Settings
Show Title
Show or hide the title.
Title
Type text for title.
Show Description
Show/hide the description.
Description
Type text for description element.
Button Text
Type text for the button.
Show Graphic Element
Choose a graphic element to display.
- No
- Icon
- Image
Show Input Placeholder
Show or hide the input placeholder.
Placeholder Text
Type text for placeholder.
Protected Content Settings
Protected Content Source
Select the source for protected content source.
- Text Editor
- Template
- Image
Protected Content Editor
Use editor to to create the protected content.
Error Message Settings
Error Message
Type text for error message.
Cookie Settings
Cookie Name
he cookie name should be unique, use only letters, numbers, and underscores. No spaces or special characters are allowed.
Cookie Expiration Days
Set the expiry days duration of cookie.
Cookie Expiration Hours
Set the expiry hours duration of cookie.
Cookie Expiration Minutes
Set the expiry minutes duration of cookie.
Debug Settings
For Designing in Editor
Select to display for debugging.
- Show Only Protection
- Show Only Protected Content
- Show Both
Debug Error Message
Show the error message for debugging.
Protected Content Widget Styling
Choose colors that match your website’s style and customize text, icons, fonts, and layout to perfectly suit your design.
Wrapper Styling
Set the wrapper width, height, padding, background color, border, and box shadow.
Graphic Element Styling
Style the graphic element width, height, icon size, color, background color, border, border radius, and box shadow.
Title Styling
You can set the title typography, gap, color, and text shadow.
Description Styling
Here, you can set the typography, color, text shadow, text alignment for description.
Password Input Styling
You can set the width, height, gap, typography, alignment, padding, text color, border radius, and border.
Button Styling
Set the button positioning, width, gap, padding, margin, typography, background color, and border.
Protected Content Styling
Style the typography, color, and text shadow of protected content element.
Error Message Styling
You can set the error message typography, gap, color, and shadow.
Protected Content Design Example For Elementor
Here is a live use case for the Protected Content Widget.
Thank you for taking the time to review this documentation for the Protected Content Widget. We hope it has provided clear insights into utilizing this widget effectively for your website.
If you have additional questions or need further support, don’t hesitate to reach out or explore our additional resources. We’re always here to assist you in maximizing your Elementor experience!
