A Short Introduction into Multimedia Storytelling with Pageflow
A story is composed of chapters and sections. Each section can use an image, a video, or a solid color as its backdrop. Overlaying content such as text, image, audio, video, etc. is inserted into sections as content element.
Every new section contains a text block
A click on the lower or upper plus button opens the content element list. Here you can simply add one of..
CONTENT ELEMENTS
One of these elements is the audio notice, that can be applied to let users unmute all autoplay elements, such as background audiowithin this story:
Sound can be muted again using the speaker icon in the navigation.
1. HEADING
The heading element let's you add visually impactful headlines, taglines and subtitles, determine their alignment (left, centered, right), size, color, and position to layout your site’s digital front door. You can use as many headlines as you want. Only the first one will be your "H1" in terms of SEO. If wanted: Choose a fade in entrance animation.
Scroll down
2. TEXT BLOCK
Each section contains a text block, that allows you to edit and style text, and also use ✨ emojis. You can apply different font variants and colors per block. Adjust your theme to provide a consistent look and match your CI.
Forests are complex ecological systems in which trees are the dominant life-form. They cover about one-third of Earth’s surface and provide many benefits for humans and other living beings.
Forests produce oxygen, store carbon, regulate climate, purify water, prevent soil erosion, and support biodiversity. They also have cultural and spiritual values for many people around the world. They offer opportunities for recreation, education, and exploration. They inspire awe, wonder, and creativity.
3. QUESTION/ANSWER
Spice up your narrative with the Question/Answer element. Present additional information, such as interviews, deeper excursions or educational content with a touch of gamfication. And if wanted: paste emojis.
Forest bathing is a practice of spending time in a forest to boost one’s immune system and well-being.
Studies show that forest bathing can reduce stress, lower blood pressure, improve mood, and enhance cognitive function. This is because trees and plants release essential oils that have beneficial effects on human health.
4. QUOTE
Emphasize a statement, or add another perspective, a quote from an expert, a witness opinion. Style your quotation marks in the theme settings and choose a position, color, and font variant directly in the editor.
The clearest way into the Universe is through a forest wilderness
John Muir
5. INFO TABLE
The info table presents terms and corresponding explanations in two columns – for example, ingredients & quantities, roles & names, or titles & sources. Column widths adjust automatically but can also be customized. Ideal for compact factual content with improved readability.
These simple guidelines help your visitors move safely and mindfully through the forest. Use them to set expectations, protect wildlife and nature, and make sure everyone enjoys their time outdoors.
| |
1 | Stay on the paths – protect plants and animal homes by avoiding off-trail shortcuts. |
2 | Keep it quiet – speak softly and enjoy the natural sounds of the forest. |
3 | Leave no trace – take all your rubbish back with you, including tissues and bottle caps. |
4 | Respect wildlife – watch animals from a distance and never try to feed or touch them. |
5 | Share the space – be considerate of hikers, bikers and riders using the same trails. |
6 | Fire is a guest – only light fires where it’s clearly allowed and always put them out completely. |
7 | Stay safe and informed – follow local signs, check the weather forecast, and keep a charged phone with you. |
6. INLINE IMAGE
Unlike backdrops, inline images are applied to draw the reader's attention to specific elements of your story. Upload any ratio and format, even .svg files, with transparency. Choose a size and position, add captions, and, optionally, enable styles, such as circle, rounded corners, and full-screen mode to provide details when an image deserves it.
7. INLINE VIDEO
The inline video player lets you display videos in a variety of sizes and positions, with autoplay, looping or manual launch. You can control whether a click on the video should unmute the clip, and even cause it to rewind. Add text tracks and alt text and make your video accessible to everyone.
8. INLINE AUDIO
The audio player let's you showcase your sound files. Present a thought, a statement or even a podcast. Optionally, add a poster image and choose from classic player control or waveform style to present your audio content in an engaging way.
9. VIDEO EMBED
Want to show longer or external video footage? Just embed it from Vimeo or YouTube by pasting the URL. Define the size and position of your video player in relation to the backdrop settings and other content elements.
10. AUDIO NOTICE
The audio notice is an element that informs users about an audio file, available for listening. The necessary user interaction allows us to autoplay audio and video, including audio, across all browsers and devices.
Sound can be muted again using the speaker icon in the navigation.
11. SOCIAL MEDIA POST
Embed Instagram, TikTok, Blue Sky or X posts directly into your story. Fully integrated with Pageflow's user consent feature for GDPR compliance. Use this element to showcase trending content, add dynamic visuals, or share authentic voices related to your topic.
12. IMAGE GALLERY
The gallery offers a dynamic and engaging way to showcase images seamlessly with a swipeable slideshow. Versatile for exploring facets of your subject. Try to use images with the same aspect ratio to get the best results.
13. DATAWRAPER CHART
Embed interactive charts, maps and tables, created with Datawrapper. Present data and statistics in an interactive way. Hover the icons in the following example and find out more about the spots in this map:
14. COUNTER
Pageflow's animated counter shows a number that increases or decreases over time. Highlight a magnitude, duration, or change of something, or create a sense of urgency. Customize the appearance and entrance effect.
is the height of the tallest tree in the world, a coast redwood from California.
15. BEFORE/AFTER SLIDER
Pageflow’s before/after feature shows two images side by side with a slider that allows you to compare them. Illustrate the difference between two situations related to your story, or visualize change over time.
Deforestation in Bolivia Credits: NASA Earth Observatory
16. HOTSPOTS
With our "Hotspots" element, you can turn your images and graphics into engaging experiences. This feature lets you create interactive areas that display extra information when hovered over, clicked, or tapped.
17. 360° IMAGE
Add 360° images to transform your storytelling websites into immersive experiences. Simply upload mono- and stereoscopic images to create captivating visual stories. Seamless integration, optimal results.
18. IFRAME EMBED
Pageflow’s iframe embed let's you show content from another website within your story. Integrate interactive content related to your topic, or enhance your story with external features, such as the quiz below 👇
The quiz "See How Much You Know About Deforestation" was made by the Council on Foreign Relations and has been published on February 5, 2019.
Credits: Council on Foreign Relations Licensed under CC BY-NC-ND 4.0
19. TEASER LIST
Teasers let you display links to external websites, excursions, or sections within your story. Use them to guide your audience, provide additional context, or create a visual overview with image tiles—linked or unlinked.
20. CALL TO ACTION BUTTON
Call to action buttons highlight a single, clear next step in your story. Use them to drive sign-ups, downloads, or visits to external pages, chapters, or forms—where you want your audience to act, not just read.
Try out Pageflow now and learn how to craft captivative web content with ease.
Unlimited in time!