Adding An Image to WP PopUp Plugin – Part III

Okay, let’s start with today’s follow-up tutorial to Part I and Part II series.

This post will answer the recently received questions about the WP Popup Plugin and the ability to add images and customize the CSS.

Let me start by saying this post, rather tutorial, is not for the faint of heart. You don’t have to be a hardcore programmer, but you have to have faith in yourself to figure things out.

I know you can do it. What are we waiting for? Let’s get started.

The short answer to the question is “yes.” The WP Popup Plugin can add images and customize CSS to be more aesthetically pleasing to the eye.

But to gain access to the built-in functionality, you’ll need to dig deep in your pockets for $27 and upgrade to the premium WP Popup Plugin.

In actuality, $27 for additional functionality is not bad when compared to PopUp Domination’s monthly fee.

For the record, I’ve used PopUp Domination and love what they provide as a service.  However, I just don’t see paying for a popup when I can create it myself.

I know I have other DIYers out there who’ll agree with me. Nevertheless, you can simply go in your pocket, pay for the upgrade, or spend a bit of time watching this tutorial and learning a bit of simple code.

You’ll have to know and learn a bit of jQuery, Javascript, CSS, and HTML. Don’t let this scare you one bit.

It’s your call, time, and money… so decide right now. 🙂

Before you start this tutorial, you’ll likely need the following snippets of code based on my tutorial example.

I explain and show in detail how you can add small snippets of javascript and CSS (see both below) to an easy-to-use Scripts N Styles plugin that allows for customization from A to Z.

Note: DON’T FORGET TO CHANGE THE CLASS NAMES AND POPUP IDs WHERE APPROPRIATE.

Here’s the CSS code I used from CSS Generator:

#default_theme-auto_popup-102 {
/* IE10+ */ 
background-image: -ms-linear-gradient(top, #b7deed 0%, #71CEEF 82%, #21B4E2 51%, #b7deed 100%) !important;

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #b7deed 0%, #71CEEF 82%, #21B4E2 51%, #b7deed 100%) !important;

/* Opera */ 
background-image: -o-linear-gradient(top, #b7deed 0%, #71CEEF 82%, #21B4E2 51%, #b7deed 100%) !important;

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b7deed), color-stop(82, #71CEEF), color-stop(51, #21B4E2), color-stop(100, #b7deed)) !important;

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #b7deed 0%, #71CEEF 82%, #21B4E2 51%, #b7deed 100%) !important;

/* W3C Markup */ 
background-image: linear-gradient(to bottom, #b7deed 0%, #71CEEF 82%, #21B4E2 51%, #b7deed 100%) !important;

}

#default_theme-auto_popup-102 .wpp_popup_default_theme .sub_content ul li{
  font-size: 1rem;
  line-height: 2.5rem;
}

#default_theme-auto_popup-102 .wpp_popup_default_theme .sub_content h3{
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-align: left;
}

Here’s the jQuery javascript code I used:

 
jQuery(document).ready(function($) {
//$(document).ready(function(){

var mainDiv = $("#default_theme-auto_popup-102");

// we check to see if the div you set above is current.
if(mainDiv.length){

  	//http://www.localdomainseo.com/images/3dcover4-trans.png
  var popImage = '<div style="float: left; margin: 5px 0px 5px 10px !important;"><img src="http://kickstartcomtest.com/wp-content/uploads/2016/08/jenkins-logo.png" width="70%" /></div>';

    mainDiv.find(".sub_content ul").before(popImage);

}

});

The video tutorial is straightforward. Watch it and learn how to add images and customize the WP Popup Plugin to be more aesthetically pleasing to your reader’s eye, hoping for increased newsletter sign-up conversions.

And before I go sign off… I know someone will yell that this is just a hack.  Okay, it is.

If you have fewer than two popups and don’t see a need for more, then this tutorial is for you.

If you need more scalability and capability to manage a larger number of forms, and a more user-friendly and easier interface to customize popups, then look at the plugins below: