WP Popup Plugin (CMP) - Use Case - Easily Add Multiple Popups To the Same Page in WordPress


Use Case - Easily Add Multiple Popups to the Same Page in WordPress

Back to User Guide

Note: This guide covers features from the Pro version of WP Popup Plugin - This document uses version 1.7.2.

Introduction

This WP Popup Plugin allows you to show different kinds of popups on your website.

Use Case Front-End

Example of displaying multiple popups on the same post or page:

Displaying multiple popups on the same post - WordPress Popup Form
Displaying multiple popups on the same post

Use Case Assumptions

In this example use case guide, we'll cover how to display a few different popup banners on the same post. We consider that you have already bought the plugin, but not installed it. 

It follows:

Installing the Plugin

The process is the same for all CM plugins.

CreativeMinds Customer Account Dashboard - Downloads tab
CreativeMinds Customer Account Dashboard
  • Download the plugin from your customer dashboard.
  • Log in to WordPress and navigate to the WordPress Admin â†’ Plugins settings.
  • Click on Add New.
  • Activate it and add the license.

Learn more: Getting Started - Plugin Overview


Quick Recap

In this use case we will focus on how to display a few popups on the same page. To learn more about the basic process of creating popups, please, check this use case guide:

Creating and Setting Up Popup Campaigns

Displaying multiple popups at once requires defining the display priority for each one, as they can overlap each other. To control which popup appears in front and which stays behind, you can set the z-index value individually for each campaign.

In this use case guide we will create and display three different popups on the same page.

To do this, navigate to Admin Dashboard â†’ CM Pop-Up Banners Pro → Add New Campaign.

Adding new popup campaign - WordPress Popups
Adding new popup campaign

First, let's add a title and set up the banner content - we'll use a basic image for this example.

Creating first popup campaign - Lead Generation Plugin
Creating first popup campaign

Below in the metabox Add New Campaign - Options, we need the first section Basic Visual. Here we need 2 options:

Configuring popup settings - Popup Campaign Plugin
Configuring popup settings
  • Type - Let's choose one of 3 popup types. You can choose any needed type. In our use case, we choose the most standard type Pop-Up. The popup banner will be displayed in the center of the page.
  • Z-index - This is the crucial option, as it allows to define the order priority for the popup campaign. The minimum recommended value is "100000" to ensure the popup appears above other page elements. For this popup, we will set the value "100200".

Next, in the section Activity, we need to choose where to display the popup. It can be done with the option Show on selected posts/pages/categories - let's choose a post called "How Do WordPress Plugins Work?".

Choosing where to display the popup - WP Popups
Choosing where to display the popup

Now we can publish the popup campaign - for that, click the button Publish in the relevant metabox:

Publishing the popup campaign - WP Popup Plugin
Publishing the popup campaign

Now let's create a second popup campaign. First step is the same - we add a title and the image:

Creating second popup campaign - Timed Popup WordPress Plugin
Creating second popup campaign

On the second step there will be little differences:

Configuring popup settings - Best WordPress Popup Plugin
Configuring popup settings
  • Type - Let's choose here another popup type, so it will be displayed in another place of the page - we will choose the type Fly-In Bottom, and in the option below Fly-In Bottom (Position), we will choose Left. The banner will be displayed at the bottom left of the page.
  • Z-index - Here we will set the value "100100" - this value is less than for the first popup campaign, so the current popup will be displayed behind the first popup.

Other steps are the same - we choose the same post where to display the popup, and click the button Publish.

And now let's create the third popup. First step is the same - adding title and the image:

Creating thrid popup campaign - WordPress Popup Form
Creating thrid popup campaign

On the second step, we will configure the following:

Configuring popup settings - WordPress Popups
Configuring popup settings
  • Type - Let's choose the type Fly-In Bottom again, but in the option below Fly-In Bottom (Position), we will choose Right. The banner will be displayed at the bottom right of the page.
  • Z-index - Here we will set the value "100300" - this value is bigger than for the first popup campaign, so the current popup will overlap the first popup.

Other steps are the same - we choose the same post where to display the popup, and click the button Publish.

The plugin allows to see the z-index for each popup in the dashboard with the list of all popup campaigns. Navigate to Admin Dashboard â†’ CM Pop-Up Banners Pro → Campaigns.

Navigation to the Campaigns dashboard - Lead Generation Plugin
Navigation to the Campaigns dashboard

On that page you can see a table with all created popup. The z-index for each popup is displayed in the relevant column. You can also other basic info about each popup campaign, such as popup type, where it's displayed, etc.

Popup campaigns dashboard - Popup Campaign Plugin
Popup campaigns dashboard

End Result

Now let's check the result on the front-end. Here you can see that the "Banner 2" is overlapped by the "Banner 1", and the "Banner 1" is overlapped by the "Banner 3".

Use Case Front-End

Front-end result - WP Popups
Front-end result

More information about the WP Popup Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.