Create a content lock popup

Create a popup that prevents visitors from seeing the page’s content unless they click a specific button within the Popup.

You’ll learn how to create a popup that:

1. Ask the visitor a Yes or No question, and allow the visitor to click either a Yes button or a No button
2. Show the content of the page if the visitor clicks the Yes button, and redirect the visitor to another URL if she clicks the No button or clicks anywhere other than the Yes button.\

---

Design The Popup And Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we’ll design our own.

Popup > Layout Tab

1. Width: Set to 600px
2. Height: Select Custom
3. Custom Height: Set to 800px
4. Vertical Position: Center
5. Close Button: Set to Hide
6. Entrance Animation: Choose Fade In

Content

1. Add a Heading that asks a Yes or No question, and style it as needed.
2. Add two buttons, one for Yes and one for No, and style each as needed.
3. Click the cog / gear icon  located at the bottom left of the panel to return to the Popup Settings

Popup > Style Tab

1. Background Type: Transparent
2. Image: Add a background image and adjust its settings as needed

Popup > Advanced Tab

1. Padding: Set at 80px for right and left, leaving 

   top
    and bottom blank

2. Prevent Closing on Overlay: Set to Yes
3. Prevent on Closing on ESC Key: Set to Yes

---

Edit the Section

Section > Style > Border

1. Border Type: Solid
2. Border Width: 15px
3. Color: Choose a color for your border
4. Border Radius: 40 for Bottom only

Section > Advanced

Padding: 30px for Bottom only.

---

Edit the Column

Column > Style

1. Background Type: Gradient
2. Color: Choose the first gradient color
3. Second Color: Choose the second gradient color
4. Type: Radial

Border

1. Border Radius: 20px for Bottom only
2. Box Shadow: Set as needed

Column > Advanced

1. Margin: Set -30 (minus 30) for both Top and Left
2. Padding: Set 100px for both Top and Bottom

---

Edit the Content

Heading > Style

Title: Set the color to white.

Button > Style

Text Color: Set the color to white for each button.

Edit the Yes Button

Content:

1. Link: Click the Dynamic icon and choose Actions > Popup
2. Click on Popup again
3. Choose Close Popup and slide Don’t Show Again to Yes

Edit The No Button

Content:

Link: Enter any age-appropriate site link

---

Set the Publish Options

Click Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.

---

Edit the page that contains the Buy button (or whichever button you create to launch the popup).

Edit the Buy Button

1. If you haven’t already created a button to launch the Popup, you can do so now. Edit its text and typography as needed
2. Link: Click the Dynamic icon and choose Actions > Popup
3. Click Popup again, and under Action, choose Open Popup.
4. In the Popup field, enter a few letters to search/find the Popup you just created.
5. Click the Update button to update the page.

All done. Now go to the page with the Buy button, click it, and see the popup in action.