Wix Lightbox

Codecademy Team
Learn how to add interactivity to your Wix site, target specific customers, and increase engagement using Wix's easily customizable Wix lightbox element

What is a lightbox?

The Wix lightbox is a web design element, sometimes referred to as a “modal pop-up” or “modal window” that responds to user actions. It consists of a window for content like a message, image, or form, and an overlay, which is usually a semi-transparent background that appears around the lightbox to obscure the page behind it. Below shows a website displaying a lightbox after an image is clicked.

A computer mouse clicking on an image of a website and a lightbox opening.

There are a variety of scenarios that make a lightbox a good addition for your website:

  • Asking a user to subscribe to your newsletter.
  • Alerting users when an item they’re interested in is on sale, or notifying them of limited-time events like flash sales.
  • Live streams or virtual concerts.

Lightboxes in Wix are highly customizable and easy to use. While you’ll often see lightboxes appear in the center of a web page like in the example above, Wix gives you the option of positioning lightboxes at the top or to the sides of the page. Here are three lightboxes positioned in different ways and shown side by side in comparison:

Screenshots of 3 differently positioned lightboxes on the same website: in the corner, at the top and at the bottom of the website.

Why use a lightbox?

You might be wondering, why use a lightbox instead of sending the user a link to a different webpage, creating a traditional pop-up, or displaying some hidden text on an event like a mouse click or mousing in?

The lightbox is uniquely suited for situations where you want to redirect a user’s attention since all other parts of a webpage become concealed when the lightbox is displayed. Additionally, lightboxes need a specific user action to “trigger” them to open and display. These actions, or “events”, range from simply loading a web page to clicking a mouse on specific elements. Because of this, you can more narrowly focus on encouraging users to do something, such as signing up for a newsletter or purchasing an item, when they already show an interest in doing so.

Other advantages of the lightbox include the ability to exit a lightbox if a user isn’t interested or doesn’t want to take immediate action. Compare this to a link that will redirect users to an entirely different page of a website whether they are interested or not. For site owners, lightboxes are easy to set up because there’s no need to create specific URLs, create a new page, or write code.

Adding and Setting Up a Lightbox

  1. To add an element to a Wix website, click the + Add icon on the left side of the Editor. This section of the Wix Editor houses ready-made templates of different elements to add to your website, including lightboxes.

As mentioned earlier, lightboxes are triggered by user action and are considered to be interactive elements. Click or hover over the heading “Interactive” to view these elements including lightboxes.

Screenshot of mouse hovering over the Interactive heading of the open Add section of the Wix Editor.

  1. Click or hover over one of the themes under the heading “Lightboxes” to see the available lightbox templates.

Templates are grouped by theme: “Welcome,” “Subscribe,” “Promotion,” and “Contact.” Both “Welcome” and “Promotion” display information to users, such as information about your website or any sales you might have. “Subscribe” and “Contact” contain templates for lightboxes with forms that take in information about your users, either to signup for an email list or send messages to you. Let’s see just how easy it is to use a lightbox by walking through setting up a lightbox together for a plant nursery website, Nurturing Naturals Nursery.

Screenshot of a mouse hovering over the Lightboxes section of the Add section of the Wix Editor over a Wix Site.

Once you’ve found a lightbox element you like, click or drag it onto the web page. You’ll notice once you choose a lightbox that the Wix Editor will enter lightbox mode and add both the overlay and pop-up to the site.

  1. Click on the pop-up to open the settings and you will have the ability to rename your lightbox along with automatic display, the pages the lightbox should appear on and how long to delay its display, as well as linking it to another element. Click on the text below “What’s the lightbox’s name?” and type in a new name then exit the Lightbox Settings menu.

Screenshot of a lightbox and the Lightbox Settings menu open in the Wix Editor.

  1. In this example, a sale reminder should appear whenever someone clicks on an image of a sale item. But you can also set different “triggers”, or events, for opening a lightbox besides clicking on on an image.

To set a trigger, first exit the lightbox mode if it’s open by clicking on Exit Lightbox Mode in the upper lefthand corner:

Screenshot of the Exit Lightbox Mode button.

Then link the lightbox to an existing element, in this case, one of the images of the plant categories. Then clicking on an image and choose the gear icon, for the Image Settings menu, and in the section “Image Behaviors” choose from the dropdown menu for “When image is clicked” the option A link opens.

Next, under “What does it do?” click on Add a link to open a new dialog box.

Make sure you choose Lightbox from the column of options and then under “Which lightbox?” choose the correct lightbox if you have more than one lightbox, otherwise, if there is only one its name should be displayed by default.

Screenshot of Lightbox Settings menu and link settings open over a website in the Wix Editor.

When you’ve linked the lightbox to another element, click the Done button.

  1. Check your work by previewing the site and clicking on the element you linked to the lightbox.

A finished lightbox with a click as a trigger should behave and look like the example below.

A mouse clicking on an image on a Wix site and a lightbox appearing in the lower righthand corner of the browser.

Recap

In this article, you learned about a type of interactive element, the lightbox, and how to create them. Adding lightboxes to your Wix site is another step towards creating more complex, dynamic websites. Doing so can give you a competitive advantage by capturing user’s attention and encouraging them to take certain actions.

To review:

  • Lightboxes are a type of interactive element that depends on user action to display.
  • Lightboxes consist of a pop-up window and an overlay.
  • Lightboxes are best used when you want to redirect a user’s attention and encourage an action.
  • There are a variety of lightbox templates available in the WixEditor that can be customized.
  • The “Lightbox Settings” menu allows you to rename lightboxes, link them to other elements, and customize the “trigger” action.

Going Further

Using what you learned in this article, try to add a lightbox to your own Wix site and customize it by implementing the following:

  • Try to match the color palette of your site by altering the color of the overlay and the font of one of the templates.
  • Create a lightbox that is positioned at the top of a webpage or to the side.
  • Instead of choosing a click as a trigger, have the lightbox appear as soon as someone visits the Wix Site.