Page Scroll

Step 1: Create Your Popup

Begin by accessing the WordPress admin panel and navigating to Breakdance > Popups. Click on Add Popup to add a popup.

Step 2: Set Popup Location

Under Location, choose to apply the popup everywhere. This setting ensures the popup is available on all pages of your site. Alternatively, you can choose a more specific location and add conditions.

Step 3: Define the Trigger

In the Popup Opens When section, click on Add Trigger and select Page Scroll. For the ‘Scrolls To’ option, you have two choices:

  • Percent: Set a percentage to determine how far down the page the user must scroll for the popup to appear. For example, you could set it to 50% to trigger the popup when the user scrolls half way down the page.
  • Selector: Choose this to trigger the popup when scrolling to a specific element on the page. Enter a valid CSS selector, such as #some_element_id. To assign an ID to the target element on your page, edit the page in Breakdance and assign the ID to the desired section in the properties panel by clicking the settings icon, and then opening the Advanced panel. Remember, the hash (#) is used in the popup settings, but not when assigning the ID to the element itself – i.e. if your element ID is some_element_id, your CSS selector would be #some_element_id.

Step 4: Design Your Popup

Click Edit in Breakdance to design your popup. You can add elements as needed.

Step 5: Save and Test

After completing your popup design, save it. Test it by visiting a page where you can scroll. The popup should appear once you scroll down to the set percentage or reach the specified element.