Contents
Related Posts
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:
- Ask the visitor a Yes or No question, and allow the visitor to click the Yes or No button
- 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
- 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.)
- 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
- Width: Set to 600px
- Height: Select Custom
- Custom height: Set to 800px
- Vertical position: Center
- Close button: Set to Hide
- Entrance animation: Choose Fade In
Content
- Add a heading that asks a yes or no question, and modify it as needed.
- Add two buttons, one for Yes and one for No, and modify the style of each as needed.
- 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
- Fund type: Transparent
- Image: Add a background image and adjust its settings as needed
Popup> Advanced tab
- Filling: Set to 80 px for right and left, leaving
and blank background
upper part
- Avoid overlapping closure: Set to Yes
- Prevent closing with ESC key: Set to Yes
Edit section
Section> Style> Border
- Border type: Solid
- Border width: 15px
- Colour: Choose a color for your border
- Edge radius: 40 only for the lower part
Section> Advanced
Filling: 30px only for the bottom part.
Edit column
Column> Style
- Fund type: Gradient
- Colour: Choose the first gradient color
- Second color: Choose the second gradient color
- Type: Radial
Border
- Edge radius: 20px only for the bottom part
- Shadow of the box: Set as required
Column> Advanced
- Margin: Set -30 (minus 30) for Top and Left
- 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:
- Link: Click the Dynamic icon
and choose Actions> Popup Window
- Click on Arise again
- 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
- If you haven't created a button to launch the popup yet, you can do so now. Edit your text and typography as needed
- Link: Click the Dynamic icon
and choose Actions> Popup Window
- Click Popup again and under Action choose Open popup window.
- In the Popup field, enter some letters to search / find the Popup you just created.
- 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.
Contents
Toggle