Create Your First Popup -- Summary Guide

Introduction

This article guides new users to quickly create a popup. There are several plugin-specific terms that are useful to know as part of the process. This article briefly describes a few important terms, and focuses on the fewest steps  required to create a new popup. 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. 


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

Classic Editor

Figure 1. Three locations required to create a new popup in the popup classic editor. 

Block 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: 

Action 
Location Comments
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 
button.
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. Therefore, the selection of a trigger becomes important for the purpose of previewing the popup.  

Popup Triggers 

A popup trigger manages how and when a popup will display. The free version of Popup Maker includes 2 triggers: 
The first trigger displays a popup after a preset length of time, while the second displays when a visitor clicks a specific element on a web page. 
Either trigger will work to preview a popup in the browser.  The  Time Delay / Auto Open trigger is the simplest to use. It automatically displays a popup on every page and post until the  Targeting option is changed. However, the default display on every page can be annoying. 

In this case, choose the  Click Open trigger instead. 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

From the WP admin, visit the front of the site. The result is a blank popup!  No content was added. The popup is styled using the Popup Maker initial settings.  Adding and publishing a new popup is meant to be simple.  

Initial Popup Settings 

Notice that there were lots of things you  didn’t have to do to create and publish a new popup.  Those initial settings were  preset for you by Popup Maker when you clicked the Publish button. See the following article to review those initial plugin settings. 
Every new popup uses the same set of initial settings. Some initial settings (like the popup theme) can be changed from the plugin Settings admin page.  The rest of the popup settings (trigger(s), cookies, targeting conditions, etc.) are configured in the popup editor's Popup Settings box. Popup themes are customized using the Popup Theme editor. 

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: 

  • text,
  • links, 
  • buttons,
  • embedded media (images, graphics, video, audio), and
  • shortcodes.

Note: Do not add either PHP or JavaScript scripts directly to the editor. Build a shortcode to contain those scripts, and add the shortcode to the editor. See the related article for details.

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

Third-Party Shortcodes Work in the Popup Editor

Shortcodes registered by third-party WordPress plugins (for example, Ninja Forms, GravityForms, Contact Form 7) will all work in the classic and block popup editor. Add your shortcode to the popup editor just as you would in a post or page. 

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.