Skip to main content




Create a pop-up window that prevents visitors from seeing your page content unless they click a specific button within the pop-up window.

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. Show the page content if the visitor clicks the Yes button, and redirect the visitor to another URL if they click the No button or anywhere other than the Yes button.


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: Gradient
  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.