Blog Post

E-Learning Challenges
2 MIN READ

Using Graphic Dividers to Add Visual Interest to E-Learning Courses #436

DavidAnderson's avatar
3 years ago

Graphic Dividers in E-Learning #436: Challenge | Recap

Looking for a quick and dirty way to add visual interest to your Rise 360 courses? Try adding a full-width image block as a custom graphics border between blocks. Check out the following example to see how it works. 

View the example

How does the effect work?

This is an elegant effect using simple graphic elements, and the solution is quite simple once you break it down. The key is creating image dividers and inserting them as full-width image blocks between content blocks.

How to Create Custom Dividers in Rise 360

Ginger has a great overview of how to create dividers in PowerPoint for Rise 360. There’s also a PowerPoint template you can use to help you get started.

View on YouTube | Learn more

🏆 Challenge of the Week

This week, your challenge is to show ways to add visual interest to e-learning courses w/ custom graphic dividers.

⚠️ NOTE: If you have an Articulate 360 subscription, we’d like to see what you can do with custom dividers in Rise 360. But as always, you’re welcome to use any authoring tool you like for this week’s challenge.

Resources

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

📆 Last Week’s Challenge:

Before you divide and customize this week’s challenge, check out the ways course designers collaborate to build e-learning courses: 

Collaboration in E-Learning RECAP #435: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challengesanytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

Published 3 years ago
Version 1.0

53 Comments

  • JodiSansone's avatar
    JodiSansone
    Community Member
    Van Gogh's Self Portrait--the Rise Edition
    Demo: https://jodisdemos.s3.amazonaws.com/436+Van+Gogh+Background/index.html

    For this challenge I went through my graphics and thought it would be fun to see what I could do with the Van Gogh portraits I used in #372 and #413. I flipped between using VG's Starry Nights and a plain dark background/divider to give your eyes a rest. I also went back and forth between what flash card interation to use--I started with the stacked cards, but switched to the grid because I liked seeing all the portraits on one screen, as if they were all in a gallery together. I may change my mind on that. :)
    Have a great week!
    • Samuel's avatar
      Samuel
      Community Member
      Hi Jodi! You know it's good when you think, "is this really Rise"?
      • JodiSansone's avatar
        JodiSansone
        Community Member
        Thanks Samuel! I really need to use Rise more often. My rusty on my storyline blocks.
    • JillVanderwall's avatar
      JillVanderwall
      Community Member
      Your use of paintings as a background texture was wise! It showcases what makes Van Gogh so unique for his time. I also appreciated the back and forth from that busier background to the plain dark; it rested my eyes. The flip card feature with the painting and its demographic information was an intelligent way to get the learner involved. You've given me a lot of great examples to consider as I design in the future (all in one short microlearning!)
    • JillVanderwall's avatar
      JillVanderwall
      Community Member
      Laughing as I learn, is a great sign of excellent design in my book. The idea to scroll from the top of the guillotine to the bottom was clever! (That was some hardcore knitting!)
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Very seamless and I liked learning the background. Oh, those nasty Tricoteuses!
      • Samuel's avatar
        Samuel
        Community Member
        Thanks, Laura! I got those from freepik.com.
    • JillVanderwall's avatar
      JillVanderwall
      Community Member
      This is a fun, immersive interaction! I like how the sounds follow the seasons as they switch. Motion path work still feels daunting, but I love being inspired by your work.
      • Samuel's avatar
        Samuel
        Community Member
        Thanks for the kind feedback.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Super cute! It took me a second to realize the arrows were moving the squirrel through the seasons.
  • Hello!

    This project combines the Rise microlearning format with some graphic dividers.*

    THAT ESCALATED QUICKLY
    (A brief history of elevators)
    https://bit.ly/elhc436


    *Further details in the comments below.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      I learned a lot and I thought the quiz was vey inventive. I'm curious about your empty character explantion so I'll have to play with it. Thank for sharing it.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Found yourself wishing you could remove the title from the Cover Page to create your own titles? But you can't as Rise won't let you publish your course without a title?

      Simply replace the title with a blank unicode character!

      Go to https://emptycharacter.com and copy and paste an invisible space into the title of your course.

      Then you can drop an animated graphic title into the Cover Page block, without any unwnated text obscuring it.

      I've used the Spacer block with an image background to create graphic dividers between each 'chapter'.

      The chapter numbers are also graphic dividers (centred svg images, created in CorelVector), based on an old-fashioned elevator floor position dial. These replace the 'dots' progress bar, which I have disabled.