This website uses features that your browser doesn't support. Please upgrade to a recent version of your browser.

Explore the magic of "Content Elements".

They are the building blocks of your interactive web stories.

We hope you'll enjoy this demo story, showcasing all of the 20 available elements in action.

Credits:

Green coloured mossy forest fairy tale
AdobeStock 363987742

Autumn in the forest
AdobeStock 252864165

Deer on a summer forest trail
AdobeStock 286842222

Wildlife in the deep evergreen
AdobeStock 386972844

Beautiful morning in the forest
AdobeStock 364497353

Aerial view Fog clouds
AdobeStock 202200382

Valley covered with forest at dawn
AdobeStock 369010207

Slow motion video of a wolf
AdobeStock 440268451


Fog in the mountains
AdobeStock 416594609

Forest under the sky with clouds
AdobeStock 478034423


Media
  • Josh Withers | Pexels

Adding Content with A Click

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..



0

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.











The Magic of Our Forests

Uncover Hidden Wonders

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

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.













What is forest bathing? 🌳 🌲 🛀

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.











7 Golden Rules for Respectful Forest Visits

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.











0:00/0:00









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.











0:00/0:00









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:











I agree with being shown Datawrapper graphs.







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.













0.00 m

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.









Big Impacts in a Tiny World: Discover the Secrets of Miniature Mining!







Discover more about the endless possibilites of the Hotspots element in this blog post





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 👇











I agree with being shown Typeform forms.





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