After recently installing some popup disclosures throughout my blog, I’ve received a lot of requests for a tutorial on setting them up. Popups have so many potential uses, and even if you don’t like the traditional time-delay popups, you can still make use of them! For example, my popup disclosures don’t open automatically—instead, I have them triggered to open when someone clicks on a certain piece of text, like this.
Aside from disclosures, popups can be used to promote your mailing list, tell your readers about a sale on your products, or give any information that’s too out of place to go in your post. The great thing about the plugin we’ll be using is that if you ever need to change anything in the popup, you can do so directly from your WordPress dashboard without ever having to edit your post!
For this tutorial, we’ll be using a plugin called Popup Maker. There are a ton of ways to customize this popup that you can read about here, but for the sake of simplicity I’ll be showing you how to make a basic popup that matches your blog’s color scheme and pops up after a reader clicks on a word or phrase in your blog post. At the end, your popup should look something like this, but with colors and text of your choosing:
Creating Your Popup
Once you’ve installed Popup Maker, you should see a new tab on the left side of your WordPress dashboard. Hover over the Popup Maker tab and select “Add Popup”. Fill in a one or two word description of what this popup is for in the “Popup Name” blank, and type whatever text you actually want to show up as the title of the popup in the “Enter Popup Title Here” blank. Now you can type whatever text you want in the body of your popup in the editor, the same way you would for a blog post.
Customizing Your Popup
After all your text is entered, click the “Customize This Theme” link on the right side of the page (the drop down above it should already be set to “Default Theme”, but if it’s not, switch to that). You’ll see a lot of boxes for different parts of the popup, but we’ll be focusing on just a few of these!
Overlay Settings
The overlay is all of the space around the popup, shaded here:
I wanted all of the focus to be on the popup, so I set the color to white (#ffffff) and the opacity to 50% to get that frosty look.
Container Settings
The container is everything inside the popup itself, shaded here:
The padding is all the space between the edges of the body text and the edge of the popup. I have my padding set at 80px, shaded here:
The background is the overall color of the popup, which I have set as white (#ffffff). I wouldn’t recommend changing the opacity from 100%, because you want to make sure the body text is easy to read!
The border radius changes how curved the corners of your popup are. I have mine set to 0px, and the higher you go, the more curved the corners will be. You can also change the style of the border, though I have mine set to none for simplicity!
The drop shadow is an effect that makes it look like your popup is extending out of the page, and appears on the edges highlighted below:
To create a more natural appearance, leave the Inset set at “No”. I didn’t change any of the settings, but you can easily change how prominent the shadow is using the sliders! The horizontal and vertical positions change how far out from the popup the shadow extends, the blur radius changes how fuzzy the edges of the popup looks, the spread changes how far that blur extends, and the opacity changes how well the shadow is seen.
Title Settings
This one is pretty self explanatory. Here you can change the color, alignment, and size of the title you chose for your popup. I didn’t change any of the Text Shadow settings, but it works similarly to the drop shadow by creating a blurry version of the title just behind and below the title itself.
Content Settings
These settings change how the body text of your popup looks. Keep this simple and dark so that the text is easy on the eyes!
Close Settings
This is where you can change the look of the close button in the top right corner of the popup.
The padding, similar to the Container Settings, changes how much space is between the Close text and the edge of the button. I have mine set at 20px. I also left the height and width settings at 0px.
Within the Position Settings, the Top setting changes how far from the top edge of the popup the close button will appear, and the Right setting changes does the same but from the right edge of the popup. I left these both at 0px.
Beyond those sections, you’ll see the same settings options as in the Container Settings section. The only ones I changed here were the Font and Background settings, which I changed to fit my blog’s color scheme.
Once you have your popup customized, click the “Update” button and head back to your Popup editor!
Triggering Your Popup
A “trigger” is an action that causes your popup to open. There are two types of triggers—Click Open and Auto Open. We’ll be focusing on the Click Open popup, as this one is more versatile and much less invasive on your readers!
To create a Click Open trigger, select “Add New Trigger” within the Trigger section and choose “Click Open”. A popup titled “Click Open Settings” will open, but you don’t need to change anything here, so just click “Add”.
Beyond these settings, there are a few other options for changing how the popup is displayed, but we’ll stop here. The only setting you might want to change is the position of the popup, which I have set at Top Center. Now you can publish your popup!
Inserting Your Disclosure
To use the Click Open popup, you’ll have to manually insert some code into the post you want the popup to appear in. For this tutorial, I’ll show you how to trigger the popup to open when you click on a word or phrase!
All you need to do is wrap the word or phrase you’ve chosen will a few HTML tags, but first we need to get the class of the popup you made. From your WordPress dashboard, hover over the Popup Maker tab and select “All Popups”. Next to the name of your popup, there’s a column called “CSS Classes”. You can use either of these classes, but to help you identify which popup you’re using later, I would choose the class with the name of your popup in it. Highlight this class and copy it.
Now go back to your post and insert the following code, with your chosen word or phrase in place of “YOUR TEXT HERE”, and with the class you copied in place of “CLASS”:
<span class="CLASS"><a href="">YOUR TEXT HERE</a></span>
You technically don’t have to wrap your word or phrase in the <a href=””></a> tags, but these tags make your text look like a link, which makes sure your reader understands they need to click on it!
Preview your post to make sure the popup is working, and you’re done! If you have any questions about this tutorial, feel free to ask in the comments!