Create Your First Popup -- Summary Guide
This article guides new users to quickly create a popup using the fewest steps possible. Popup Maker-specific terms and their application are covered in other documents linked to below.
Popups are created and edited in the popup editor. As a new user, you need to know a few locations and actions in the editor to create and publish your first popup.
Each new popup is built using the same group of initial settings. Popup Maker is so extendible, a new popup doesn’t even require any content to display in the browser. This makes popup creation easy.
However, a popup created with the plugin’s initial settings will probably look nothing like what you intend to build. That's why you'll be referred to Popup Maker’s initial settings and their expected behavior. Edit and update those settings to customize your popup.
- Support for Right-to-Left Written Languages
- Open the Popup Editor
- Working in the Popup Editor
- Change Popup Maker's Initial Settings to Customize Your Popup
Support for Right-to-Left Written Languages
'Settings' >> 'General' >> 'Site Language'
When an RTL language is selected, the orientation of the site admin and front end changes to right-to-left. PUM is translation and localization ready, but not currently translated into any RTL language.
Notable RTL languages include:
If you'd like to provide translation assistance for Popup Maker, please see the following article on how to get involved and the benefits available to translators.
Related article: Become a Translator & Help Us Grow
Open the Popup Editor
From the WordPress admin, either:
1) Open Popup Maker >> All Popups, and select the Add New Popup button at the top of the admin page, or
2) Click on the Popup Maker >> Add Popup submenu.
See the related article to locate these links in the WordPress admin.
Related article: Add Popup submenu / Add New Popup button
Get acquainted with the popup editor. See the related article below.
Related article: The Popup Editor -- Introduction
Working in the Popup Editor
Figure 1. Three locations required to create a new popup in the popup classic editor.
Figure 2. Three locations required to create a new popup in the popup block editor.
Three (3) actions in the popup editor are required to create and publish a new popup:
|1) Enter popup name||Popup Name field||The popup name will appear on the All Popups admin page in the Popups table Name column.|
|2) Add a popup trigger||Popup Settings box >> Triggers tab|| Choose a free trigger: Auto Open / Time Delay or Click Open.
Related article: 'Triggers' option settings
| 3) Click the Publish
|Publish box (classic editor) or Publish button (top of editor sidebar)||Publish saves a popup to the database.|
Publishing a Popup on a Live Server
A popup must be set to Published to display and view it on the front end. However, the Targeting tab in the popup editor's Popup Settings box is initially set to display a popup on every page and post of site. For users who create popups on a live server, that presents a challenge. The selection of a trigger becomes important to preview a popup, while not annoying visitors by opening that popup on every post and page.
|Time Delay / Auto Open||Displays a popup after a preset length of time.|
|Click Open||Displays a popup when a visitor clicks a specific element on a web page.|
|Form Submission|| Processes a form placed inside a popup. Use with Popup Maker subscription forms, and WordPress form plugins that integrate with Popup Maker.
Instead, choose the Click Open trigger. The trigger will only display a popup when the link or page element is selected. Later on, you will need to edit some settings to properly set up this trigger.
Once the popup is set to Published, it can be previewed from the classic editor with the Preview button or opened on the front end with the Popup Maker Admin Toolbar.
Related article: Trigger: Click Open -- Overview & Methods
Change Popup Maker's Initial Settings to Customize Your Popup
The New Popup in the Browser
Initial Popup Settings
Add Your Content
At this point, add your popup content. Just like the WordPress post and page editor, the popup editor accepts the same type of content. This includes:
- embedded media (images, graphics, video, audio), and
Related article: Register a Shortcode to Run Editor Scripts
About Popup Maker Shortcodes
Popup Maker registers several shortcodes with WordPress that work in the content editor. [ If using the block editor, add your shortcode to a shortcode block.] See the following collection of articles to learn about the Popup Maker shortcode button and plugin shortcodes.
Related index article: Shortcodes
Popup Maker Integrates with Form Builder Plugins
Popup Maker integrates with the WordPress form builder plugins listed below to render inside a popup.
- Ninja Forms;
- Contact Form 7;
- Quiz and Survey Master;
- WP Forms;
- Caldera Forms;
- MailChimp for WordPress.
Add their shortcode to the popup editor just as you would for a page or post. Use the Form Submission trigger and cookie together to manage the data submitted from each form.
Related article: Popup Maker Integration with WordPress Form Builder Plugins
Related article: Trigger: Form Submission
Customize the Popup Settings & Styles
Most popup customizations are done in the popup editor Popup Settings box and the Popup Theme editor.
Popup Settings box
See the article collection in The Popup Editor category. Refer to the article on each option tab of the Popup Settings box for details.
Related index article: The Popup Editor
Popup Themes admin page
View the preinstalled popup themes on the Popup Theme admin page. Edit an existing theme or add and customize a new popup theme.
Related article: Popup Themes submenu
See the article collection in the Theming Popups category. Learn to preview and style popup customizations using the popup theme editor.
Related index article: Theming Popups
When Popups Don't Work as Intended
Sometimes popups don't work as intended. At that point, you've got to assess the problem in order to fix it. See the collection of articles we've prepared on the topic.
Related index article: Problem Solving