What is a Lightbox Popup? And How to Create It (Step by Step)

Are you wanting to create lightbox popups to capture more email leads? We can show you how.

There’s a reason why cinemas and the theatre turn the lights out before a show. It’s the same reason that lightbox popups show up the way they do, on top of the page that you’re viewing and with a darkened background.

Care to take a guess why that is?

If you answered, “to grab the viewer’s attention,” you’re spot on.

Lightbox popups (also called modal popups) are one of the most effective ways to convert your website visitors into email subscribers and customers.

In this post, we’ll share how you can create your own lightbox popups and the top 6 reasons why they are the best at building your email list, delivering a targeted ad message, and converting subscribers into paying customers.

But if you are ready to get right to creating, click here to jump to the tutorial!

What is a Lightbox Popup?

A lightbox popup is a web form that appears on top of the webpage that you are viewing. When it appears, the webpage is darkened in the background, so the form stands out.

lightbox-popup-example-1

Lightbox popups are most commonly used as optin campaigns for capturing email addresses. However, they can be used to display pretty much any call to action (such as, “Like us on Facebook” or “Use this coupon code at checkout“).

Are you ready to try a lightbox popup on your site?

Let’s keep going.

The easiest and smartest way to create popups in WordPress is through OptinMonster:

OptinMonster home page

OptinMonster is a premium WordPress plugin where you can easily create your own lightbox popup.

OptinMonster’s incredibly easy to set up and run. With a powerful yet simplistic builder, all of the hard work has been done for you. No more manual integration. Just a few clicks and your lightbox popup is live.

And don’t forget, OptinMonster comes with targeting rules so you can show your visitors the exact campaigns you want at the second you want:

  • Exit-Intent® Technology: recover users actively leaving your site.
  • Onsite Retargeting®: keep users engaged by showing fresh campaigns.
  • MonsterLink™: boost engagement by showing offers based on what buttons and links your visitors click.

This level of personalization will not just increase the user experience (UX) but will drastically increase your conversions and sales.

For today’s tutorial, we’ll be using OptinMonster to create our own lightbox popup.

In fact, OptinMonster helped LeadFuze score 4x more conversions using popups.

If you’d like these same results, get started with your own 100% risk-free OptinMonster account today:

Get Started With OptinMonster Today!
BONUS: Done-For-You Campaign Setup ($297 value) Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

We understand that not everyone learns in the same way. That’s why we made this helpful video tutorial for our visual learners:

But if you are here for a written step-by-step guide, let’s get to it.

Step 1: Create a Campaign

First, start by signing up for OptinMonster or log in to your existing account.

Once you are logged in, click on the green Create New Campaign button:

Select Green Campaign Button

To create a lightbox popup, click on the Popup campaign type:

Select lightbox popup campaign

Next, you’ll have the optin to choose from 50+ professionally designed templates for your design.

Today, let’s select the Basic template. It’s the perfect template for any campaign, especially if you want to do a lot of customizations:

select basic template

Now, give your campaign a name. The name is for your use only, so make it something that will be meaningful and memorable for you.

At this point, you can also add the website where you plan to use the campaign:

name your lightbox popup campaign

Finally, press Start Building when you’re ready to create the campaign. This will take you to the OptinMonster campaign builder.

Step 2: Edit Your Campaign

In this step, we’ll be customizing the visual parts of your lightbox popup.

So, how do we do that? Point and click.

It really is that simple.

For any text changes, you can handle that right in the visual preview on the center of your screen.

Any other changes will open a menu on the left side of your screen:

OptinMonster visual editor

Also, you can add other elements to your popups like additional columns, countdown timers, videos, and more.

Just drag and drop where you’d like the element:

Add block elements to popup campaign

Once your campaign looks the way you want, you’re ready to set your display and targeting rules.

Step 3: Set Display Rules

Display rules control when your campaign shows up on your site and who sees it.

By default, all campaigns are set to display on any page after 5 seconds.

To review or change this, click on the Display Rules tab on the top of your screen:

OptinMonster default display rules

You can either click on the drop-down menus to edit the default ruleset or you can click on the + Add New Ruleset button to create your own rulesets.

Many of our customers have great success with exit-intent popups, we’ll be using the Exit-Intent® rule. This rule will display your lightbox popup anytime OptinMonster detects that your site visitors are actively leaving your page.

So, go ahead and click on the drop-down menu and select the Exit-Intent® rule:

Select Exit Intent Targeting Rule

There’s so much you can do with OptinMonster’s display rules engine, from follow-up campaigns to onsite retargeting and more. We highly recommend taking some time to play around and test out all of the OptinMonster rules so you can see what works best for your site.

Step 4: Set Up Your Email Integration

While your lightbox popup is collecting leads, they need to be stored somewhere.

Luckily, OptinMonsters integrates with the top email programs so you can automatically feed your new leads to your email lists.

To do that, go to the Integrations tab.

Then, click on +New Integration. You’ll then see a drop-down list full of marketing platforms that you can integrate with OptinMonster.

Select your platform. OptinMonster will walk you through the next steps. For most, all you’ll need is the API Key for the marketing program.

Add new lightbox popup integration

If you are needing an email service provider, we recommend Constant Contact because the platform offers a lightweight, user-friendly interface, but you’re welcome to check out our list of the best SMTP services for more options.

Step 5: Publish Your Lightbox Popup

Once you are happy with how your lightbox popup looks and will display, move over to the Publish tab.

Take a minute to double-check all of your settings and display rules are set the way you want. Also on this screen are instructions on how to add this popup to your website.

When you are ready to publish, just click on the Publish button.publish optinmonster campaign

If you need more information, take a look at the documentation for embedding OptinMonster on your site.

Now you know exactly how to create a lightbox popup using OptinMonster!

That’s it! Your WordPress lightbox popup is live!

6 Reasons Why Lightbox Popups Capture More Emails

There are several reasons why lightbox popups capture more emails than a traditional email optin form, like the ones you’ll see in the sidebar of a blog.

sidebar-forms

For the record, we do recommend having a sidebar optin form like the one above because that’s where your biggest fans will look for it.

However, if you don’t also have an email subscription popup installed on your site, then you’re potentially missing out on thousands of email subscribers. That is not so cool.

So, without further ado, here are the top 6 reasons why a lightbox popup is your best bet at capturing more emails.

1. Lightbox Popups Feature One, Clear Call to Action

Lightbox popups remove all other distractions, so there is only one, clear call to action in view on the page.

With a lightbox popup, the rest of the screen becomes darker and the user’s eye naturally goes to your message and the email signup form. This makes it perfectly clear what the user should do next.

2. Lightbox Popups Are Eye-Catching

When your lightbox popup appears on the page (particularly if it uses an animation), your visitors won’t be able to help but take notice. In fact, they’re impossible to ignore.

using monstereffects on lightbox popup

That’s exactly why they work so well.

The key is to personalize your popups and trigger them at the right moment, to the right visitors, with the right offer (see #3, #4, and #5 below).

3. Lightbox Popups Trigger at Just the Right Moment

If you use OptinMonster, you can control exactly when your lightbox popup will appear, to make sure that it triggers at just the right moment.

The key to deciding when to trigger your lightbox popup is to think about your user and their intent at the moment they’re browsing your site.

4. Lightbox Popups Display an Interest-Based Offer

The other opportunity you have with OptinMonster is to increase your conversions by displaying a lightbox popup based on interest.

If they’re browsing recipes, you could show them a cooking-related offer. If, on the other hand, they’re browsing home improvement posts, you’d do better to show them an offer related to home decor.

Here’s an example from CountryLiving’s website. This popup appears to visitors who’ve viewed home improvement posts:

country living fullscreen exit popup

But if the visitor has viewed recipe posts, they’ll see this popup instead:

Country Living Exit Popup

With OptinMonster, lightbox popups can be set to be displayed on specific pages, posts, or even entire categories of posts on your site.

5. Lightbox Popups Are Personalized for Specific Visitors

OptinMonster also allows you to display lightbox popups only to specific visitors. This way, you can personalize your offers even further.

For instance, you could show your popup to visitors coming from a specific ad campaign. You know a lot about the people you target your ads to, so use that information when writing your popup copy.

6. Lightbox Popups Capture Abandoning Visitors

Did you know that 70% of visitors who abandon your site will never come back again?

In most cases, this means that 95%-98% of your marketing efforts are going to waste, and you’re losing money in customer acquisition costs.

However, lightbox popups triggered on exit-intent give those abandoning visitors one last chance to optin which can mean an additional 2-4% of your visitors converting into email subscribers (and customers soon after).

exit-intent® popup

OptinMonster’s Exit-Intent® technology works by tracking the mouse movement of your visitor. When they gesture towards the top of the page, getting ready to close the window, the smart lightbox popup appears.

Ready to put the power of lightbox popups to work for you? Then sign up for OptinMonster today.

Get Started With OptinMonster Today!
BONUS: Done-For-You Campaign Setup ($297 value) Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

And that’s all for this tutorial.

We hope you enjoyed this article. If so, check out these other resources:

Deana Weinheimer is a writer with deep experience in marketing and WordPress with a focus and passion in educating her readers. In her free time, she enjoys writing for a minor league hockey news site, traveling with her husband, playing with her dogs and gerbils, or paddle boarding the many waterways of Ohio.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our powerful Exit Intent® technology that converts abandoning website visitors into email subscribers and customers. Typically 70% of the people who visit your website will leave and never return, meaning all those marketing efforts to reach them have gone to waste.

    OptinMonster’s Exit Intent® technology detects user behavior and prompts them with a targeted campaign at the precise moment they are about to leave.

    You can unlock this powerful technology 100% free when you purchase our OptinMonster Pro plan.

    Get started with OptinMonster today and see why 1,000,000+ choose OptinMonster to get more subscribers and customers.

    Thomas Griffin
    President of OptinMonster

  2. I still don’t get it…. why are newsletter subscriptions such a big deal to website owners? Most sites I go to are just a one off thing that I was looking for some quick info on a subject or a view on something. I have zero interest in ever coming back to them again, or getting a newsletter that has no relevance to me. And nowadays every website I go to is just begging, pleading, grabbing onto my ankles as I try to walk away to just please, please, pretty please sign up for my newsletter. Its starting to reek of desparation

    I find “exit-intent” is always giving false positives to me – I’m on a laptop, so my cursor movements are a bit more erratic.

    BTW, your exit intent popped up before I got to the bottom of the article, so I went and signed up for a newsletter…. hopefully you have a “catch-all” email on your domain 😉

    1. Mary Fernandez
      Mary Fernandez July 19, 2016 at 8:04 pm

      Hey Matt, you know, you are totally right. Most websites with popups do come off as desperate, largely because they can’t control who sees their popup and when.

      For example, when I land on a website for the first time, I don’t want to see an instant popup in my face because it gets in the way of the information I’m there to glean. I also hate those popups that have absolutely nothing to do with what I’m reading… If I’m reading a blog post about a particular topic, why are they offering me something completely unrelated? There is a tool now that allows you to target specific customer personas with a highly relevant offer, at the best possible moment (*cough* OptinMonster).

      But back to your original question on why newsletter subscriptions matter to website owners… There are many reasons, but here are three biggies:

      1. Email is still the #1 communication channel (91% of consumers check their email on a daily basis).

      2. You OWN your list, unlike social media platforms which can go away at any moment without prior notice.

      3. Email converts like crazy to nurture leads and turn them into paying customers. (Studies show people who buy products marketed through email spend 138% more than those who do not receive email offers. Another study shows email has an ROI of 3800%!)

      Hope that helps. Thanks for joining our newsletter, by the way. I guess our popup worked! 😉

    2. Matt — The real reason it is so valuable to collect these emails is because you can take that email list and upload it to Google adwords and Facebook ads: from there you can gather an obscene amount of (statistical — not individually identified) data about your customer group; you can also remarket to them, that is, target ads specifically to that group. When you’re on the sell side, the customers that sign up to get promos by email are some of the best repeat customers. Hope this helps.

  3. First, let me say that I agree ‘site conversions’ are important but not more important than quality and functionality.

    Yeah, no; nothing will get me to close a tab faster than a lightbox. You’re preventing people from reasonably accessing information of your website. This isn’t to your benefit unless the content isn’t very worthwhile (which if it’s not worthwhile then why publish, oh yeah: income).

    The main offenders are ones that lock you out: I will never sign up for a site where I can’t view its content without complying with its sign up lightbox; I’m looking at you, Pinterest. Luckily I know how to delete the node from the DOM tree.
    The next offensive lightboxes are ones that have the tiny encircled X that may or may not close the lightbox – probably not at all if you’re on a mobile device.
    The least offensive allows you to close the lightbox by clicking the translucent ‘fog’.

    Each one of the lightboxes I’ve experience leaves some amount of foul taste in my mouth, each one reduces the likeliness of me returning; all because it increased the time it took me to find the content I was surfing for. Stop breaking the Internet, marketers!

    It’s optimal to have site conversions come out of quality and functionality and not annoyance. If you have to rely on the latter, reconsider your platform.

    1. You should talk with Neil Patel about your issue. He’s one of the best online marketer’s I follow and uses pop-ups in different ways throughout his marketing process. (the Exit-Intent, the footer pop-up, the lightbox…)

      I’m interested to see what you do to have your site convert based on “quality and functionality.”

  4. “Each one of the lightboxes I’ve experience leaves some amount of foul taste in my mouth, each one reduces the likeliness of me returning; all because it increased the time it took me to find the content I was surfing for. Stop breaking the Internet, marketers!”

    Seriously? You are that impatient? Getting around a lightbox takes a single click, and if that is the price to pay for free, valuable content, so be it. I agree with Mary, that unfocused lightbox marketing can be a distraction, but it is really rare that it is SO distracting that I abandon a session and put that website on my personal blacklist. I think that is a bit of hyperbole. How about your favorite sites and blogs put up pay gates instead of collecting email addresses? Maybe that would “fix” the Internet. #sheesh

  5. I can’t stand them, and I’ve NEVER entered my email address into one. I already have more than enough unread email in my inbox, thank you. That being said, I deal if they’re easy to close ( though some of the “no, I don’t want to eat healthy. I want to die young!” nonsense you sometimes have to click to close them will send me away). It’s being unable to close them on my phone that always makes me leave the page. They really need to work better on mobile if people are going to continue to use them.

    1. Good point about mobile, Jen, this is how OptinMonster eliminates that issue. I also agree that condescending “no” buttons like that are totally counter productive!

  6. I have never signed up for a newsletter through a popup.
    Yes, people are impatient, and it’s partly because practically every site they visit today has some kind of an intrusive, obnoxious message: sign up for newsletter, allow us to send you push messages, like us on Facebook, follow us on… oh come on, it’s all about you, isn’t it?! Like a desperate salesman following a person on the street, nagging them to buy his stuff.
    I have links to social pages on my site but I’m not making them pop up in people’s faces. Anything but a pop-up, sticky bar at the bottom for example.

    1. Sharon Hurley Hall April 19, 2017 at 8:19 am

      It’s true that popups can suck, Ruby, but if they’re personalized, targeted and timed, they don’t have to be annoying. We wrote about that in 6 Reasons Why Pop-Ups, Welcome Gates and Slide-Ins Suck, and suggested ways to fix the worst annoyances.

  7. Is it possible to use a lightbox to pop up your search bar? i.e. if you have a large product range and people aren’t using the search bar, to bring it straight to their attention?

    1. Sharon Hurley Hall June 19, 2017 at 9:07 am

      You can do that with the Canvas theme or by using custom HTML, Ben. Please reach out to support if you need help getting this configured.

  8. As soon as I see a lightbox I instantly search a way to close it. In my opinion a lightbox is not a bad thing but most of the people/website owners don’t know how to use it effectively (as previously stated here in the comments) so it becomes a distraction. Too many lightboxes like this forced me too keep closing them as soon as I’ve seen them that it became an instant reflex . I hope people will learn how to master this powerful feature instead of making it a way to spam people. Cheers

    1. Sharon Hurley Hall November 10, 2017 at 5:04 am

      Yes, you definitely want to avoid that annoyance, Nikola. OptinMonster’s advanced targeting features like Exit Intent and page-level targeting can help site owners show their campaigns at precisely the right time.

Add a Comment Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.