As business owners and operators, it’s a fact of life that we must adapt – or suffer the consequences. Google’s latest policy concerning popups is just the latest example of this.
To help you adapt, we’re going to show you how to import an awesome pre-made popup into your site in just minutes!
Google’s New Policy
The new policy that’s declared to help users “easily access content on mobile” basically says: change how we use popups on mobile devices, or we’re going to penalize your site’s rankings. At this point, it’s conjecture as to how hefty these penalties will be, but honestly, in this era of hyper competition, is any penalty something we can afford?
And just for that very reason, we shouldn’t jump the gun and ask: how can we just remove the popup on mobile devices? It’s important to understand Google’s is not banishing popups for mobile users, just how they’re displayed, shaped and sized.
By creating a banner style popup, we can still reach our mobile audience without having to sacrifice our rankings on Google.
Importing the Pre-Made Popup
You can have this mobile adapted popup on your site simply by importing the files as explained below. It comes fully equipped with Cookies appropriately installed, it’s own theme, a complete form, and a no-hassle setup process. Plus, it’s fully responsive and has been tested to work across the most current major browsers.
Importing the Popup Files and Assets
Download and unzip the bundle file.
- You’ll need the Main Popup, Thank You Popup and Popup Theme Files (xml).
- You’ll also need the Fonts HTML file and the Styles CSS file (provided on Git below).
- Note: the Main Opt-In Popup will import as “Draft” status, which means it has to be activated before it will work.
From the WordPress Admin, import the popup and popup theme files by going to Tools > Import in the WordPress Admin, as seen below. Scroll down and click “Run Importer” under WordPress.
Click the “Install Now” text first, if necessary.
After clicking Run Importer, upload each of the popup files (banner-style-opt-in-popups.xml and banner-style-opt-in-popup-theme.xml) to your site by clicking “Choose File” that appears on the following page:
The importer will then ask about importing the author: choose assign the author data to an existing user.
Important: make sure to check the import attachments box for both files.
You now have the Opt-In Popup, the Thank You Popup, and the Popup Theme on your site. You can find these under Popup Maker > All Popups and Popup Maker > Themes menu items in the admin.
The Opt-In Popup will import as “Draft” status, so it has to be activated before it will work, which we explain below.
To get the fonts we’ve used in this popup into your popup, copy this Google Fonts code into the
<head> of your site (included in the bundle file).
Use the following CSS styles (included in the bundle file) to bring everything together, these styles are built for any general form made with Ninja Forms. If you’re not using Ninja Forms, you’ll have to make some modifications.
For editing, find the expanded version here (included in the bundle file).
Import the Ninja Form
To import the Ninja Forms form (included in the bundle file), go to Forms > Import/Export in the WordPress Admin. Click “Choose File” and select the Ninja Forms import file (banner-style-opt-in-ninja-form.nff). Once selected, click the Import Form button.
Important: If you’re using the Layout and Styles Extension from Ninja Forms, make sure to remove the container styles in the Form Fields Display Tab of the Form Builder.
Depending on how many forms you previously had, the Form ID # could be different than my setup. All this means is we have to change the Form ID # in the popup to match what is on Ninja Forms.
In the above screenshot, the Form ID # for our Banner Style Opt-In Form is ID #3. We need to make sure this matches in the Popup Content Editor, as shown below.
Once you have the right form ID # inside the popup, click “Save Draft”.
Test and Publish the Popup
Now, let’s test the popup by creating a “private” Test Page. Once we have our Test Page setup, we can activate the popup on only that page by using Conditions. This way, we’ll make sure everything is good-to-go before it goes live.
To set up the Conditions, go to Popup Maker > All Popups and click each each popup to bring up their Popup Editors. On the right side, look for the Conditions Pane, and customize it to suit your needs. In this case, since we’re going to test the popup first, we set the Condition to Pages: Selected: Test Page.
You can then see the popup in action by clicking the Publish button in the Popup Editor, then visiting the Test Page.
Once you’re ready to go live, you can simply switch the Condition to what best suits your needs.
We hope you enjoy this popup!
The Best of Both Worlds
Next time, we’re going to show you how you can get the best of both worlds by having a popup for mobile devices and desktops!