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

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:

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
• Quick recap
• Creating and setting up popup campaigns
• Popup dashboard
• End result

Installing the Plugin

The process is the same for all CM plugins.

• 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

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.

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

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

• 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?".

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

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

On the second step there will be little differences:

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

On the second step, we will configure the following:

• 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.

Popup Dashboard

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.

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.

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

	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