In order to use this plugin, you must first purchase a membership to Elegant Themes and install and activate the Divi Theme.

DiviPasswords is a Plug & Play plugin. That is, once the plugin is activated, the plugin fields are added automatically to the section, row and modules settings modal.

This plugin allows you to password protect Divi sections, rows, columns, Divi built-in modules and DonDivi modules.

DiviPasswords adds a toggle field to the module settings modal in order to display the password protected form rather than the module output. Same for sections, rows and columns.

The user will only be able to access the content after entering the valid password.

Likewise, the module content will be added to the DOM after entering the valid password so that no one can see the HTML using the browser tools or otherwise.

Fields location

DiviPasswords adds the Protected Password form fields under the Password toggle (located in the Advanced Tab from Sections, Rows, Divi built-in modules and DonDivi modules).

Password Protection

This is the toggle to enable the password protected form.

Use Padlock Icon

Here you can decide whether or not the padlock icon should be displayed at the top of the password protected form.

If this field is disabled, an image will be displayed.

Title

Here you can customize the form title. Default is “RESTRICTED ACCESS”.

Password

The password to be entered. If this field is empty the protected password form will not be displayed.

Placeholder

Here you can customize the form password placeholder. Default is “Enter your password…”

Button Text

Here you can customize the form button text. Default is “Submit”.

Remember Password

Here you can choose if the password should remembered on page reloads. 

Form color

Here you can customize the form color. The custom color you pick here will be used in the form elements.

This plugin use a cookie to remember the password. 

Cookie details

Name: divi_passwords

Expires: session (the Cookie is removed when the user closes the browser)

Note: The cookie will only be created if the user turns on the Remember Password toggle field. 

The protected password form is not being displayed

Please make sure that the Password Protection toggle is ON and the password is not empty.

CSS selectors

.dd-password-protect

By default DiviPasswords (since version 1.1.5) inherits the background color of the parent container. In case you want to use a different one please use this selector.

Password Protect form

.dd-password-protect form

Password Protect form icon

.dd-password-protect .et-pb-icon

Password Protect form image

.dd-password-protect image

Password Protect form content

.dd-password-protect .et_pb_blurb_container

Password Protect form title

.dd-password-protect h4

Password Protect form input

.dd-password-protect .dd-password

Password Protect form error message

.dd-password-protect .dd-password-error

Password Protect form button

.dd-password-protect button

How to add DiviPasswords to third-party modules

DiviPasswords is added to Divi built-in modules, as well as to DonDivi modules. However, you can add support for your Divi module by using the divi_passwords_supported_modules filter hook.

To add the Password Protection to your Divi module, you will just need to add the module slug to the DiviPasswords supported modules as following:

function add_my_cool_module($supported_modules) {
    $supported_modules[] = 'my_cool_module_slug';
    return $supported_modules;
}
add_filter( 'divi_passwords_supported_modules', 'add_my_cool_module' );

Also, DiviPasswords triggers the divipasswords event when the user enters a valid password.

You may want to attach an event handler function for this event in case you need to execute custom JavaScript when the user enters the password and, therefore, the module loads. 

Attaching the divipasswords event via jQuery:

jQuery('body').on('divipasswords', function() {
    // your JavaScript here
})

This how-to is intended for developers who want to add DiviPasswords to their Divi extensions.