How to add a ready-made scroll story
TeleportHQ has seven ready-made scroll stories, such as Product story and Trust story. Open Elements in the left sidebar, switch to the Sections tab, click the Stories category and click a story. A complete Scroll Scene with five chapters is added at the end of the page and selected. Move it into place, then replace the sample texts and pictures with your own.
Before you start
- Stories work in every project, websites included.
- You need a role that can edit components. See What can each role do?
- To start from an empty scene with three simple chapters instead, see How to create a scroll story with the Scroll Scene element.
Add a story
- In the TeleportHQ editor's left sidebar, click Elements (the first icon).
- Open the Sections tab. The categories are listed in alphabetical order.
- Click Stories. It sits between Steps and Team.
- Look through the stories. Each card has the story's name, one line on what visitors see, and the chapters it's made of. Point at a card to watch the whole story play beside the panel.
- Click a story, for example Product story.
TeleportHQ adds the story at the very end of the page, selects it and scrolls the canvas to it. The Scene Timeline opens under the canvas, titled with the story's name, with one row per chapter.
The seven stories
| Story | What visitors see | Chapters |
|---|---|---|
| Brand story | Who you are in five beats: a title, three promises, a picture with words, a quote, the ask. | Title card, Cascade, Split reveal, Quote, Finale |
| Cinematic story | A title, layers with real depth, a mood change that sticks, one big number, the ask. | Title card, Parallax depth, Theme shift, Big number, Finale |
| Gallery story | Pictures that reveal, compare and slide past. | Mask reveal, Before / after, Sideways track, Snapshot, Finale |
| Horizontal story | Chapters glide in from the right and leave to the left, as the visitor scrolls down. | Title card, Split reveal, Big number, Quote, Finale |
| Process story | How it works, one numbered step per scroll, then the next move. | Title card, Step marker (three times), Finale |
| Product story | A title, the product in focus, one number that proves it, a customer, a call to action. | Title card, Product spotlight, Big number, Testimonial, Finale |
| Trust story | The claim, three numbers counting up, a logo wall, a customer, the ask. | Title card, Three numbers, Logo wall, Testimonial, Finale |
Each chapter is one of the chapter templates you can also add one by one. See How to add, reorder and time chapters in a Scroll Scene.
Move the story into place
A story always lands at the end of the page, after everything else, including your footer. To move it:
- In the left sidebar, click the layers icon (tooltip Pages, Components & Tree View).
- In the layers tree, find the story's row. It's named after the story, for example Product story, and sits at the bottom of the page's rows.
- Drag the row up, and drop it above the block it should come before.
See How to use the layers tree to find and select elements and How to move and rearrange elements by dragging.
Make the story yours
A story arrives with sample texts and placeholder pictures. Everything in it is ordinary, editable content.
- Texts: double-click a text on the canvas and type. To reach a later chapter, drag the Editing position slider in the right panel's Scroll Scene section, or click the chapter's row in the Scene Timeline.
- Pictures: select a placeholder picture and replace it with your own. See How to add and replace images.
- Background: a story plays over a dark gradient, because its chapters use white text. You can swap it for a colour or a video. See How to set a Scroll Scene's length, background and pinning.
- Chapters: add, remove or reorder them. See How to add, reorder and time chapters in a Scroll Scene.
Check that it worked
- In the layers tree, the story has its own row, named for example Product story, with one row per chapter inside it.
- The Scene Timeline reads Scene Timeline Product story and lists five chapters.
- In Preview, the story stays on screen while you scroll, and its chapters take turns. See How to preview your site before publishing.
Troubleshooting
"Your current role does not have permission to edit components" Your role can't add sections. Ask a workspace admin for a role that can edit components.
"Could not add the Product story. Please try again." The story couldn't be prepared. Click the story card again.
The story appeared below my footer That's where every story is added. Drag its row in the layers tree to the right place, as described above.
I clicked a story after Replace Section, and nothing was replaced Stories don't replace blocks. The story was added at the end of the page. Click Undo above the canvas if you don't want it.
The texts are hard to read after I changed the background The chapters use white text. Pick a dark background colour, or change the text colours.
Good to know
- One Undo removes the whole story, with all its chapters.
- No AI and no AI tokens. Stories are added as they are, so the Use AI to generate content switch doesn't show in the Stories category.
- The AI Assistant can add a story for you, for example: "Add a Trust story to the homepage". See How to edit your website by chatting with the AI Assistant.
- Reduced motion: stories use Keep the story: visitors who turn on "reduce motion" still see the chapters change, without anything sliding or zooming. See What do visitors who turn on reduced motion see?
- Other ready-made sections (heroes, pricing tables, FAQs) are in the other categories of the same tab. See How to add ready-made sections.