Help Center
Your answer is on the way...
    Help Center
  1. Creating your site
  2. Using the Wix Editor
  3. Adding and customizing elements
  4. Containers and boxes
    5. Wix Editor: Customizing Your Lightbox

Wix Editor: Customizing Your Lightbox

8 min read
Customize your lightbox to make it look how you want. You can choose an overlay to cover the page around the lightbox, set the lightbox's position, and change the background to create a design that's unique to your brand. 
In this article, learn more about:
A screenshot of a customized lightbox on a live Wix site.

Adjusting the layout of a lightbox

Set where the lightbox pops up on your page. You can choose a corner of the page where it should appear, and adjust the distance of the lightbox from the edges of the screen (offset).

To choose your lightbox's layout:

  1. Go to your editor.
  2. Click Pages & Menu    on the left side of the editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox to open it.
  5. Select the lightbox in the editor.
  6. Click the Layout icon .
  7. Choose how you want to adjust the layout:
    • Set position: Click a rectangle on the grid to set the position of your lightbox on the page.
    • Horizontal offset: Move the box to the left or right of the screen.
    • Vertical offset: Move the box up or down on the screen.
The lightbox layout panel. The cursor is hovering over the option to position the lightbox in the centre.

Setting up the lightbox overlay

Your overlay is the space around the lightbox that blocks out the rest of your site. This helps visitors focus on the message of your lightbox. Choose if your site visitors can click the overlay to close to the lightbox.

To set up the overlay:

  1. Go to your editor.
  2. Click Pages & Menu    on the left side of the editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox to open it.
  5. Click anywhere outside of the lightbox to select this area.
  6. Choose what to do next:
    • Decide if visitors click the overlay to close the lightbox: 
      1. Click Set Up Overlay.
      2. Enable or disable the Clicking Closes Lightbox toggle.
        Note: If you disable this option, make sure that you have either an 'X' icon or 'Close' button on your lightbox. 
    • Design the overlay: 
      1. Click Change Overlay Background.
      2. Choose between a color, image or video background.
      3. (Optional) Click Settings to adjust the overlay.
        Tip: You can adjust the opacity of color and image backgrounds. We recommend making the overlay slightly transparent so that your visitors can still see the page behind the lightbox but understand that it is blocked.
Clicking outside of the lightbox to access the overlay settings in Wix Editor
Overlays on your mobile-friendly site:
  • It is not possible to edit your lightbox overlay on the mobile version of your site.
  • If you add a color or image overlay on desktop, this is automatically applied to your mobile site. However, if you add a video overlay, this will convert to a still image from the video on the mobile version of your site.

Setting the lightbox background

Choose to have either a color, image or video background on your lightbox. Depending on the type you choose, you can also adjust settings such as the visibility and scaling.

To choose a background for your lightbox:

  1. Go to your editor.
  2. Click Pages & Menu    on the left side of the editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox to open it.
  5. Select the lightbox in the editor.
  6. Click the Design icon .
  7. Click the type of background you want for your lightbox:
    • Color: Select a color from the Color Picker, or add and adjust a stunning gradient. 
    • Image: Select your own image, one from Wix, or Shutterstock.
    • Video: Select a free Wix video or upload your own.
  8. (Optional) Click Settings to adjust the background to your liking.
The lightbox background in the Editor. The cursor is hovering over the 'color' option.

Customizing the lightbox Close button

Adjust the look and layout of the button visitors click to close your lightbox. You can choose the text, set the alignment of the button text, and customize its design for Regular and Hover view to make it stand out.

To customize the Close button:

  1. Go to your editor.
  2. Click Pages & Menu    on the left side of the editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox to open it.
  5. Select the lightbox in the editor.
  6. Click the Close button.
  7. Choose how to customize the button:
The close icon design panel. The cursor is hovering over the Text tab, which is open.

Customizing the X icon

If you've enabled an X (close lightbox) icon in the Lightbox Settings panel, you can adjust its look to suit your aesthetic. Choose from a range of designs, and customize the color, visibility, and border.

To customize the X icon:

  1. Go to your editor.
  2. Click Pages & Menu    on the left side of the editor.
  3. Open the relevant lightbox.
  4. Click the lightbox in the editor.
  5. Click the Close Lightbox (X) icon.
  6. Click the Design icon .
  7. Choose how you want to customize your X icon:
    • Select a new design: Click a preset from the panel to set a new design for the icon.
    • Customize the icon: Click Customize Design, and edit the icon how you want:
      • Fill color & opacity: Select the icon's color from the color picker, and use the slider to make it more or less visible.
      • Border: Choose a color for the icon border, and set its width (in pixels).
The X icon design panel. The cursor is hovering over the border width slider.

Did this help?

|
In this article
  • Adjusting the layout of a lightbox
  • Setting up the lightbox overlay
  • Setting the lightbox background
  • Customizing the lightbox Close button
  • Customizing the X icon

Related content

Wix Editor: Adding and Setting up a Lightbox

Hire a Professional

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