How to Build Tabs Interactions in Storyline 360

---

Learn how to build a custom tabs interaction in Storyline 360 from start to finish. This session covers designing tab layouts, creating hover and selected states, using slide layers and triggers for interactivity, and saving the finished interaction as a reusable Storyline template.

Topics covered in this session:

1. Explore different tab designs: Tabs can be arranged in multiple layouts and styled to create simple or highly customized click-and-reveal interactions.
2. Build reusable visual elements: Use shapes, backgrounds, and slide masters to create a consistent tab interface without rebuilding common elements on every slide.
3. Use object states for feedback: Hover, selected, and visited states help learners clearly see which tab they are interacting with or have already viewed.
4. Connect tabs to slide layers: Triggers can display different layers when learners select each tab, allowing content and images to change within a single slide.
5. Save tabs as reusable templates: Create versions with different numbers of tabs and save them as Storyline template files so they can be quickly inserted into future projects.

Exercise Files

• View the final project
• Download the project file

User Guide

• Storyline 360: Working with Triggers
• Storyline 360: Adding and Editing States
• Storyline 360: Working with Layers
• Storyline 360: Working with Button Sets

Current E-Learning Challenges

• Using Desktop Folder Tab Designs in E-Learning #551 Challenge | Recap

• Using Tabs Interactions for Exploration #517: Challenge | Recap

• Using Tabs Interactions in E-Learning #490: Challenge | Recap

Tabs Examples & Downloads

• Simple Six Tabs Interaction
• Meat + Dough: Recipes from Around the World
• Whispers of the Red Giants
• Animated Gear Tabs
• Paati's kitchen is open
• Guide to a Healthy Lifestyle
• Mic Flop to Drop

Resources

• A Beginner’s Guide to Designing Effective Tabs Interactions
• The Most Straightforward Way to Build a Tabs Interaction for Storyline
• Everything You Need to Know About States in Storyline 360
• A Great Storyline Time Saver: Button Sets
• Create a Tabs Interaction with Storyline in 5 Short Minutes

Next Steps

Now that you know how tabs interactions work in Storyline 360, it's time to put those skills into practice. Using the source files in the downloads section, build a simple tabs-style interaction and share it in the latest e-learning challenge. If you get stuck or have questions, post in the forums and we'll help you out.