All About Lightboxes in Storyline 360
Whether you’ve designed a website or simply done your fair share of web surfing, you’ve probably run across lightboxes. They’re often used to display content (particularly images or video on photography websites) while dimming out the web page background. The lightbox feature in Storyline 360 works similarly. Triggering content to be displayed in a lightbox allows the slide of your choice to appear in a pop-up window over the current slide, which is dimmed. Here’s an example: Click here to explore the interactive version and here to download the template. A lightbox allows you to show learners additional content without navigating away from the current slide, which could cause them to lose their spot in the course. This can be especially helpful for stuff like bibliographical references or links to external resources. It’s also great for navigation instructions, a table of contents, or any other supporting assets that need to be available throughout the course. Let’s walk through how to add lightboxes to your Storyline 360 course so your learners can start reaping the benefits of this powerful feature. How Do Lightboxes Work in Storyline 360? In Storyline 360, you can trigger any slide (or series of consecutive slides) to open in a lightbox. The size, placement, and appearance of the lightbox is prebuilt for you, to make it super simple. This includes a red X button that closes the lightbox window automatically when learners click. These features make it quick and easy for you to create a consistent user experience. However, the trade-off is that you can’t customize these lightbox settings. If you’re looking for more control over the size, placement, or appearance of your lightbox content, you can always create your own pseudo lightbox effect using slide layers. To read more about how to do this as well as the pros and cons of this approach, check out this forum discussion: Lightbox Change Size? Pro Tip: When designing content for use in a lightbox, keep scale in mind. The scale of objects on your content screens (e.g., text, buttons, images) will be about 75% of the original slide size. Triggering the Lightbox Once you’ve created content slides for your lightbox, what’s next? To get your content into a lightbox, you’ll need to add a trigger. You’ll find the Lightbox Slide option under the action menu in the Trigger Wizard. Once you’ve selected Lightbox Slide, you’ll need to tell Storyline 360 which slide(s) to open. From the Slide drop-down menu, select the slide you want to appear inside your lightbox. If you’d like a series of slides to be lightboxed (e.g., for a media gallery), you’ll find it’s easier to place those slides into their own scene. That way you can simply select the first slide in that scene from the Slide drop-down and check the Navigation Controls box to allow learners to move forward and backward within that scene of lightboxed slides. You can also use your own navigation buttons, but your learners may find the size of Storyline’s default navigation controls a little easier to see and use. Pro Tip: To keep learners from getting confused, be sure to remove any custom on-slide Forward/Backward navigation buttons or arrows from your lightboxed slides if you’ll be using the default player navigation controls. Once you’ve selected the slides you want to appear in the lightbox, it’s time to tell Storyline 360 when to trigger this effect. From the When drop-down menu, simply select the option that fits your needs. For example, when the user clicks. Next, select the associated object. For example, in the screenshot below, the action to open the lightbox should happen on Slide 1.3 when the user clicks on the Previous button. If you’re using the built-in navigation buttons in Storyline 360, you can also trigger the lightbox to open when the user clicks on buttons built into the player, like Next, Previous, or Submit. Lightboxes can also be triggered to open from a slide or slide layer. Finally, you need to decide whether there are any specific conditions or criteria for launching the lightbox. For instance, what if you only want the learner to be able to access the lightbox after they’ve clicked on all the buttons on a slide, like in the example below: You can specify any conditions to be met by adding conditions to the trigger in the Trigger Wizard, as shown above. For more details on trigger conditions, check out this tutorial: Adding Conditions. Adding a Lightbox to the Course Player It’s one thing to make a lightbox available on a single slide, but what if you want lightboxed content to be accessible throughout your course? No problem! Storyline also gives you the ability to add a lightbox to the course player as an additional tab. Here’s how. From the player properties, select the Features tab. Under the Player Tabs section, click Add New (the blank paper icon): In the Trigger Wizard panel, enter a name for your new tab in the name field—for example, “Contact” for a slide with contact information. This name is what learners will see in the player, so be sure to choose something that makes it obvious what kind of information learners will find there. In the action field of the Trigger Wizard panel, select the lightbox trigger and then choose the content slide(s) you’d like to open up. Just like adding a lightbox to a slide, you can specify conditions for triggering this lightbox effect from the course player. When you’ve finished entering the information for your new tab, click OK. In the adjacent Storyline player preview, you should see your newly added tab. To make sure that your lightbox is functioning properly, simply preview your project and click the newly added tab on the course player. Resources Hopefully this comprehensive look at lightboxes has given you some new ideas for using them in your courses. For even more lightbox design inspiration, check out these helpful resources: How Are You Using Lightbox Slides in E-Learning? 3 Subtle Ways to Integrate Navigation Instructions Storyline Template: Lightbox Tabs Storyline Template: Integrated Navigation Instructions What creative uses have you discovered for lightboxes? Leave your ideas in the comments below or share them with the E-Learning Heroes community. Want to try lightboxes out for yourself, but don’t have Storyline 360? Start a free 30-day trial of Articulate 360, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.50+ Custom Menu Navigation Examples in E-Learning #358
Custom Menus & Navigation Examples RECAP #358: Challenge | Recap Learn how course designers go beyond the built-in navigation options by creating custom menus and tables of contents in e-learning. Menu layouts include animated tabs, flip cards, timelines, drop-downs, and more! Melissa Mendez Example | Melissa Mendez Ingrid Cuthbert Example | Ingrid Cuthbert Yvonne Urra-Bazain Example | Yvonne Urra-Bazain | Website Farah Azadeh Example | Farah Azadeh Alicia de Billy Example | Alicia de Billy Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Katelin Jordan Example | Katelin Jordan Deirdre O'Reilly Example | Deirdre O'Reilly Jodi Sansone Example | Download (.story) | Download (.ai) | Jodi Sansone | Website | @jodimsansone Danny Benton Example | Danny Benton | Website Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Jordan Peel Example | Jordan Peel Haley Northrup Example | Haley Northrup Benjamin Bouvier Example | Benjamin Bouvier | Website Charlotte Bouvier Example | Charlotte Bouvier | Website Samara Reyneke Example | Download | Samara Reyneke Ron Katz Example | Ron Katz | Website Karole Dawson Example | Karole Dawson Danny Benton Example | Danny Benton | Website E S Example | E S Samantha Bricknell Example | Samantha Bricknell Anuradha Gopu Example | Anuradha Gopu | Website | @AnuradhaGopu Jonatan Ben-Ami Example | Jonatan Ben-Ami Steve Morey Example | Steve Morey Ang CM Example | Download | Ang CM Ose Ndebbio Example | Ose Ndebbio | Website Heather Barlow Example | Heather Barlow Doris Chwist Example | Doris Chwist Isabel Radaelli Example | Isabel Radaelli Karin Lorbeck Example | Karin Lorbeck Neala Spear Example | Neala Spear | Website Elly Henriksen Example | Elly Henriksen Morten Holdt Example | Morten Holdt Sharon Plunk Example | Sharon Plunk Frederic Brewer Example | Frederic Brewer Danny Benton Example | Danny Benton | Website Scott Wilson Example | Scott Wilson Yekaterina Martynova Example | Yekaterina Martynova Andrei Rakitin Example | Andrei Rakitin Laura Gutiérrez Example | Laura Gutiérrez Nick Russell Example | Nick Russell | Website Chris Digital Example | Chris Digital Nathanial Hilliard Example | Download | Nathanial Hilliard Dennis Gifford Example | Dennis Gifford Dwight Daly jr. Example | Dwight Daly jr. Heidi Rocha Example | Heidi Rocha Preethi Ravisankar Example | Download | Preethi Ravisankar Pete Rix Example | Pete Rix | Website Veronica Nalley Example | Veronica Nalley Paul Alders Example | Download | Paul Alders | Website | @paulalders Norma Johnson Example | Norma Johnson Daniel Cañaveral Example | Daniel Cañaveral Erin Carmola Example | Erin Carmola New to the E-Learning Challenges? The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. If you share your demos on Twitter, please include #ELHChallenge so your tweeps can track your e-learning coolness. Share Your Custom Menu Examples! The table of contents challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.
