Lightboxes are attention-grabbing popups that appear in front of all or some of the content on a page and highlight a message for site visitors. They’re useful for promoting discounts or new products, getting newsletter signups and more. You can customize a lightbox across breakpoints so it’s effective on any screen size.
Adding a lightbox
Find the lightboxes in the Add panel under Layout tools. Choose one from the designed options and click on it to add it to the page.
Editing a lightbox
From the Pages panel, you can access and manage your site's lightboxes. Click on the 3 dots next to a lightbox to rename it, duplicate it, or delete it. To edit a lightbox, select the one you want from the panel and it appears on the canvas in editing mode. Then you can set it up, design it and add more elements, just as you would with any other container.
If your lightbox doesn’t cover the entire screen, you’ll see an overlay behind it that dims the page content. To change the overlay’s color and opacity select it and adjust the page background settings from the Inspector panel.
Setting up a lightbox trigger
Lightboxes can either appear automatically after a visitor lands on a page, or when they click a certain link or button.
To choose how the lightbox appears, select it and click Set Triggers. Under the settings, you can choose whether or not to display the lightbox automatically.
If you choose yes: You can control which pages it will appear on, and drag the Delay slider to choose how many seconds it takes for the lightbox to appear after the page loads.
If you choose no: With this option the lightbox doesn’t appear automatically. Instead you can set up a button or link to trigger it.
Note: From here, you can also choose whether visitors can close the lightbox with an X icon or a Close button.
Triggering a lightbox with a link
You can link site elements such as buttons to trigger a lightbox. Select the element and choose the Link icon from the floating action bar. Click the lightbox options, and choose which one you want to appear from the dropdown.
EXPLORE MORE TUTORIALS
Was this lesson helpful?
Thank you for your feedback!