Recreating the OLIPOP Website in Rise

Some website layouts make you stop and think, “Could I build that in Rise?” The OLIPOP site is one of those: bold colors, playful type, clean navigation, and an eye-catching split-screen hero.

Recreate this fun OLIPOP website in Articulate Rise with me!

This build is not about copying a consumer brand for the sake of it. It is a useful design exercise for any Rise creator who wants a course to feel more polished, more branded, and a little less like the default block stack.

We’ll walk through the specific pieces recreated in Rise using native blocks, Mighty styling, and a few extra tools.

What we’re recreating#

The original OLIPOP website has a few standout patterns that we wanted to be sure to prioritize in our Rise recreation:

• A slim promotional callout bar at the top
• A clean logo area and simple navigation links
• A split-screen hero with stylized text on one side and motion on the other
• A bright, consistent color palette
• Branded typography and hierarchy
• Simple but exciting interactions

The goal is not pixel-perfect replication. Rise has real layout constraints, and part of the work is knowing where to push, where to adapt, and where to choose the practical course-friendly version.

Starting with the promo bar#

The very top of the OLIPOP site includes a small discount-code callout like you see on many websites. Here’s how to make one:

1. Add a Paragraph block at the top of your lesson.
2. Center the text.
3. Set the block background color.
4. Add a short promo-style line of text.
5. Turn part of the text into a hyperlink, such as a “Shop now” style link.
6. Use Mighty’s rich text editing controls to apply a brand-adjacent font.

In the demo build, the font used here is Teacher. It is not OLIPOP’s exact brand font, but it gives a similar playful feel and works nicely inside Rise.

That is a helpful lesson in itself: you do not always need the exact brand typeface to create the right feel. If your client or organization has strict brand requirements, use the approved font. But for concepting and inspiration builds, a close visual match can help you move quickly.

Building a logo row with a labeled graphic#

Next comes the navigation area. The OLIPOP site has a clean, classic website header with a logo and links to other pages. Rise does not offer a full website-style navigation builder, so this part requires thinking outside the box.

To add a logo to the navigation area, use the Labeled Graphic block.

1. Create or export a transparent logo image from your design tool.
2. Make sure the dimensions are appropriate. In the demo, we used a logo 2,000 pixels wide by 80 pixels high, which fit well.
3. Add a Labeled Graphic block.
4. Upload the transparent logo image.
5. Set the image to Full Width in the formatting settings.
6. Remove any hotspots.
7. Turn off Zoom on image click so the image does not behave like an interaction.
8. Adjust the block background color as needed.

The Labeled Graphic block is normally meant for image-based exploration, but with the hotspots removed, it becomes a flexible full-width visual strip.

Adding navigation links with columns#

The original website navigation aligns very far left and includes multiple links. That exact placement is tricky in Rise, even with additional styling controls. A standard text block can be widened and aligned left, but it still may not reach the position you want.

The workaround in the demo is to use Columns.

1. Add a Columns block below the logo row.
2. Set it to the number of columns you need (we set it to four).
3. Type in your page navigation headings (like “Shop,” “Our Story,” etc.).
4. Link each heading to the appropriate page, resource, or course destination.
5. Use Mighty to adjust the text styling if needed: size, weight, font, and color.

This does not fully recreate every website header item, such as shop icons or profile links. But it does create a useful course pattern: a simple row of links learners can use to jump to key sections, resources, or related pages.

Why this matters for Rise courses#

Most Rise courses rely on the built-in sidebar or continue button structure for movement. Most of the time, that works great. But there are times when a course benefits from a more open, web-like entry point, like a resource hub or home page with multiple paths. In these cases, a navigation row can give learners a sense of control over where they go next, linking to helpful resources or specific lessons.

Creating the split-screen hero#

The hero section is the most eye-catching part of the build: text on the left, motion on the right, strong background color, and large brand-inspired type.

The original site uses video. The challenge is that Rise’s Image and Text block accepts images, not video files. To work around this, we used a GIF instead. Here’s how:

1. Save the video from the source site, if you have permission to use it.
2. Convert the video to a GIF using a video-to-GIF converter.
3. Add an Image and Text block in Rise.
4. Upload the GIF in the image area.
5. Set the block to Full Width.
6. Adjust the column ratio until the layout feels close to the website reference.
7. Use the block settings to adjust spacing, including padding between columns and padding on the left and right.
8. Set the text alignment so the copy sits cleanly in the left panel.
9. Change the block background to the custom color used in the website-inspired design.

Ta-da! Now you’ve got a split-screen motion effect in a block that does not normally support video.

A quick accessibility note on GIFs#

The website version includes video controls, including pause and play. That is better for accessibility because learners can control the motion.

In the Rise version, the converted GIF autoplays and loops. In the demo, the GIF has no sound, which helps make it less intrusive. Still, use this workaround thoughtfully.

If the motion is decorative, keep it subtle. If it communicates important information, provide the same information in text. And if you are working under strict accessibility requirements, consider whether a native video block with controls is the better choice, even if it means giving up the exact split-screen layout.

Styling the hero text with Mighty#

The OLIPOP-inspired hero depends heavily on typography. The demo uses Mighty’s rich text editing controls to create a more branded text treatment inside the Rise block.

1. Select the hero text in the Image and Text block.
2. Use Mighty’s RTE controls to apply your desired font. (In the demo, we used Windsor Bold for the larger headline-style text.)
3. Adjust the font size, weight, and color. (Tip: Use the color picker to stay consistent across brand colors).
4. Add the supporting line of text beneath it, if needed. (We brought back the Teacher font for that secondary text).

A mix of typefaces creates hierarchy quickly: one font for the big brand moment, another for the supporting copy.

Native Rise typography controls are simple, but Mighty gives you more creative freedom, making those text moments feel strategically and thoughtfully designed.

What about the “Shop now” button?#

The original website includes a “Shop Now” button within the hero section. But in Rise, it’s not possible to add an Interactive Button within the Image and Text block (which is what we used to create our hero section). There are always workarounds, but in this case, it just didn’t look great.

Sometimes the best solution is not adding one more element. If the button feels floaty or misaligned, you can either redesign the section around it or leave it out.

Using Figma for the brand-inspired visuals#

Mighty and Rise handle the course build, but Figma helps with the assets that need to feel more custom: transparent logo strips, cropped visuals, and on-brand compositions.

For this kind of website-inspired Rise design, Figma is great for:

• Creating wide transparent images for header areas
• Matching approximate image dimensions before upload
• Pulling together color swatches
• Preparing simple branded graphics that Rise can display cleanly

You do not need a complex Figma file. Even a few artboards for headers, logos, and image exports can make the Rise build feel much more intentional.

The bigger design takeaway#

This OLIPOP-inspired build works because it treats Rise blocks as flexible ingredients, not fixed templates. A Paragraph block becomes a promo bar. A Labeled Graphic becomes a logo strip. Columns become navigation text. An Image and Text block becomes a split-screen hero with motion.

Mighty helps with the parts Rise does not expose natively, especially typography, spacing, alignment, and styling details. But the real trick is choosing the right block for the job and knowing when to adapt the website pattern for a learning experience.

Try this in your next Rise course: pick one website you love, recreate just the header and hero, and see what block combinations you discover. You may end up with a course opening that feels much more custom—without leaving Rise behind.

👉 Want to see more out-of-the-box builds other learning creators have made? Check out our Really Good Rise Courses space in Maestro Community (MC). It’s free!