How To Build A Protect Section - Demo

Written by the Divi Engine Documentation Team


Follow these steps to build the Divi Protect Section seen in the image below.



How to build a Divi Protect Section.




25 Minutes.

Step 1: Set It Up - Divi Library Layout

Begin by creating a Divi Library Layout.

1.) Go to Divi > Divi Library and give your layout a name.

2.) Set the Layout Type to Layout.

Step 2: Set It Up - Divi Protect Section

Next, create a Divi Protect Section.

3.) Click the Add New button and create a new Protect Section.

Step 3: Set It Up - Divi Protect Module

Make your way to the page of your choice and add the Divi Protect Module.

4.) Add the Divi Protect Module into a Row.

Step 4: Customize Our Settings - Divi Library Layout

Head over to your Divi Library and click on the new layout that you have just made. 

1.) Go to Divi > Divi Library.

2.) Give your layout a name (if you have not already done so).

3.) Add the Text Module with a message. Remember to click on the Design Tab to centre the text.

Step 5: Customize Our Settings - Divi Protect Section

Head over to Divi Engine > Protect Section and customize your Section and Form. 

1.) Give your Section a Title.

2.) Add content to your Divi Protect Section setting the width to the size of your choice, we suggest 100%.

3.) Give your Protect Section a password. If you would like to create a strong password please click HERE.

4.) Select the Divi Library layout that you have just created from the complex content before dropdown.

5.) Give your Divi Protect Section a Unique Shortcode (ID).

6.) Change the text of the Button to Submit (or any other text).

7.) Set the Cookie Duration to the number of days that you think is best. Here it is set to 4 days, which means that the password will be saved in the browser for 4 days.

Step 6: Customize Our Settings - Divi Protect Module

You are almost at the end. Open up the page or post containing the Divi Protect Module.

1.) Open up the module and select the Divi Protect Section that you have made.

Step 7: Add Custom Code

If you would like to adjust the width of the password form then please add this custom CSS adjusting the number after "max-width." Please know that since you have set the width of your Protect Section when the password is entered correctly, the width of your Section will show.

Step 8: Conclusion

To customize the button as seen in the image at the start of this document head over the Appearance > Customize > Buttons > Button Style.

1.) Set Text Size to 20px and text Color to #1d0d6f.

2.) Set Border Width to 2px.

3.) Set Border Color to #0af2a5.

4.) Set Border Radius to 10px.

More Support?

Please email us at [email protected] if you are unable to get Divi Protect working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.