How To Build A Protect Section - Demo

Preview.

In this example, we will be showing you how to build the Divi Protect Section seen in the image below.

Description.

How to build a Divi Protect Section.

Difficulty.

Easy.

Time.

20 Minutes.

Setting 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."

Setting It Up - Divi Protect Section.

Next, create a Divi Protect Section.

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

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

Customising 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 writing in a phrase like, "Enter password and click Submit." Remember to click on the Design Tab to center the text.

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

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

Custom Code.

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

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.

Now view your Divi Protect Form from the frontend.

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

Still need help? Contact Us Contact Us