Our Pop-Ups Pro widget is the complete solution for creating custom and powerful popup modals. Great for engaging site visitors to promote sales, newsletter signups, event announcements and more.
Several initialization modes allow pop-ups to be launched automatically (with custom timing), opened via custom button, or triggered by scroll position.
An extensive feature set provides loads of options for creating the ultimate popup. Additional features include pop-up animation defaults, visit tracking, and full custom control of pop-up content via graphic styles.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.1
Supported Devices: Desktop, Tablet, Phone
Release Log
1.1: Updated to better handle device rotation when crossing breakpoints on mobile and tablet size viewports (09/08/2017)
1.0: Initial release
Setup
CREATING A POP-UP
Drag the widget from the library and drop into your project in Design mode. The widget may be placed out of the way, off canvas.
This widget uses Muse Graphic Styles to link up with the pop-up you create and style.
Start by creating a pop-up. Use any Muse element you like to create a pop-up. While rectangles and text boxes may be used, most users will prefer to use a state button to design their pop-up.
Our live preview demostrates some examples of pop-ups. Feel free to use images, text, forms, or most anything you like. Whatever can be placed in a state button may be used in your pop-up.
Once your pop-up is created and styled up (don't worry, you can update it whenever you like), apply a graphic style to it.
Open the widget option panel.
Enter the graphic style name into the first option, Pop-Up Content Graphic Style.
POP-UP CONFIGURATION
Now that your pop-up has been created, styled, and linked up to the widget, it's time to configure how your pop-up will be displayed.
Transition Type Offers many different styles of how the pop-up comes into view.
Transition Duration: The time (in seconds) it takes for the transition into view to take.
Overlay Color & Overlay Opacity allow control over the background overlay seen when the pop-up has been triggered.
Disable Pop-Up On Mobile: As the title suggests, this setting allows you to disable pop-ups on mobile. Google has begun to penalize sites that have pop-ups on mobile sizing, so this setting may be useful to you. Enable by checking the option box, and use the Mobile Brakpoint To Disable Pop-Up setting to set the breakpoint size (in pixels) to begin disabling the pop-up. Everything below the size entered here will be disabled.
If you find that the Disable Pop-Up On Mobile setting is grayed out, enable the Trigger Pop-Up On Page Load setting in the Pop-Up Trigger section. Mobile pop-ups may only be disabled in this mode.
Visit Tracking: This setting allows you to enable the ability to turn off pop-ups for a defined number of days after the pop-up has been triggered. This is handy for sites that people frequent regularly, as it allows users to not be forced to see the pop-up every single time they load the page. Keep in mind that the pop-up will always be triggered on a user's first visit, but will not be seen on subsequent visits until the allotted time has passed. This function applies to individual machines or devices.
POP-UP TRIGGER SETUP
There are 3 main trigger modes:
Automatic: While there is not a trigger type titled "Automatic", by checking the box titled Trigger Pop-Up On Page Load, you are enabling the widget to trigger the pop-up automatically each time the page loads. In addition, a delay option is available (in seconds) using the Delay Before Opening (s) setting. As the title states, this setting provides a delay before the pop-up is triggered. Most larger commercial sites that use pop-ups employ a delay of a few seconds before triggering the pop-up.
Trigger On Click: This mode uses a custom button to trigger the pop-up. Start by selecting "Trigger On Click in the Trigger Type dropdown. Next, create a custom button using a state button, rectangle, or text box. Apply a graphic style to the button. And finally, enter the graphic style name into the Open Button Graphic Style field. Now, clicking the button you created will trigger the pop-up.
Trigger On Scroll: This final trigger mode allows the pop-up to be triggered by scrolling down the page. This mode requires that an element is used as a scroll trigger. The scroll trigger can be placed anywhere on the page. It's position on the page determines the point of scroll in which the pop-up will be triggered. If the scroll trigger is placed 600px into the page, then the pop-up will be triggered when the user has scrolled 600px. Creating a scroll trigger is identical to the process of creating a custom open button for the Trigger On Click mode, as described above. Simply take any Muse element (a rectangle is the easiest) and apply a Graphic Style name to it. Enter the Graphic Style name into the Open Button Graphic Style field. Place the rectangle where you would like the pop-up to be triggered during scroll. Finally, keep in mind that this is not a button; it is just a placeholder that triggers the pop-up during scroll. It should not be seen on the page. It is best to give the element a transparent fill so that it is not seen. This is exactly how our "Scroll Example" page was built in our Live Preview.
POP-UP CLOSE BUTTON SETUP
There are 2 close button styles available: default and custom. Use the Close Button Type dropdown to select "Default" or "Custom".
The Default option is automatic. It places an "X" in the upper right corner of the screen when the pop-up has been triggered. Control it's appearance using the Default Close Button Size and Default Close Button Color settings.
For custom close buttons, start by creating your close button using a state button, rectangle or text box. Apply a graphic style to this element. Enter the Graphic Style name into the Close Button Graphic Style field. A couple things to note about custom close buttons:
Close buttons are best placed inside the pop-up. So if you are using a state button for your pop-up content, drop the custom close button inside the pop-up content state button.
A smart way to use custom close buttons is using text. See the "Auto Example" and "Click Example" in the Live Preview for examples of using text as custom close buttons.
The final setting in the Pop-Up Close section is Close Timer. This setting allows the pop-up to close automatically after a set amount of time. The Delay Before Close setting sets the delay time.