Lightboxes are pop-up windows that dim out the webpage or slide you were viewing before they appeared. Like this, for example:
View interactive version | Download the template
In e-learning, they’re a great way to show learners additional content without navigating away from the current slide, which could make them forget where they were in the course.
In Storyline 360, you can easily create lightboxes by simply adding a trigger (learn more in this article: All About Lightboxes). The rest is all done for you, automatically.
However, if you want to have more control over the way the lightbox looks—you may want to change the size of the lightbox window, the color used to dim the slide in the background, or swap out the X icon—you can create your own custom lightbox effect.
To see what I mean, check out this custom lightbox effect I created:
View interactive version | Download the template
Thankfully, that’s also super easy to do in Storyline 360. Let me walk you through the steps.
1. Add a Slide Layer
Start by adding a slide layer to the slide you want the lightbox to appear on. To add a slide layer, simply click on the New Layer icon in the Slide Layers panel.
2. Design Your Lightbox
Then, add a semi-transparent rectangle that covers the entire slide. In my example, I set the transparency to 32%.
For the fill, choose a color that’s slightly darker than the color of your slide. This will create an illusion that your slide is “dimmed.”
The easiest way to find a darker shade of your fill color is to open the Format Shape settings. In the Color dropdown, select More Colors and slide the arrow on the right-hand side downward to choose a darker shade of the selected fill color, as shown in the GIF below:
From there, add a solid-color rectangle to serve as the background for your content. You can use the same color as your slide—like I did—or another color. It’s up to you!
Next, pop in your content. This could be text, images, video … really anything you want!
Finally, add a shape or button to close the lightbox. I chose to go with a simple X shape.
3. Add a Trigger to Close the Slide Layer
The last thing you’ll need to do on the slide layer is to add a trigger to close it when the learner clicks on the Close button (in this case, the X).
If you’re planning on creating multiple lightboxes on the same slide, duplicate this layer as many times as necessary. For my example, I created four duplicates, for a total of five slide layers.
4. Add Buttons to Show Slide Layers
Now, back on the base layer (your main slide), you’ll want to insert buttons that, when clicked, open the slide layers (your lightboxes).
In my example, I’ve inserted five circular images that will serve as my buttons.
The next step is to add triggers to your buttons to show the appropriate layers when the learner clicks.
The easiest way to do this is to add the trigger to your first button, then copy and paste it onto your other buttons. From there, you can simply update the layer each button opens in the trigger panel, as shown in the GIF below:
You can also add a Hover state to your buttons so learners intuitively know they’re clickable, and a Visited state so they know which buttons they’ve already clicked on. Here’s an article that walks you through how to set that up: Storyline 360: Adding and Editing States.
5. Add Transition (Optional)
To give your lightbox a more polished look, add a fade transition to your layers. To do that, simply select each layer, click on the Transitions tab, and choose Fade.
More Resources
And that’s all there is to it! In just a few minutes, you’ve created your own custom lightbox effect.
If you like my example, you can download the template here. I’ve even thrown in a second version for good measure!
And if you’re looking for more resources on lightboxes, check out the links below:
- All About Lightboxes in Storyline 360 (Article)
- How Are Designers Using Lightbox Slides in E-Learning? (E-Learning Challenge)
Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.
Published 4 years ago
Version 1.0
