Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.
Author: Rema Merrick, MSIT
Published: November 21, 2022
Time to Read: 3 minutes
Lightbox slides in Storyline come with a system close button like the one shown below.
If you want more behavior control of the close button or you want to change the look of the close button, you can hide the system control button and add your own. In this post, you will learn how to remove the system close button and add a custom close button.
This task should take a few minutes to complete.
To successfully complete this interaction, you’ll need to know how to do the following tasks in Articulate Storyline.
- How to create a new project
- How to insert a new slide
- How to add text, images and objects to a slide
- How to create an object trigger
- How to create a lightbox slide
The following steps take place on the lightbox slide.
Below are the steps I took to develop the interaction. I did not give specific instructions on how to accomplish each task; I listed the tasks I completed to develop the interaction.
Create a new project in Storyline 360.
Hide the System Close Button
NOTE: The system close button displays on the lightbox slide in preview mode. Once you publish the file, the system close button disappears.
Notice how the slide looks with and without the system close button.
Add a Custom Close Button
Now you can add a custom close button. There are many design approaches you can take to create a custom close button. I’ll show you the design for one of my recent projects.
- Add a close button icon from the Content Library 360: X = 637, Y = 29, Width = 57, Height = 57.
- Add a rectangle shape for the custom exit (close) button: X = 637, Y = 29, Width = 57, Height = 57. Name the shape Exit Button.
- Add an object trigger to close the lightbox when the user clicks the Exit Button
Sign up to receive more eLearning how-to guides.
Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.