Lightboxes

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.

Follow these steps in the editor

Open exercise template →

Access the lightbox. From the Pages panel select the “Subscribe” lightbox.
Adjust the lightbox size. Select the lightbox container (you can use the blue breadcrumbs or the Layers panel for easier access). Set the width to 80vw and the height to 80vh.
Set the lightbox trigger. With the lightbox container selected, click on Set Triggers. Toggle the setting so the lightbox is set to automatically display. Change the Delay to 3 seconds. Then close the panel.
Add an animation. With the lightbox selected, click on the Animation icon from the floating action bar. Choose the Fade in effect.
Preview the site. To review the final result, preview the site.

Transcript

Let’s see how to use lightboxes on Editor X.

Lightboxes are attention-grabbing popups that appear in front of page content to give visitors information or get them to take an action. They’re great for sharing promotions, getting subscriptions and more. On Editor X, you can edit them to work effectively on different screen sizes. We’ll explore how to add, customize and design lightboxes across breakpoints.

Let’s dive in.

On this landing page we want to add a lightbox that pops up when users click the subscribe button.

So first we’ll grab one from the Add panel under layout tools. There are a few different styles to choose from–let’s pick this.

Right when the lightbox is added, it’s in edit mode. We can access this or any other lightbox we add from the Pages panel here.

Behind the lightbox container there’s this overlay that’s darkening the page behind it. To change that up we can just open the Inspector and edit the page background settings.

Another quick change we can make here is that we can choose whether clicking the overlay lets visitors close out of the lightbox. There are a couple other options to close it as well. We’ll cover them a bit later on.

Okay–here’s the lightbox design we want to create. It’s going to be a full page one with a background image like this, some text and a signup form.

We’ll design this lightbox the same way we would any other container. To get the design we want, we’ll start by setting the width to 100 viewport width and the height to 100 viewport height—this way the container covers the full viewport.

Like all containers, this one has a 1x1 grid applied by default. And the grid itself might have other height properties set up. So let’s go to the row height here and make it 1fr so we can make sure the lightbox takes up all of the available space.

Next we’ll add an image…change it to this one we uploaded earlier…then stretch it.

And then we’ll change the content that’s in this stack here…style the text based on our site theme…get rid of this button…then add the text we want.

We’re using this lightbox for visitors to add their email and subscribe—so for that we’ll need a form. This one has an email input. We’ll add it to the stack and quickly design it to look how we need. If you want to know more about using forms, you can check out our tutorial on them.

Last thing here–we’ll adjust the form size so it’s the full width of the stack container it’s in, this way it adjusts along with the stack. Now, we’ll make the stack container’s width 80%. And let’s also add a 600 pixel max width so it doesn’t get too big on larger screens…we need to fix up the spacing here as well…cool.

That’s done so let’s make sure our visitors can close this lightbox. Like we said before, there are a few options and this particular lightbox has an X icon, which we’ll move here where it’s more noticeable…and let’s center and make it bigger.

All good on desktop–let’s resize and see how it looks at other breakpoints. So, it looks good on tablet…

…but on mobile the fit of this text isn’t ideal. To fix that, let’s set the text to scale with these min and max sizes.

We’ll try resizing again. Now once we get to the mobile breakpoint, the text scales down a bit–much better.

Okay, we’ve got our design and layout done at all breakpoints. We’ll need to set up how it behaves so let’s go to Set Triggers for a look at the settings.

We’ll change the lightbox name. Here, if we chose for it to display automatically, we could decide which pages we want it on and the time it takes to pop up after the page loads. But we’ll knock that off for now. We want to trigger the lightbox another way, and have it open by clicking a button.

From here we can also choose from these options to close the lightbox–either with an X icon or a close button.

To add a little interest we’ll change the animation of the lightbox as it opens. We’ll set this one to slide in…and have it come up from the bottom of the screen.

Okay, the lightbox is all set up. Now let’s go back to the home page and get it to appear by hitting this button. We’ll link this button to the lightbox option, and choose our subscribe one.

All good, time to preview. Hitting subscribe brings up the lightbox. We can submit the form, then close with the X when we’re done. And that’s it for how to add and design a lightbox, edit its settings and get it to appear on a site.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.