How to create a Non-Scrolling Course

Hi Evolve Community!

Just curious if anyone has experience building a non-scrolling (or limited scrolling) course and how you were able to design it with the articles/theming. I am an intermediate user of Evolve and our team would like to change up our usual scrolling format to make our courses feel less like a scrolling website. If you have an examples to share, or even just a few tips on how to get started, would be happy to hear!

Thanks!

Hey Caleb and welcome!

Oh my yes - whilst Evolve was designed for and works best for Scrollable learning, that doesn’t mean you have to stick with it - that’s the best thing about Evolve - totally creative freedom to achieve the styling you want.

I made a slide-style course for my webinar on Theming in Evolve last year - I kept the content to one or two articles at most and kept the content short, then used the Footer Navigation to create the back and forward buttons and also included Page Navigation from the Extensions list.

This gave the result as seen in this screengrab:

You can download the Evolve course I made as seen here from the link on this page: Theming in Evolve : Intellum and then import it into your own instance to use as a template if you wish.

2 Likes

@hbailey – Helen, when you go with this kind of design, are there components or structures you should stay away from? I’m thinking about long dialogues, components that expand, hidden content, keeping articles with the same number of blocks, etc…

Thanks

Not particularly no - most components naturally take up less than the height of a typical screen - as long as you don’t add too many items or too much content/large images to them. So you can really control how much height is there.

Don’t forget people may be viewing this on various size screens though - you obviously can’t stick to this style of learning for a portrait screen mobile too, but for most laptop/monitor screens I guess you are looking at 700 pixels high (for a 1024x768 screen minus all the browser toolbar etc) for the minimum screen size people will use, up to around 1000px height (for 1920 x 1080) to play with.

You can also use appearance settings for each component and also padding and margins within your theme to make sue you are maximising the available space for content. Also getting rid of Top Navigation bar, and pinning Footer Navigation to the bottom (make sure Disable Sticky Footer is turned Off in Theme > Footer Navigation)

Hope that helps!

1 Like

Helen – thanks. This is helpful. Some trial and error to get the best fits for any particular course design.

1 Like