How to Create a Lightbox Popup: A Step-by-Step Guide


Image source: Getty Images

A lightbox is an effective way to capture leads and grow your email list. Learn how to use lightbox popups to power your email marketing strategies.

Using a popup lightbox can be tricky. If you can’t find the right time or don’t offer enough value, it can annoy your website visitors. However, if you’re successful with your lightbox popup strategy, it can skyrocket your email signups, propelling your email marketing efforts and increasing your conversions.

In addition to getting your leads’ email addresses, you can also use lightbox pop-ups to let visitors know about your offers, embed promotional images and videos, or share important information and events.

In this guide, we’ll take a close look at what a lightbox popup is, the best way to use it, and how you can create one as part of your email marketing strategy.

Overview: What is a Lightbox popup?

Lightbox pop-ups are window overlays that appear over a browser window or web page. They block some of the page content and disable and dim the rest of the background.

Website visitors cannot interact with website content or move to other parts of the page unless they navigate out of the lightbox popup or act on the callout. ‘action (CTA), for example by filling out the form.

Lightbox popups are typically used to capture visitors’ email addresses to grow an email list, but they can also include CTAs that ask users to register for events and download content (among other things). ).

When should you use lightbox popups with your messaging strategy?

To optimize viewers for your small business email marketing efforts and ensure appropriate view times, consider the following tips.

  • Avoid showing pop-ups to visitors when they are in the middle of a task. Avoid disrupting the flow and navigation of your visitors on your website. For example, showing a lightbox popup when users are in the process of booking an appointment will interrupt and even frustrate them.
  • Refrain from displaying your popup immediately. Trigger your lightbox to appear after your visitors have spent a significant amount of time browsing your website and have a certain level of engagement. After all, people are less likely to sign up if they don’t know enough about your business.
  • Configure your lightbox to display on relevant pages. Define specific pages where your lightboxes should appear to ensure they are relevant and useful to your visitors. For example, instead of displaying your lightbox asking visitors to subscribe to your blog on your homepage, instead trigger the popup to appear on your blog page.
  • Consider other ways to distribute your messages. Lightbox popups are great for grabbing your visitors’ attention, but they can also be overwhelming or annoying to some. Minimize the use of pop-ups and consider other formats to display a particular message or marketing and sales elements.

Unless the content in your lightbox is relevant to your audience or provides value to them, your website visitors are likely to ignore and immediately close your pop-ups.

How to create a lightbox popup

If you are a web developer or know how to code using Javascript, HTML and CSS, you can build your lightbox email popup from scratch.

If you don’t have web development and coding knowledge, use an online popup tool or email marketing software that allows you to easily create a lightbox popup without touching a single line of code.

How you create your lightbox may vary depending on the third-party tool or website building platform you use, but in this guide, we’ll focus on the steps to create a lightbox popup. using Wix.

1. Access the Wix Editor

After logging into your Wix account, select the website you want to add a lightbox popup to, or if you are creating a new site, click Create New Site.

A screen showing your websites for editing and publishing to Wix.

Select the website where you want to add your popup lightbox. Image source: author

After selecting the site to edit, click Site Actions, then click Edit Site from the drop-down list. This should take you to the website editor.

On the left side of the page, click the plus icon and you’ll see the elements and options you can add to your website.

The Add option on the Wix Editor.

Select the Add icon in the Wix editor to add a lightbox popup. Source: Wix software.

2. Select a lightbox category

Move towards Interactive, and under the Lightbox category, select Welcome, Subscribe, Promotion, or Contact.

Lightbox options.

Choose from four categories of lightbox popups to add to your website. Image source: author

Wix provides five subscription popup designs and types of lighted windows: a full-width one that displays at the bottom of your webpage, a center popup that displays in the middle of the page, and a side popup that appears on top of your webpage. the right or left part of your page.

An overview of the different types of lightbox popups.

Select a lightbox type and template to customize. Image source: author

3. Customize your lightbox

Select a lightbox type and customize it to your preference. Wix allows you to add any element to your email popup as long as the size does not exceed the lightbox and fits inside.

Lightbox background settings and editing tools.

Customize your lightbox popup design using settings and editing tools. Image source: author

Edit the form text and field by clicking on each section. Use the editing tools to change the theme, font style, size, alignment, and text color.

The Lightbox editing tool also lets you add effects to texts, adjust character and line spacing, and enable vertical text.

Text editor tools and lightbox popup form field.

Change the lightbox popup text to your favorite design. Image source: author

Select the background and customize your design. Use the editing tools and choose from the platform’s library of colors, images, and videos to use as your background.

You can also choose the overlay background by clicking on the space around your lightbox and then on the Change overlay background option.

The option to change the background of the overlay.

Change your overlay background by choosing from the available options. Image source: author

Also, set how your website visitors close your pop-up when it appears, either by clicking the X icon, viewer overlay, or close button.

4. Set triggers

Automatically display your lightbox on specific pages by clicking the Set Triggers button. This shows you the option to enable auto-display and which pages you want your popups to appear on.

Lightbox settings and page options.

Define the specific pages where you want your Lightbox popups to appear. Image source: author

Link any element, such as menu items, buttons and texts, to trigger your viewers. After creating and naming your lightbox, click on the site element you want to link from. Next, click the Link icon to add a link and select the name of the viewer you want to add.

Wix automatically saves any changes you make, and you can preview how your popup will look on desktop and mobile.

Lightbox Popup Examples

Take inspiration from these lightbox examples to help you create popups that grab your visitors’ attention and encourage email signups.

the new yorker

The email newsletter lightbox popup from the New Yorker uses a minimalist and simple design that triggers when you view an article on their website.

A lightbox popup on The New Yorker website.

Take a minimalist approach and keep your lightbox simple and straightforward. Image source: author

The only splash of color is the CTA button, which sets it apart from any other element or content in the lightbox.

It’s a simple and effective way to grab your visitors’ attention and offer them value in exchange for their email addresses.


The Kensie clothing brand lightbox includes a glowing effect that makes the popup more eye-catching.

The lightbox email popup on Kensie.

Use subtle design elements, such as glow effects, to make your lightbox more eye-catching. Image source: author

The design is simple and subtle, and the underline under the 10% discount is a nice touch that can help entice website visitors to sign up for the mailing list.

Light up your email marketing with lightbox popups

When implemented effectively, lightbox popups can boost your email signups, which helps your email marketing campaigns succeed.

As long as you keep your lightbox relevant and show it at the appropriate times, this should be one of the effective ways to grow your email list.


Comments are closed.