How To Build A Protect Section - Demo
Written by the Divi Engine Documentation Team
Introduction
Follow these steps to build the Divi Protect Section seen in the image below.
Preview
Description
How to build a Divi Protect Section.
Difficulty
Easy.
Time
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.