A lightbox is that annoying little banner that comes on the first page of a website. It darkens the rest of the webpage and looks like a bright pop-up. Usually, it contains a coupon, a sale alert, a subscription notification or something informative.
Lightbox popups are not frustrating; they are an effective way of keeping the audience engaged. It instantly notifies the customers of promotional offers and subscription lists. Important announcements can also be made on this lightbox to ensure every customer knows about it.
The best way to create effective and non-annoying lightboxes is by mastering the timing, copy and design of the lightbox.
Lightboxes are styled differently depending on the purpose it wants to serve. They can be designed with plain text, images or a combination of both. The following lightbox example is a good way to select the right ones for your website.
This is perfect for websites that are online stores. Visitors can be offered a special discount if they sign up for the newsletter. The lightbox design by Country Living is a great example. The image on the lightbox is good enough to attract more customers.
While designing mobile-friendly websites, special considerations should be taken. Designers often overlook the fact that mobile users have smaller screens so creating big lightboxes will frustrate the users. A popup screen is already a disruption; it should be done subtly. The design in such scenarios needs to be minimalistic and unobtrusive.
This email popup powered by OptinMonster is an inviting email lightbox. The copy on the popup screen paired with the striking shades of mustard and white is an ideal advertising technique. It speaks about what the brand is about and makes the audience want to join the mailing list.
You have an idea, we have a way to get you there. Ready to discuss? It's Free!
The lightbox has to add value to the customer. Gone are the days when websites could simply ask their visitors for newsletter signup without giving anything in return. Today, a coupon code or a special offer will cut through the clutter. Therefore, when designing and inserting a lightbox, ask yourself this one question: what do my customers get in return?
Once you have that answer, you can use a lightbox in one of the following scenarios.
When a new product is being launched on the website, a lightbox is a great way to bring awareness to the customers. This way, your customers will be in the know and you will be able to promote your product launch. A great scenario would be to combine this lightbox with a limited time sale.
There is an option where you can have a sale for every visitor but limited at the same time. Using a lightbox can serve this purpose. Offering discounts or offers after a visitor has stayed on a certain page for 30 seconds is a good option. Another way is to show the popup to a visitor who keeps coming up, the conversion rate of this strategy is very high. More options can be done but that depends on the technicality of the website and its flexibility.
This is ideal for content and services websites. An informational guide is a great way to give the customers something of value. It also places the business in a position of authority and professionalism. A lightbox allows the users to connect with you all the while building trust and loyalty.
This is a great way of keeping the visitors hooked to your website. Although, it is sometimes important for users to stay on one page when it is displaying sensitive information. Banking websites have activity reminder light boxes because the page goes inactive and the user logs out automatically. In such cases, the popup must appear to remind the user to finish the task and safely log out from the website or application.
When visitors leave the website without converting into customers or active leads, a lost user recovery popup can appear. This is a last attempt to make the visitor stay. It works only, appearing once when the visitor hits the back button. You can have a survey placed in this lightbox asking why the visitor wants to leave.
A popup screen in the middle of a task is downright annoying. Therefore, it is a challenge to place a lightbox without disturbing the user experience. Like everything else in the world, this also has a way around it.
Lightboxes should present themselves at a time when the user will not be in the middle of a task. Usually, a lightbox appears right when a website loads and the first webpage appears. This is the time when the user is familiarizing him or herself with the website, so he or she is least involved.
Imagine a lightbox appearing right when someone is looking at the features of the gadget they wish to buy. Or the colors of a shirt they were looking at and a lightbox appears. Imagine the level of frustration and the lightbox. The brand image and loyalty will go steeply down. Therefore, it should appear at the beginning and in a subtle way.
A website designed on WordPress is the easiest run because it has plugins that make everything quick. To create a lightbox on WordPress, there is a dedicated plugin for the purpose. The Responsive Lightbox & Gallery is the free plugin by dFactory.
It is a simple plugin and highly recommended by users. The best thing is that it is made for all users of computers and mobile devices, no additional plugins are required for smaller screens. You can create a lightbox with the following steps.
The first step for creating the lightbox is installing and activating the recommended plugin. Follow the steps and add your preferred images to the gallery. In the gallery, it is important to give it a name. This gallery will contain images you will be using in the lightbox for promotional purposes. Text boxes will appear at the bottom of the page and there will be four different options available to access the images from. Use the source of your images to add the required images to the lightbox. You will need to select the images to use them and click on “use these images”.
The selected images appear in the Gallery Images section and you can position them, however, you wish. If you would like to edit or reposition the images, you can drag them and create the desired position. Deleting or editing the images is also quite easy, simply hover over the image and new options appear. You can add titles, captions, image descriptions and alt text.
This creates a lightbox for your website. Don’t forget to save the changes and move on to the next section to add the lightbox to your desired webpage. You also have the option to customize the lightbox using the same plugin.
Adding design elements to the lightbox can be done through the available tabs. The following tabs can be used for customization:
This tab allows you to style the gallery as you wish. Four options are available, the basic grid, global (basic grid), basic masonry and basic slider.
You can design the gallery with colours and effects of your choice.
This allows you to decide the number of images being displayed on a page. You can also define the layout and position of each image.
You have the option to insert the title and caption of the lightbox. Size can also be adjusted using this tab.
Here the gallery description option is available and the option to do some extra settings. You can also add custom classes in the misc. tab.
Once everything is in place, it is time to insert the lightbox. Copy the shortcode and paste it to the edit screen. You can do this by going from the WordPress admin, clicking on Gallery and selecting All Galleries. Next, copy the shortcode in the shortcode column and then open the page where the lightbox is to appear. Paste the shortcode into the text editor block directly. Save the changes and check how the new lightbox works.
Creating a lightbox on Wix is much easier. It can be made in five simple steps:
You can use the lightbox effect on the images using two different elements using Weebly. One id is the image element that allows you to add the lightbox effect on one image only. The second is using the lightbox element on the entire gallery. Creating a lightbox with a single image can be done like this:
An ideal lightbox has two options, either to send the visitor to your desired page or exit and continue to explore the rest of the website. The design must have the exit option clearly visible and the visitor should be able to locate it within a few seconds.
Lightboxes can also pop up on the sides, the top or the bottom of the webpage. While the visitor can still see the rest of the website, interaction is not possible. The objective of the lightbox is to bring to the attention of the visitor something informative. So the copy on the lightbox should be short and direct.
While designing a website, the addition of a lightbox should be considered since there are many advantages attached to it. If done right, a lightbox can increase a company’s lead considerably as stated in one research by OptiMonk. According to the research, BitNinja was able to increase its leads by 65% using lightbox on the website. The key was strategic placing on the webpage that led to a significant increase in revenue.
The way a lightbox works is similar in all websites across the world. It is an overlay in web design that dims the rest of the webpage and locks all interaction. This means that the visitor cannot click anywhere else before dismissing the popup. Some lightboxes leave no option but to click on one option that takes the visitor away from what he or she came to the website for. This is not an effective strategy to use as it increases the bounce rate.
You can use any Display Network targeting method
Lightboxes, including other popups, should be used carefully. Although they are an important feature of any website, they can get annoying. However, they should also not be banned either as they are a great way to attract the attention of the visitors to important information and announcements.
Banners such as these can increase engagement and brand awareness. As mentioned earlier, lightboxes placed at the right time and with an effective layout can boost leads and generate high revenue.
It's time to rethink your website design! A well planned website design builds trust, promotes conversions, outranks competitors, and supports SEO and PPC campaigns. We have helped dozen of clients achieve their business goals with powerful website designs. Let's talk about your website plan!GET A FREE PROPOSAL