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. Click the eye icon next to its name to select 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 Appearance, and change the button label to ‘Close’.
  5. Click to select the Close button, and click Actions in the top toolbar. 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, click the Visible icon next to your pop up layer to Invisible to make sure it 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 eye icon next to your pop up layer 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.