All posts

Recreate the OLIPOP website inside Articulate Rise

A nine-part build-along where we rebuilt the OLIPOP brand site — navigation, carousels, a four-column grid, flashcards and more — entirely inside Articulate Rise with Mighty.

The Mighty teamMighty by Maestro
2 min read

Here's a fun one. Could we take a bright, bold, unapologetically fun brand site — OLIPOP — and rebuild it inside Articulate Rise? Not "kind of close." Actually-looks-like-the-real-thing close.

Short answer: yes. And we filmed every single step so you can build it right alongside us.

The full compilation is playing up top — pour yourself something fizzy and watch the whole thing. Or skip ahead: each episode below tackles one component, so you can grab exactly the pattern your next course needs.

Why OLIPOP?#

Because it's the perfect stress test. The OLIPOP site has everything that usually makes designers say "you can't do that in Rise" — playful motion, a swipeable carousel, a tidy product grid, big personality. If Mighty can handle OLIPOP, it can handle your brand guidelines too.

What you'll build#

  • A sticky, branded navigation bar
  • An auto-playing image + video hero moment
  • A swipeable image carousel
  • A crisp, responsive four-column grid
  • A rotating quote carousel
  • Click-to-flip flashcards
  • Custom icons and the brand polish that ties it all together

Let's start at the top#

First we scope the project and frame the Rise course, then build the navigation — the piece that instantly makes a course feel like a real site instead of a slide deck.

We scope the build and set up the Rise course.
A sticky, branded nav bar built with a single Mighty block.

Now the fun part: the interactive bits#

This is where vanilla Rise usually taps out — and where Mighty shines. The carousel and grid below take minutes, not days, and they look like they belong on the real site.

A swipeable, brand-styled carousel.
Click-to-flip flashcards that match the OLIPOP look exactly.

Watch the rest of the series#

The remaining episodes round out the build — every one lives on the channel:

Your turn#

Pick one component — start with the navigation, it's the most satisfying — and rebuild it in your own course this week. Then come show us; we genuinely love seeing what people make.

Mighty is a Chrome extension for Articulate Rise — add custom blocks, transitions, global styles, and AI-built interactives without leaving Rise. Start a free trial or watch more on YouTube.

Try Mighty free for 30 days.

Install in Chrome, open your next Rise course, and ship the interactives you couldn’t before. No credit card. Cancel any time.