How to create a content blocking popup

Cree una ventana emergente que evite que los visitantes vean el contents de la página a menos que hagan clic en un botón específico dentro de la ventana emergente.

You will learn how to create a pop-up window that:

1. Ask the visitor a Yes or No question, and allow the visitor to click the Yes or No button
2. Muestre el contenido de la página si el visitante hace clic en el botón Sí, y redirija al visitante a otra Url si hace clic en el botón No o en cualquier otro lugar que no be el botón Sí.

Design the pop-up window and its content

1. Go Templates> Pop-ups> Add New and give your new popup a name. (An alternative method is to press CMD + E or CTRL + E open Discoverer, search for Popup, choose Add new popupand give it a name.)
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. For this example, we will design our own.

Popup Window> Design 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 modify it as needed.
2. Add two buttons, one for Yes and one for No, and modify the style of each as needed.
3. Click on the gear / gear icon located at the bottom left of the panel to return to the Settings pop-up

Pop-up window> Style tab

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

Popup> Advanced tab

1. Filling: Set to 80 px for right and left, leaving
   
   upper part
   and blank background
2. Avoid overlapping closure: Set to Yes
3. Prevent closing with ESC key: Set to Yes

Edit section

Section> Style> Border

1. Border type: Solid
2. Border width: 15px
3. Colour: Choose a color for your border
4. Edge radius: 40 only for the lower part

Section> Advanced

Filling: 30px only for the bottom part.

Edit column

Column> Style

1. Fund type: Degraded
2. Colour: Choose the first gradient color
3. Second color: Choose the second gradient color
4. Type: Radial

Border

1. Edge radius: 20px only for the bottom part
2. Shadow of the box: Set as required

Column> Advanced

1. Margin: Set -30 (minus 30) for Top and Left
2. Filling: Set 100 px for the top and bottom

Edit content

Title> Style

Title: Sets the color to white.

Button> Style

Text color: Sets the color to white for each button.

Edit the Yes button

Contents:

1. Link: Click the Dynamic icon and choose Actions> Popup Window
2. Click on Arise again
3. Choose Close popup and slide Not reappear So

Edit the No button

Content:

Link: Enter any age appropriate sitelinks

Set publishing options

Click To post button. There are no advanced conditions, triggers, or rules for this popup, so click the Save and close button.

Edit the page that contains the Buy button (or whatever button you create to open the pop-up window).

Edit the Buy button

1. If you haven't created a button to launch the popup yet, you can do so now. Edit your text and typography as needed
2. Link: Click the Dynamic icon and choose Actions> Popup Window
3. Click Popup again and under Action choose Open popup window.
4. In the Popup field, enter some letters to search / find the Popup you just created.
5. Click on the To update button to refresh the page.

All ready. Now go to the page with the Buy button, click on it and see the pop-up in action.