Trigger: Scroll -- Introduction
Overview
This extension provides users with a Scroll trigger to display a popup when visitors reach or pass a specific point on the screen. The trigger can be set to display a popup based either on vertical scroll distance or encounter with either a shortcode or HTML page element.
Distance option units include:
- percent ( % ),
- pixels ( px ), or
- rem.
The latter unit ( 'rem' ) is based on the relative font-size set in a site's stylesheet.
Element settings detect for either an embedded shortcode or CSS selector added to the content of a post, page, or custom post type. The shortcode is registered by Popup Maker and must be added within the post, page, or custom post type editor.
The CSS Selector method detects HTML attributes embedded in a post or page in the same way as the Extra CSS Selectors method used by the Click Open trigger. See the related article link below for an introduction on the use of that method.
Related article: Trigger: Click Open -- Use Existing or Custom Selectors to Set a Trigger
Popups can be configured to remain open (default) when scrolling back up, or to close when the trigger point is passed.
Article Contents
- Setup the Trigger
- Add New Trigger
- Link the Trigger to a Cookie
- Confirm Cookie Setting in the Scroll Trigger Settings box
- Scroll Trigger Settings box
- The Scroll Trigger in Action
Setup the Trigger
Add New Trigger
2. A popup box labeled 'Choose what type of trigger to add?' will appear. Select the ‘Scroll’ option, then select the 'Add' button.
Link the Trigger to a Cookie
Either accept the plugin default, or select a different option. Click the button labeled 'Add' to proceed to the next step.
Confirm Cookie Setting in the Scroll Trigger Settings box
7. In the 'Popup Settings' box, the ‘Scroll’ trigger and ‘On Popup Close’ cookie are now linked by the cookie ID set in the Scroll Trigger Settings box.
Scroll Trigger Settings box
The Scroll trigger and a cookie are now linked. But the remaining trigger options are not yet set. Let's edit the trigger and review the available option settings.
On the Triggers option tab of the Popup Settings box, select the pencil icon in the Actions column. This will open the Scroll Trigger Settings box where the remaining options settings will be reviewed.
‘General’ option settings tab
Distance
The Distance option sets the Scroll trigger to display a popup when a visitor vertically scrolls a preset distance down a page.
Plugin default value: 75%
Distance (units): pixels (px) | percent ( % ) | rem // default units: percent ( % )
Enter the desired value in the input field. On focus, the input field displays a set of up/down arrows that increment the entered value by +/- 1. Focus and click the units menu to view the options and choose between them.
Element
The Element option sets a Scroll trigger to display a popup when a visitor scrolls to or beyond a targeted page element. The element can either target a Popup Maker shortcode, or a CSS or jQuery selector. CSS selectors can target any class or id attribute added to an HTML element or tag. The targeted shortcode or selector must be added to the content of a post or page.
Unlike other Popup Maker shortcodes, the Scroll Trigger Point shortcode ( tag: [pum_scroll_trigger] ) must be added into the content editor of a page, page, or custom post type registered with WordPress. The shortcode is not available in the Popup Editor.
Related article: Shortcode: Scroll Trigger Point
To learn more about the Popup Maker shortcode button in the WordPress editor, see the related article below.
Related article: Shortcode Button
When Should the Popup Trigger?
The Element option provides users with 4 different options to display a scroll trigger popup. Each option is demonstrated in the next section.
What Type of Element Do You Want to Use as a Trigger Point?
Users can select from 2 options; Shortcode, or CSS Selector.
Shortcode
See the following related article to set the Scroll Trigger Point shortcode in the editor of a post, page, or custom post type.
Related article: Shortcode: Scroll Trigger Point
CSS Selector
Each Element option is demonstrated below in 4 separate videos ( run time: 4 - 10 seconds each ). The Popup Maker icon was added to some dummy page content on a test site. An HTML class of popup-maker-icon was added to the icon's <img> tag ( <img class="popup-maker-icon" src="icon-file.png"> ). A Scroll trigger was set to an 'Element' option targeting the .popup-maker-icon CSS selector.
'Element' option demonstration videos
1. When the element first comes on screen;
2. When the element has been completely revealed;
3. When the element begins to scroll off screen; and
4. When the element has completely scrolled off screen
For guidance on how to use CSS Selectors when setting a trigger, see the related article below.
Related article: Trigger: Click Open -- Use Existing or Custom Selectors to Set a Trigger
Close When Scrolling Back Up (Checkbox)
Default: unchecked. By default, the popup will remain open in the browser when a visitor scrolls back up the page. To close the popup on an upward vertical scroll past the popup trigger point, set the checkbox to ‘checked’.
The next video demonstrates a Scroll popup configured with the following settings:
- Type of scroll trigger: Element;
- Popup triggers when: Element completely scrolled off screen;
- Type of element used at trigger point: CSS Selector;
- Close when scrolling back up: Yes; and
- Disable Overlay: checked (enabled).
To disable the popup overlay (background) layer, go to: ' Popup Settings' box >> 'Display' tab >> 'Advanced' category >> 'Disable Overlay' checkbox.
Related video: Show or hide popup when scrolling past page element.
Cookie Name (custom field)
See the previous section 'Link the Trigger to a Cookie'.
The Scroll Trigger in Action
The following video demonstrates the use of a Scroll trigger popup to display a banner-style popup that contains an email signup form.
Learn to create a banner-style, high conversion popup using the Scroll trigger extension.
Related article: Banner Style Popup for Opt-Ins Creation Guide