Help Center
    Help Center
  1. Studio, Partners & Enterprise
  2. Wix Studio
  3. Using the Wix Studio Editor
  4. Adding elements in the Studio Editor
    5. Studio Editor: Using Lightboxes

Studio Editor: Using Lightboxes

6 min read
A lightbox is a pop-up that you can customize to your needs. Design the pop-up window and add the elements you want, then choose when it appears to site visitors.
You can also link elements, like text, buttons or images, so clicking them opens the lightbox. This is a great way to increase the exposure for time sensitive information, sales or promotions.
An example of a lightbox used to gain more subscribers for the client's newsletter
In this article, learn how to:

Adding a lightbox

Add a lightbox pop-up to your site so you can start setting up exciting announcements for visitors to see.

To add a lightbox:

  1. Click Add Elements on the left side of the Editor.
  2. Click Layout Tools.
  3. Click Lightboxes.
  4. Select the lightbox you want to add. 

Customizing a lightbox

Customize the lightbox to match the rest of the site. Add any elements you need, then change the background color and decide on its opacity.

To customize a lightbox:

  1. Click Pages  on the left side of the Editor.
  2. Select the relevant lightbox under Lightboxes.
  3. Click the lightbox in your Editor.
  4. Choose how to customize the lightbox:
    • Add elements:  
      1. Click Add Elements on the left side of the Editor. 
      2. Drag and drop the relevant element. 
    • Design your background: 
      1. Click the Open Inspector arrow  at the top right of the Editor.
      2. Scroll down to Design.
      3. Choose a color and set the background opacity under Background.
  5. When ready, click Done at the bottom to exit Editing mode. 
A screenshot of the lightbox editing mode, choosing a background color in the Inspector
What's next?
Preview the site to see the lightbox in action.

Setting triggers for a lightbox

Choose how and when the lightbox appears. You can set it to appear automatically on specific site pages or link it to an element (e.g. text, image). You can also decide how visitors close the lightbox after viewing it.
Note:
The lightbox is displayed once per visitor, on the first relevant page they see (in case it's set to appear on multiple pages).

To set up triggers:

  1. Click Pages  on the left side of the Editor.
  2. Select the relevant lightbox under Lightboxes. 
  3. Click the lightbox on the canvas.
  4. Click Set Triggers.
  5. Select the relevant option under Automatically display lightbox on Pages:
    • Yes: The lightbox automatically appears when visitors enter the relevant pages.
      1. Click under Which pages is it on? to select the relevant page(s).
      2. Drag the Delay slider to set how long (in seconds) it takes the lightbox to appear once the page loads.   
    • No: The lightbox does not appear when visitors enter a page. Instead, it's triggered by a button or a link you choose. 
  6. Enable the relevant toggle(s) under How does the lightbox close?.
    Note: If you disable both the 'X' icon and 'Close' button, visitors can click outside of the lightbox to close it.
  7. When ready, click Done to exit Editing mode.  
The triggers panel open next to a lightbox, set to open automatically on the home page

Setting a schedule for a lightbox

Choose when site visitors see the lightbox. If you're promoting a limited-time offer, for example, this ensures the lightbox only appears in the relevant time frame.

To set the lightbox schedule:

  1. Click Pages  on the left side of the Editor.
  2. Select the relevant lightbox under Lightboxes. 
  3. Click the lightbox on the canvas.
  4. Click Set Triggers.
  5. Scroll down to Lightbox scheduling and click + Set schedule.
  6. Set the start date and time and the end date and time.
    Tip: Make sure the correct time zone is set. If not, you can change it. 
Setting the lightbox schedule in the Studio Editor

Linking elements to a lightbox

Link elements on the site to open a lightbox, so visitors never miss an announcement. You can link elements like text, images, videos and buttons. 

To link an element to a lightbox:

  1. Click the relevant element in your Editor.
  2. Click the Link icon .
  3. Select Lightbox on the left.
  4. Click the Which Lightbox? drop-down and select the relevant lightbox.
  5. Click Done.
Linking a text mask element to open a lightbox when visitors click it

Managing a lightbox

Manage the site's lightboxes to keep them organized in the Editor. You can rename them so they are easy to find, duplicate them to save time and delete any outdated lightboxes.

To manage a lightbox:

  1. Click Pages  on the left side of the Editor.
  2. Click the More Actions icon next to the relevant lightbox.
  3. Choose what to do next:
A lightbox in the pages panel, showing the available management options

Did this help?

|

In This Article

  • Adding a lightbox
  • Customizing a lightbox
  • Setting triggers for a lightbox
  • Setting a schedule for a lightbox
  • Linking elements to a lightbox
  • Managing a lightbox

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched