Create a Landing Page Style Demo

Overview

A landing page style demo helps you turn a single Walnut demo into a polished, clickable starting experience where viewers can choose the path that matters most to them.

Instead of guiding every viewer through the same fixed sequence, this approach uses a branded opening screen as a navigation hub. From there, each tile or button routes viewers into a different guided story, making it easier to support multiple use cases, personas, workflows, product areas, or narratives within one experience.

In Walnut, this is built by setting your landing page as the first screen in the demo, then creating a separate guide chapter for each narrative path you want viewers to follow. On that first screen, you use screen links to connect each tile or button to the screen where the first guide step in that chapter lives.

The landing page itself can be created in different ways depending on your workflow. Some teams build it as a custom HTML page designed by their in-house team and then capture it with the Walnut Extension. Others design the page externally, export it as a PNG, and import it into Walnut using the Screens Library.

In This Guide:

• Quick Start
• Designing the Landing Page Screen
• How It Works
• Core Building Blocks
• Recommended Build Workflow
• Important Navigation Limitation
• When to Use This Demo Structure
• Best Practices
• Troubleshooting Tips
• Summary

Quick Start

To create a landing page style demo:

1. Set your landing page as the first screen in the demo
2. Confirm it is marked by the yellow flag, which indicates the demo starting screen
3. Create a separate guide chapter for each narrative path
4. Place the first guide step of each chapter on the screen where that story should begin
5. Return to the landing page screen
6. Use screen links on each tile or button to connect to the correct destination screen
7. Test each path to confirm the viewer lands in the right section of the story

Designing the Landing Page Screen

The landing page can be created using the method that best fits your team’s process and design resources.

Option 1: Build a custom HTML landing page

If your in-house team wants more design flexibility, they can create the landing page as a custom HTML experience and capture it with the Walnut Extension.

This is a strong option when you want richer visual styling, more customized layouts, or a landing screen that closely matches your brand or campaign experience.

Option 2: Design externally and import as a PNG

Another option is to design the landing page outside Walnut, export it as a PNG, and import it using the Screens Library.

This works well when the landing page is primarily visual and does not require live HTML behavior before capture. Once imported, you can place screen links over the relevant tiles or buttons to make the image interactive.

How It Works

A landing page style demo works by combining two separate navigation behaviors inside the same experience: screen links and guided paths.

The Navigation Flow

On the landing page screen, viewers use screen links to choose where they want to go. These links are only available when a guided path is not currently active, or after it has been dismissed.

Each tile, card, or button should link to the screen where the selected story begins. If that destination screen contains the first annotation in a guide chapter, the guided path starts automatically when the viewer arrives.

In practice, this means the landing page acts as a clickable menu, and each selection routes the viewer into a different guided story.

How to Structure It Cleanly

To make this work well, each narrative path should have its own guide chapter, and the first guide step for that chapter should be placed on the first screen of that path.

This ensures that when a viewer clicks a tile on the landing page, they land on the correct screen and the right guided experience begins immediately.

Why You Cannot Return Directly to the Landing Page

Once a viewer selects a path and the guided flow begins, it is not possible to return directly to the original landing page within that same guided flow.

This happens because screen links and guided paths are separate navigation systems. Screen links move the viewer from the landing page to a destination screen. Once the viewer lands on a screen with an active annotation, the guided path takes over.

Because of that handoff, the experience does not include a native way to jump back to the beginning landing screen as part of the same guided path.

Core Building Blocks

• First screen: Your landing page or menu screen, marked by the yellow flag
• Guide chapters: One chapter per story, use case, workflow, or audience path
• First guide step: The first annotation that starts each guided path
• Screen links: Clickable navigation on the landing page that routes viewers to the correct starting screen for each story

Recommended Build Workflow

1. Create or identify your landing page screen

Start by choosing the screen that will act as the main entry point for the demo. This is typically a branded overview screen with clickable tiles, buttons, cards, or use case selectors.

Move this screen to the start of the demo so it becomes the opening screen. You can do this either by dragging the screen into the first position in the Screens sidebar or by clicking the three-dot menu on the screen and selecting Set as Start Screen. In Walnut, the starting screen is indicated by the yellow flag.

2. Define your narrative paths

Next, decide what each branch of the experience should represent. For example, each path might map to:

• A different persona
• A different product area
• A different use case
• A different stage of the buyer journey
• A different industry or customer story

Each of these should become its own guide chapter so the guided flow stays organized and easy to manage.

3. Create a guide chapter for each path

In the Guides panel, create a separate chapter for every path you want viewers to enter from the landing page.

This keeps the narrative structure clean and makes it easier to update, test, and report on different stories later.

4. Place the first guide step on the correct screen for each chapter

For each chapter, identify the screen where that narrative should begin. Then place the first guide step of that chapter on that screen.

This is important because the landing page should link viewers directly to the first screen of each chapter, not just to an approximate section of the demo.

5. Add screen links from each landing page tile or button

Return to the landing page screen and add screen links to each interactive tile, button, or click area.

Each link should point to the screen where the first guide step of the matching chapter lives.

For example:

• Tile A links to the first screen of Chapter A
• Tile B links to the first screen of Chapter B
• Tile C links to the first screen of Chapter C

6. Test every path from the viewer perspective

Once links are in place, test the full experience by clicking each landing page option and confirming:

• The viewer lands on the correct screen
• The correct guide chapter begins as expected
• The path feels natural and complete from start to finish

Important Navigation Limitation

One limitation of this demo style is that once a viewer selects a path, it is not possible to return directly to the original landing page within that same guided flow.

This behavior exists because screen links and guided paths are separate navigation systems. The landing page uses screen links to move the viewer to a destination screen, while the guide chapter controls the narrative once that path begins. Because these two navigation layers operate separately, the guided experience does not include a native way to jump back to the beginning landing screen as part of the same story flow.

Workaround 1: Link back to the demo URL

One way to support a return-to-menu experience is to add an annotation button at the end of each guided path that links back to the demo URL.

When clicked, the demo reopens on the landing page in a new tab, allowing the viewer to choose another path.

This is often the cleanest option when you want viewers to re-enter the full landing experience after completing a story.

Workaround 2: Link to other guides or chapters at the end of each path

Another approach is to add buttons at the end of each guided path that direct viewers into other available guides or chapters.

This does not return them to the original landing page, but it can still create a strong multi-path exploration experience by giving viewers clear next-step options once one story is complete.

When to Use This Demo Structure

A landing page style demo works especially well when you want one demo to support multiple stories without creating separate assets for every audience.

Common use cases include:

• Role-based demos where sales, marketing, admin, or end-user journeys differ
• Use case branching where buyers choose the workflow most relevant to them
• Multi-product overviews where each tile opens a different solution area
• Campaign demos where a single launch experience routes to different value stories
• Executive summaries where the opening screen acts as a polished content hub

Best Practices

Keep the landing page simple and directional

The goal of the first screen is to help viewers choose confidently. Keep the content clean, visually distinct, and easy to scan.

Match tile labels to the story behind them

The label on each tile or button should clearly reflect the narrative path it opens. Avoid vague language that forces viewers to guess where they will land.

Use one chapter per path

Separate chapters make your guide logic easier to manage and create a more intentional storytelling structure.

Link to the true start of the story

Do not just link to a nearby screen. Link to the screen where the first guide step for that chapter is placed. This keeps navigation and storytelling aligned.

Plan the end of each path intentionally

Because viewers cannot return directly to the landing page inside the same guided flow, it is worth designing a clear next step at the end of every chapter, whether that is reopening the demo landing page in a new tab or directing them into another chapter.

Test every branch end to end

A landing page style demo only works well if each path feels complete. Always test from the first click through the full narrative.

Troubleshooting Tips

If a tile opens the wrong part of the story

Check the screen link destination on the landing page and confirm it points to the correct screen.

If the guide does not start where expected

Confirm that the first guide step for that chapter is actually placed on the destination screen.

If the story feels disconnected after the click

Review whether the linked screen is the true narrative starting point or just a screen inside the flow. Moving the first guide step earlier often fixes this.

If viewers seem unsure what to click

Simplify the landing page labels, reduce visual clutter, and make each option more distinct.

If you need viewers to return to the landing page

Add an annotation button at the end of each guided path that links back to the demo URL. This will reopen the demo on the landing screen in a new tab.

Summary

To create a landing page style demo in Walnut, set your landing page as the first screen of the demo, marked by the yellow flag. Then create a separate guide chapter for each narrative path, place the first guide step of each chapter on the screen where that path begins, and use screen links on the landing page to connect each tile or button to the correct starting screen.

The landing page can be custom built in HTML and captured with the Walnut Extension, or designed externally and imported as a PNG through the Screens Library. Just keep in mind that once a viewer enters a path, they cannot return directly to the landing page inside that same guided flow. To support re-entry, you can link back to the demo URL in a new tab or guide viewers into other chapters at the end of each path.