#CENTERED POPUP WINDOW MANUAL#

On Scroll: If set to Yes, select direction (Up or Down) and the amount to scroll before popup is triggered.

On Page Load: If set to Yes, set the number of seconds to wait, upon page load, before popup is triggered.

Select Yes or No for each option that will cause the popup to occur. Triggers are the user actions that cause your campaign to popup. For example, add an Include condition and choose Singular > Front Page to only show the popup on the site’s home page.

Set the conditions that determine where your popup is used (excluding manual triggering). my-class)Ĭontrol Popup via Publish Settings Set ConditionsĬonditions allow you to set on which pages of your website the popup will appear. CSS Classes: Add your custom class without the dot (e.g.Padding: Adjust the padding around the popup.

Open By Selector: Enter a list of selectors that will manually trigger the popup (CSS IDs, classes or data-elements).Avoid Multiple Popups: If the user has seen another popup on the page he visits, hide this popup by selecting Yes.Disable Page Scrolling: Select Yes to prevent users from scrolling the page shown behind the popup.Prevent Closing on ESC Key: Select Yes to prevent users from being able to close the popup by pressing the ESC key.Prevent Closing on Overlay: Select Yes to prevent users from being able to close the popup by clicking on the overlay.Automatically Close After (ms): Enter the number of ms to wait before automatically closing the popup.The close button will only appear after that time has passed. Show Close Button After (sec): Enter a number of seconds.Background Color: Choose the background color of the Close button for both the Normal and Hover states.Color: Select the color of the Close button for both the Normal and Hover states.Horizontal Position: Use the slider to select the horizontal position of the Close button.Vertical Position: Use the slider to select the vertical position of the Close button.Position: Choose to display the Close button on the Inside or the Outside of the popup.Border Radius: Set the border radius to control corner roundness for each side of the popup.Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.Background Type: Choose a background color, image, or gradient.Note: To see the content you’ve chosen, you must reload the page after selecting the dynamic content. Preview Dynamic Content as: Choose from any Archives, Pages, Posts, Media, or 404 pages.Status: Draft, Pending Review, Private, or Published.This title will only show on the backend, not to the user. Animation Duration: Set the length of time for animation, in milliseconds.Choose any animation effect to preview the effect. Exit Animation: Choose the popup’s exit animation such as fade and zoom from the dropdown selections.Entrance Animation: Choose the popup’s entrance animation such as fade and zoom from the dropdown selections.Show Button After x seconds (if Show Close Button was chosen): Select the number of seconds to wait before showing the close button.Close Button: Choose to Show or Hide the Close button.Overlay: Show or Hide the background overlay.Vertical: Choose the vertical position of the popup, from Top, Center, or Bottom.

Horizontal: Choose the horizontal position of the popup, from Left, Center or Right.

Use 100vh for both width and height to create full-screen popups

Height: Set the exact height of the popup, using either px or vh.

Width: Set the exact width of the popup, using either px or vh.

Note: Click the Popup Settings gear icon in the panel’s bottom toolbar to edit the popup settings. Control the layout, conditions, rules and styles of the popup,and then design the popup content.

#CENTERED POPUP WINDOW MANUAL#

Centered popup window