Wix Editor: Showing and Customizing Lightboxes on Your Mobile Site
5 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:
- Access the mobile Editor.
- Click Menus & Pages
on the left side of the mobile Editor.
- Click Lightboxes.
- Click the relevant lightbox.
- 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. - Click Yes under Automatically display lightbox on pages.
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:
- Access the mobile Editor.
- Click Menus & Pages
- Click Lightboxes.
- 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
- 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.
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.
Optimizing and refreshing your lightbox
If you've made changes to your lightbox in the desktop Editor, they may not be visible in the mobile Editor.
As the lightbox functions as a page, you can use the Page Layout Optimizer to refresh your lightbox and display the changes you've made in desktop.
Important:
If you're building your site using the new Editor experience, you won't have access to the Page Layout Optimizer tool. This is because Wix automatically optimizes your mobile layout in the new Editor experience.
To refresh your lightbox:
- Access the mobile Editor.
- Click Menus & Pages
- Click Lightboxes.
- Select the relevant lightbox to open it.
- Click Page Layout Optimizer
on the left side of the mobile Editor.
- Click Optimize Now.
Note:
Clicking the Optimize Layout button only refreshes the lightbox, and not the entire mobile site. If you don't like the changes, you can click the Undo icon 
on the top bar of the mobile Editor.
on the top bar of the mobile Editor.Did this help?
|