How to create a 2 step Opt-In Popup that Engages User Interaction

Create a 2 Step Opt-in Popup to engage users to interact with your website. You can use these types of popups to create questions about upcoming offers or whether or not they like your content. 

Design and Build a Popup

1. From the WordPress Dashboard > Templates > Popup
2. Click on Add New and name your template 
3. Once you click Create Template you will be redirected to the stunning library of pre-made popup templates that you can insert with just a click, or you can always start from scratch. 

Popup Settings

Layout

1. Width - 100 VW. This will make the popup take up the entire viewport of the screen. 
2. Height - Fit to Content 
3. Content Position - Center
4. Horizontal Position - Bottom
5. Overlay - OFF
6. Button - OFF

Advanced

1. Prevent Closing on Overlay - ON
2. Prevent Closing on ESC Key - ON 

Add the content for the Popup 

1. Add a section with three columns. Insert a heading element, type in the content, and tweak the styling options. 
2. Add two buttons one confirming the popups and the other denying the popup. 
3. Style and design the popup to your likings  

Build the Second Popup 

1. Follow up the same procedures as for the first popup. The Popup Settings will be set the same. One single change will be the Entrance Animation which will be set to Fade In for a seamless transition of the popups. 
2. Add a section with two columns. 
3. Drag in a heading element to invite users to subscribe to your email list. 
4. Search for the form element and drag it onto the page. 
5. Adjust the proper settings and stylize the form to match your design. 

Build the Third Popup 

1. Follow up the same procedures as for the first popup. The Popup Settings will be set the same. One single change will be the Entrance Animation which will be set to Fade In for a seamless transition of the popups. 
2.  Select a structure for the popup. Once again we will select the two columns structure. 
3. Include a heading element to introduce the popup and add a button that closes the popup. 
4. Stylize the popup to match the rest of the design. 
5. Click on the button to open its settings. From the link option, click on the [dynamic content icon] and select Popup. Press the [wrench icon] next to the Popup and under Action choose Close Popup. Also, switch the Don't Show Again option. 

Publish the Popup 

This applies only to the first popup. The other two popups will be triggered with buttons.

1. Configure the first button, from the link option click on the dynamic content icon, and select Popup. Next click on the [wrech icon] and under Action choose Open Popup. Select the second popup template we've designed. 
2. Click on the second button, from the link option click on the dynamic content icon, and select Popup. Next click on the [wrech icon] and under Action choose Open Popup. Select the third popup template we've designed.
3. Once you are done designing the popup, click on Publish and assign it to a specific page on your website. Select Singular > Pages > and assign the desired page. 
4. From the Triggers tab switch the On Scroll to Element option ON. Write an ID class for the element. We will set it to appear after our user teacher the last section on our page. Note that before the ID class you will need to write a dot.
5. Edit the page we want our popup to be displayed. Click on the Sections handle and from the Advanced tab, in the CSS class option type in the ID we set it out earlier from the triggers tab. Note that in this case, we will need to write the ID class without the dot.