It’s a familiar scene: We’re calmly browsing the web, gliding from one page to another when we’re suddenly faced with a popup right across the center of our screen. Frustrating, right?
But lightbox popups needn’t be frustrating at all. In fact, they can be highly beneficial in notifying users about promotions they may be interested in, or simply placing important content in the limelight. The key to creating successful lightbox popups on your website lies in mastering their timing, design and copy (more on that later).
When you start your website design, take into account the advantages a lightbox can have on your business. Done right, a lightbox popup can skyrocket your company’s leads and subscription rates. This research by OptiMonk shows how BitNinja managed to increase their leads by 65%, thanks to adding a lightbox at a strategic point on their site. Imagine what that could mean in revenue.
Here’s everything you need to know about lightboxes, from what they are, to inspirational examples, how to create one when learning how to make a website and more.
What is a lightbox?
In web design, a lightbox popup is a window overlay that appears on top of a webpage, blocking some of the content on the page. When a popup appears, the background is often dimmed and disabled, meaning that site visitors cannot interact with other content on the website. This draws attention to the lightbox itself. A lightbox can appear anywhere on the screen - in the center, or as a strip at the top, bottom or sides of the page.
Lightboxes are often used to obtain potential customers’ email addresses - a great step in your email marketing efforts. This can be achieved in various ways, for example inviting visitors to subscribe to your blog, receive updates and newsletters, or get a discount on your products.
Additionally, lightboxes can also be used to emphasize any important messages, such as deals, promotions or events you’re hosting. They can also be implemented to ensure site visitors don’t miss a certain image or video that you want to share with them.
Lightbox website examples
Lightboxes can come in an array of styles, from a combination of images with text, to text on a plain background, and more. To set you on the right path, here are a few spot-on lightbox examples from a selection of the best website designs:
Promotion lightbox
Do you have an online store? Consider treating your site visitors to a special discount when signing up, just like women’s fashion brand Triptyc London has done here. The design of their lightbox is clean, light and airy, making it extra inviting. They’ve also included an image to help grab attention and entice visitors.
Mobile lightbox
When designing with your mobile website in mind, you generally don’t want to bombard your site visitors with information that will distract them. In order to disrupt their browsing experience as little as possible, keep lightboxes to a minimum and go for an unobtrusive design. Slow movement brand Sunny has ensured the popup only takes up a portion of the screen and has used friendly, inviting text to complement it.
Email lightbox
A striking shade of yellow and a bold pattern greet you on Howl, New York’s lightbox popup. The honest, tongue-in-cheek tone in the sentence at the bottom brings a smile to our faces, encouraging us to join their mailing list.
Cookies lightbox
It’s now commonplace to notify site visitors of your cookies policy. Food Algorithm have done the same on their website, utilizing a lightbox in the form of a thin strip at the top of the page. It’s unobtrusive and stylishly meshes with the rest of their design, both in terms of the website color scheme and the choice of font. Thanks to the dimming of the rest of the page, this subtle lightbox still manages to stand out.
When and how to use a lightbox popup on your website
Faced with notifications and popups on a regular basis, many of us seem to have developed an ability to automatically ignore them, or to simply close them straight away. To make the most out of your lightboxes, and to ensure you’re not disrupting site visitors with too much info, here are a few basic principles on how to use popups on your site:
Don’t show a popup straight away. Think about it - why would visitors want to sign up to your mailing list if they don’t even know what it is that your brand does? Set the lightbox to appear once your users have spent some time browsing and are already engaged on some level.
Trigger your lightbox to appear on a contextually relevant page. You can set a specific page for your lightbox to appear on. For example, if you want to invite visitors to subscribe to your blog, consider doing so when they’re on your blog page, as opposed to your homepage. If you want to offer them a discount, your lightbox could appear when they’re on your online store page.
Consider adding an exit popup. These are overlays that appear just as a visitor is about to leave your site. They are seen as a powerful way of increasing conversion. They can help stop visitors from abandoning your website, by offering them a final piece of content and, hopefully, convincing them to subscribe to your mailing list.
Refrain from popups when users are in the middle of a task. This will interrupt your visitors’ flow and your overall website navigation. For example, if users are in the process of scheduling an appointment on your online booking system, they don’t want to be interrupted with other information midway.
Not all messages need to be in the form of a popup. While popups are great for grabbing attention, they can also be overwhelming. Minimize your use of popups by considering whether certain elements or messages can be displayed in an alternative format. For example, if you have a nonprofit website and want visitors to donate, it could be as equally effective to include a ‘Donate’ button in the menu that stays put while you scroll, like HERoines Inc. have done on their Wix site. The same goes for presenting error messages when incorrectly filling in an online form, like in the example below. In cases like these, popup warning signs are often used, but a simple message or red warning sign can also do the trick.
Lightbox design and copywriting tips
Keep it simple. This holds true for both the design and the wording of your popup. Your lightbox design is supposed to grab attention, so there’s no need for intricate details. Instead, opt for a clean, bold look. Ensure that the text is easily readable on the website background in terms of size and color contrast.
Implement clear, to-the-point language. Make sure the message you want to put across is easily understood by going for simple words that don’t beat around the bush. Of course, you can always add a small personal nuance that reinforces your brand identity.
Use visual hierarchy in your text. Pinpoint what the central message of your popup is, and then make sure it’s the most prominent item of text in your design. For example, if you want to offer your customers 10% off, this information should stand out by being larger in size and having some empty space around it.
Keep aligned with the rest of your brand identity. You do want your lightbox to stand out, but not like a sore thumb. Ensure the visual language is cohesive with the rest of your website’s design, in terms of color palette, typography and general look.
Make your CTA (call-to-action) button stand out. There should generally just be one button that users need to click on your popup - and that’s usually the ‘Sign Up’ button (or some other form of CTA). Make it pop out by using a dominant color that stands out against the background, or emphasize it with a border.
Include clear text on your CTA. Users should instantly understand what it is they’re clicking. Depending on the context, commonly used phrases are ‘Sign Up’ or ‘Subscribe,’ but you can also add a touch of personality by going for something like ‘Keep me in the loop’ or ‘Join the fun.’
Consider adding an eye-catching image that fits your brand. Images are great for grabbing attention and enticing site visitors, as well as setting a certain tone. You can find icons that compliment the message you’re conveying, while making sure it doesn’t block or interfere with the text.
How to create a lightbox
There are a few simple steps involved in adding a popup on your Wix website:
In the Editor, click ‘Add’ on the left-hand side.
Click ‘Lightbox’.
Select your favorite lightbox design out of the list of categories.
Drag the lightbox element onto your page.
Click ‘Set Triggers’ to start setting up your lightbox.
Lastly, you can edit the text, adjust the placement of the lightbox on the screen (click the ‘Layout’ button) and customize the design (click the ‘Design’ button) to match your needs. Now you’re good to go!