Building Popups

Creating Responsive Pop-Ups with Email Capture in Breakdance

This article provides an overview of creating a two-column, responsive pop-up with an email capture form in Breakdance. The pop-up functionality in Breakdance is versatile, allowing for various customization options.

Setting Up a Pop-Up in Breakdance

Creating and Configuring the Pop-Up

  1. In the WordPress admin panel, navigate to Breakdance > Pop-Ups.
  2. Click ‘Add Pop-Up’ and name your pop-up, e.g., ‘Email Subscribe’.
  3. Choose the location for your pop-up, such as specific pages or posts.
  4. Use conditions to specify pages where the pop-up should appear, like the home page.
  5. Stack conditions for more precise targeting, such as displaying to logged-out users on specific pages.

Adding Triggers and Limiting Pop-Up Display

  1. Add a trigger for the pop-up, like ‘Page Scroll’ with a set percentage.
  2. Limit the frequency of the pop-up display per page load to avoid annoying users.

Designing the Pop-Up

Building the Layout in Breakdance

  1. Add a two-column layout inside the pop-up.
  2. Place an image in the right column and a form builder in the left.
  3. Customize the form by deleting unnecessary fields and adding placeholders.
  4. Design the form with styling options, such as hiding labels and setting button size and color.

Adding Headings and Customizing Styles

  1. Add headings and text above the form for context.
  2. Adjust the column layout for content alignment and spacing.
  3. Customize image and column sizes for a balanced appearance.
  4. Ensure the layout is responsive and looks good on mobile devices.

Setting Up Pop-Up Animations and Auto-Close Functionality

  1. Under Design > Popup > Animation in the Properties panel, choose entrance and exit animations for the pop-up.
  2. Configure the pop-up to close automatically upon form submission success by editing the Form Builder’s Actions and using the Popup action to close the popup when the form is submitted.
  3. Link the form to email marketing services if needed for email list building.

Testing the Pop-Up on the Front End

Save the pop-up and test it on the front end of your website. Verify that the pop-up appears correctly, the form functions as intended, and the pop-up closes upon successful submission.

Additional Notes

Pop-ups in Breakdance offer a dynamic way to engage visitors and capture email addresses. The ease of customization and variety of settings make it a valuable tool for any website looking to enhance user interaction.