How to setup a Divi Protect section

Divi Protect was designed to help you build an attractive password protected section within your page. The idea is that within your web page, maybe half way down you have a password field that when someone enters in the password - more content is reveals that is built with the Divi Builder.

You can use it to protect a whole page if you want, simply just add the Protect module on the page and design the hidden page all within the protected section.

How to set up a Protect section

To create a password-protected section on one of your pages, follow the following steps:

  1. Create a new Password Protect Section.
  2. Customise the Divi Protect Settings.
  3. Add to your page by creating a new Divi Protect Module, choose the Protect Section you just made and customise the appearance of the form.

1. Create a new Password Protect Section.

  1. This is the section that will be hidden. To create this go to Divi Engine > Password Protect Sections. On this page, click on the "Add New" button.
  2. Enter in a title of the section.
  3. Click on "Use The Divi Builder" to use the builder to create the hidden content. 
    1. Please note that you cannot use the Visual Builder on this page because the page needs to be accessible to the public to use it. As this section needs to be hidden from people it cannot be publicly accessible and therefore the visual builder does not work. You can still use the classic builder. To use the classic builder go to Divi > Theme Options > Builder > Advanced and disable "Enable The Latest Divi Builder Experience" and enable "Enable Classic Editor". When you are done you can re-enable the visual builder.

2. Customise the Divi Protect Settings (same page as above).

  1. Content Before Simple Text: This is the text you want to show before the number input field
  2. Content Before Divi Layout: If you would like to use a more complex layout than just text - maybe a snippet of what they will see upon entering the password - you can create this in the Divi Library and then assign that layout you have just made there. It will override the text box above.
  3. Content After Divi Layout: Assign a layout that you want to show after the password section - this will go away after they enter in the password. (similar to the before section.)
  4. Button Text: Choose what the text to be shown on the button
  5. Disable login form for logged in users?: If you want to allow all logged in users to see the content without having to type in a password, check this.
  6. Set-Cookie Duration: Set the number of days you want the password to be stored in the browser once they have successfully entered in the password. If you don't want to use a cookie, set it to 0.
  7. URL Redirect: Redirect the user to a specific URL instead of showing the content, enter the URL here.
Important Settings (this can be found just below the publish box)
  1. Password: Generate a password for your section. You can generate a strong password here
  2. Choose your unique shortcode name: Enter in a unique name for your shortcode. For example "my-shortcode-name". Leave out the [] - we will add this. You can use our module "Divi Protect" or use it as a shortcode.
Customize Password Form Design

The settings here used to be used to customise the form of password input. You can now use the Divi Builder module itself so use that instead. If you do however want to use the settings on this page, you can do this.

3. Display the password section

Go to the page and add the module called "Divi Protect".

Choose your protected section in the setting called "Select your Protected Section". Next on the design tab, there are various settings to customise the appearance of the input and the button.

Still need help? Contact Us Contact Us