Create Your First Popup

Introduction

The Popup Maker plugin is a powerful, flexible tool to create and deliver supplemental content to your site visitors. First time plugin users are sometimes confused by the plugin admin interface, and typically overwhelmed by the many options involved to create their first popup. 

This article is intended as a step-by-step guide for new and returning users of Popup Maker.  It strives to reduce the number and sequence of steps to the fewest possible in order to help users build and publish their popup.

Certain terms that relate to the plugin's design and function may be unfamiliar to new or infrequent users. This article will introduce those terms, and refer to documentation articles where those terms and their underlying ideas are explained at greater length. 


Admin Areas Where You'll Build Your Popup

The creation and publication of a popup involves working in four (4) areas of the WordPress and Popup Editor backend: 

  1. WordPress Admin page (see screenshot above)
  2. Popup Editor
  3. Popup Editor 'Popup Settings' box, and 
  4. Popup Editor 'Publish' box. 

Eleven Sequential Steps to Build Your First Popup

Table 1 below lists 11 sequential steps involved with the creation and publication of a popup. The table refers to: 

  1. the admin location where the step occurs; 
  2. the user activity; and 
  3. whether the step is required or optional. 

Notice from the 'Required or Optional' column in the table below that only 4 of the 11 steps are required in order to create a minimally viable popup. Four steps. That's all it takes. 

Some optional steps, such as item 4 ( 'enter popup content' ) are highly recommended.  After all, why make the effort to use this plugin if no popup content will be displayed to your visitors!  But even the addition of content is not a required step to save and publish a popup.

Table 1. Eleven (11) Sequential Steps to Create and Publish a Popup

Step
Number
Admin
Location

User Activity
Required or
Optional
1 WP Admin or
Popup Editor
Select 'Add Popup' Required
2 Popup Editor Enter a 'Popup Name' Required
3 Popup Editor Enter a 'Popup Title' Optional
4 Popup Editor Enter popup content Optional
5 Popup Settings Select a Trigger Required
6 Popup Settings Set and link a Cookie Optional
7 Popup Settings Target popup display Optional
8 Popup Settings Manage popup display settings Optional
9 Popup Settings Manage popup close settings Optional
10 Publish Save changes. Publish or
save to draft mode.
Required
11 Popup Editor Preview Popup Optional


Step 1: Select 'Add Popup'

(Required)  To create your first popup, select the 'Add Popup' submenu option within the Popup Maker menu setting.  This will open the Popup Editor for editing.

Users with existing popups can add a new popup from the 'Popup Maker' -> 'All Popups' page, and select the button 'Add Popup'. This will open the Popup Editor for editing.

Related article: Popup Editor Introduction [version 1.7+]

[ Back to top ]


Steps 2, 3, & 4: Add a Popup Name, Title, and Content

In the Popup Editor, follow the steps below to set up your popup. 

Step 2:  Popup Name (required).  Give your popup a name. This identifies the popup, and creates a class attribute 'popmake-{popup-name}', which can be used to set a trigger and display a popup. 
Step 3:  Popup Title (optional).  Add a title to your popup. This title is displayed in the popup container on the front end of your website. Leave this field empty if you do not want to display a popup title.
Step 4:  Add your popup content (optional; strongly recommended). This can include text,  registered shortcodes, links, images, graphics, or video.  
If you're simply experimenting with building a popup, you can add some 'dummy text' to the editor for test purposes using a 'Lorem Ipsum' generator.
Related article:  Lorem Ipsum generator

Step 5: Select a Trigger

(Required) By default, the free version of Popup Maker includes two popup triggers:  
  • Auto Open / Time Delay; and 
  • Click Open. 

A minimally viable popup requires the selection of at least one trigger in order to display a popup. Popups can also accept more than one trigger.

Additional trigger selections in the 'Popup Settings' box are available by purchasing one or more of our premium plugin extensions.

Related article:   'Triggers' option settings. Lists all default and premium triggers available with Popup Maker (see sections 'Default Plugin Triggers' and 'Premium Plugin Triggers').  
Related article:   What Is A Popup Trigger? Describes all default and premium triggers available with Popup Maker, and recommended use cases.

(Optional) Cookies control the repeat display of popups in the browser. To work, they must be set within the 'Popup Settings' box and linked to a popup trigger.  

When creating a new popup, users may not wish to initially set a cookie. This allows for experimentation and frequent inspection of the popup while it's being built. 
Once the popup is published on a site, it's a good idea to set and link a cookie to whichever trigger will be used to display the popup. Refer to the related article link below for details and recommendations on how to set up a popup cookie. 
Related article:   'Cookies' option settings. 
Note: Popup Maker will process shortcodes added to the Popup Editor that are registered with WordPress. Form plugins provide shortcodes to display their forms within a post, page, or popup template. 
Popup Maker integrates directly with 3 form plugins:   Ninja Forms, GravityForms, and  Contact Form 7.  
Please refer to the related article link above ( 'Cookies' options settings ) and view the section 'Set a Browser Cookie When Submitting a Form'  for guidance on setting a 'Form Submit Success Cookie' with a form plugin. 

[ Back to top ]


Step 7: Target Popup Display

(Optional)  The ‘Targeting’ option tab within the 'Popup Settings' box allows plugin users to accept or change the conditions where and when a popup will display.

By default, Popup Maker activates each popup to display on every page and post of your site. This ensures that the two default triggers included with the base plugin ( ‘Auto Open / Time Delay’, and ‘Click Open’ ) will always work to display a popup. 

Plugin users can target a popup to display on a limited set of pages or posts using either content or non-content-based conditions. Refer to the related article link below for details. 

Related article: 'Targeting' option settings.

[ Back to top ]


Step 8: Manage Popup Display Settings

(Optional) The 'Display' option tab within the 'Popup Settings' box provides users with 5 option setting categories.  Each option category and it's default settings are described below. 

New users can simply accept each of the option category defaults in order to quickly create and publish a popup. Related article links for each option category are provided to learn details about the option settings available within each category. 

a) Appearance -- This category allows users to select a popup theme to style the popup. Popup Maker includes 6 preset popup themes, which users may customize. 

Default: The default popup theme is 'Default Theme'. 

Related article: 'Display -- Appearance' option settings

b) Size -- This category provides size and width settings for a popup. 

Defaults:

  • Size: Medium -- 60%. The popup container resizes responsively to 60% of the width of the device screen (desktop, tablet, or mobile). 
  • Minimum Popup Width: 0%
  • Maximum Popup Width: 100%

Related article: 'Display -- Size' option settings

[ Back to top ]

c) Animation -- This category provides settings that control how the popup will behave on close (animation) and how quickly the close will occur (animation speed). 

Defaults: 

  • Animation: Fade 
  • Animation Speed: 350 milliseconds (0.350 seconds)

Related article: 'Display -- Animation' option settings

d) Position -- Choose from among 9 positions to anchor your popup within the browser. Additional settings: 

  • set the distance between the top of the popup and top of the browser window;
  • position the popup relative to the position of a Click Open trigger; and 
  • set the popup to display in a fixed position within the browser.  

Defaults: 

  • Location: Top Center
  • Top: 100px (pixels); distance between the top of the popup and the top edge of the screen.
  • Position from Trigger: 'off'
  • Fixed Positioning: 'off'

Related article: 'Display -- Position' option settings

[ Back to top ]

e) Advanced -- These settings provide users with options to:

  • disable the overlay (background) layer between browser content and the popup;
  • allow 2 or more popups to appear at the same time in the browser (stackable);
  • turn popup resizing 'off' as the browser window gets smaller; and 
  • allow plugin users to change the popup's z-index value.

Defaults: 

  • Disable Overlay: 'off';
  • Stackable: 'off';
  • Disable Repositioning: 'off' // Popup resizing is active or turned 'on'. 
  • Popup Z-Index: 1999999999

Related article:  'Display -- Advanced' option settings

[ Back to top ]


Step 9: Manage Popup Close Settings

(Optional) The 'Popup Settings' box 'Close' option tab allows users to override the popup 'Close Settings' managed by the popup's theme. Popup themes settings are accessible through the WordPress Admin at:  

'Popup Maker' -> 'Popup Themes' -> '{active-popup-theme}'

The theme applied to a popup is set by the 'Popup Theme' selector in the 'Popup Settings' box -> 'Display -- Appearance' option tab. 

Users can override the popup theme's close settings for any individual popup. Unless there's an important reason to do so, allow the selected popup theme to apply the theme's Close Settings to each popup. 

Defaults ('Button' option): 

  • Close Text: applies the custom field contents saved at 'Popup Maker' -> 'Popup Themes' -> '{active-popup-theme} -> 'Close Settings' -> 'Text'.
  • Close Button Delay: 0 milliseconds (ms) 

Defaults ('Alternative Methods' option):

  • Click Overlay to Close: 'off'; feature not enabled
  • Press ESC [keyboard key] to close: 'off'; feature not enabled
  • Press F4 [keyboard key] to close: 'off'; feature not enabled

Related article links for each 'Close' option category are provided below. 

Related article: 'Close -- Button' option settings

Related article: 'Close -- Alternate Methods' option settings

[ Back to top ]


Step 10: Save Changes. Publish or Save to Draft Mode

(Required) Once a new popup is created, it must be saved to the database. In the 'Publish' box located to the right of the Popup Editor, select the 'Publish' button to save the popup.  Otherwise, all the changes added to the new popup will be lost when selecting another Admin page to view. WordPress now prompts users to save their changes to a post or page before they leave for another page. 

A popup with 'Status' set to 'Published' will be visible on the front end of a site. To unpublish a popup, change the 'Status' option to either 'Draft' or 'Pending Review'. 

Related article: How Do I Pause My Popup? 

[ Back to top ]


Step 11: Preview a Popup on the Front End

(Optional) The popup 'Status' must be set to 'Published' to preview or inspect it on the front end.  Use the Popup Maker 'Preview' button at the top of the Editor to preview a popup within the browser.

Alternatively, the Popup Maker Admin Toolbar (visible at the top of the browser window) can be used to open, close, reset cookies, or edit a published popup. The Admin Toolbar is only available for logged in users with site Admin privileges. 

Select the related article link below to learn more about the Popup Maker Admin Toolbar. 

Related article:  The Popup Maker Admin Toolbar

[ Back to top ]