Wix Editor: Showing and Customizing Lightboxes on Your Mobile Site

3 min read
By default, any lightboxes that you have on your desktop site are automatically hidden from your mobile site. 
You can choose to keep your lightboxes hidden from your mobile site, or customize and optimize them from the mobile editor to show them on mobile.
In this article, learn more about:

Showing a lightbox on your mobile site

Depending on your mobile site's content and layout, you may want to display the lightbox to your mobile site visitors. As lightboxes act as pages, you can set your lightbox to display on mobile via the Pages panel.
If you change your mind, you can easily hide it again at any time.

To show your lightbox on mobile:

  1. Access the mobile editor.
  2. Click Menus & Pages  on the left side of the mobile editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox.
  5. Click the Settings icon .
    Note: This option is only visible if you clicked Yes under Automatically display lightbox on pages in the lightbox settings on your desktop Editor.
  6. Click Yes under Automatically display lightbox on pages.
screenshot of lightbox settings panel from the wix mobile editor

Editing your lightbox

Edit the content of your lightbox on your mobile site to make it look good on smaller screens. You may want to have less text on your lightbox on mobile than on your desktop site, or you may want to change how site visitors can close it. 

To edit your lightbox for mobile:

  1. Access the mobile editor.
  2. Click Menus & Pages on the left side of the mobile editor.
  3. Click Lightboxes.
  4. Click the relevant lightbox.
    • Click the elements in your lightbox (such as text and images) to customize them, add animation effects, or hide them from your mobile site.
    • Click outside the lightbox to access the overlay, and then click the Settings icon to enable or disable the function for clicking to close the lightbox.  
    • Click the 'X' icon (if you set your lightbox to include one) to either add animation, or hide it from your mobile site.
    • Click the 'Close button' (if you set your lightbox to include one) to change the text size and alignment, add animation, or hide it from your mobile site. 
Important:
Design options for lightboxes are limited in the mobile editor. For example:
  • You can not 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.
  • The background you choose is automatically applied to your mobile site, and cannot be changed in the mobile editor.
screenshot of overlay settings in mobile editor lightbox mode.
Note:
The delay timer on your lightbox begins once the site is fully loaded. If you have set your delay timer to 0, you may still experience a slight delay while the site is loading.

Did this help?

|