How to Create a Pop-Up

Video Tutorial:

Article:

Pop ups are easy as pie to make in Convertri.

In this example, we’ll be creating a pop up which appears when the viewer scrolls down the page, but you can create pop ups triggered by elapsed time and user behaviour too: click here to learn more.

  1. In the Page Builder, click on the Layers button in the top toolbar, and click New Layer. Give the new layer a name, and click OK. Check the Select checkbox to edit it.
  2. Drag a panel element from the Elements Tray onto the canvas, and resize it using the handles. You can also change its color by selecting the panel, and clicking Background in the Properties panel.
  3. Add any elements you want to include in your pop up, and make sure they’re contained within the panel element.
  4. Add a Submit button to your container panel, and resize it smaller by dragging the handles. In the Properties panel, click Button Settings. Change the button label to ‘Close’, and choose Trigger from the Mode dropdown.

  5. Click to Add an Action. Under Element Triggers, click the plus icon to add a new action.
  6. Click the Trigger dropdown, and choose Click. In the Behaviour dropdown, choose Fade Out, and under the Subject dropdown, choose your pop up layer.
  7. In the Layers panel, toggle Start to Hidden to make sure your layer doesn’t show on page load.

You’ve created the pop-up: now it’s time to make it appear when the viewer scrolls down the page.

  1. In the Layers panel, click the Select checkbox to deselect it and enable editing on your main page.
  2. Next, choose the part of your page you want your viewers to scroll into view in order to trigger the pop up. Select an element here, around the point where you want the pop up to appear.
  3. In the Properties panel, click General Properties and give this element a name.
  4. Click Actions in the top toolbar. Under Element Triggers, click the plus icon to add a new action.
  5. Click the Trigger dropdown, and choose Scroll Bottom into View. In the Behaviour dropdown, choose Fade In, and under the Subject dropdown, choose your pop-up layer.

Click Save, and Preview. Scroll down to the element you added the trigger to, and your pop up should appear. Click the Close button, and it will disappear.