The Storyteller creates a full-screen sequence of animated content with its own navigation, whereby each "page" can be customized individually.
Storyteller
The content in a Storyteller uses special formatters with element settings that have been customized specifically for this purpose.
The demo shows the many possibilities for compiling a storyteller from new and existing content.
To create a page with Storyteller, proceed as follows:
- Create a new page in the sitemap editor.
- Open the newly created page in the page editor.
- Remove ALL elements and groups from the newly created page, including the header and footer.
- If you have removed everything correctly, only a red “base container” will remain.
- Open the “Add Content” menu (magic wand). Open the “Advanced Elements” view and click on “Dynamic Functions.”
- Drag the “Storyteller” dynamic function into the red container on the empty page.
- The page will automatically reload and the Storyteller navigation elements will be displayed.
- The Storyteller is now set up and can be filled with content.
Please note that the Storyteller will only work as intended if all elements have been removed from the page beforehand, including the header and footer!
You can define the basic configuration of the Storyteller yourself using its element settings.
The Storyteller always displays a “burger menu” in the top right corner. In the page editor, the edit point for the element settings is displayed to the right below this menu.
Content elements can now be dragged and dropped into the Storyteller from the “magic wand menu.”
The display of individual content elements can be customized. The list of supported elements and a description of the element settings can be found under Available Formatters.
A special feature is the “red gear” icon displayed in the upper right corner of the Storyteller page editor. This allows you to switch to the “Story Editing Mode” view.
- In Story Editor mode, the elements of the Storyteller are displayed compactly as gray boxes and the content is reduced to the headline.
- This makes it much easier to change the arrangement of the elements in the story.
- When you add new elements to the Storyteller using drag & drop, the view automatically switches to Story Editor mode.
The Storyteller can also display media. The following media types are supported:
- YouTube videos
- External videos or videos from the MAM
- SoundCloud audio
- External audio or audio from the MAM
Media with flexible content is not supported in the Storyteller. This type of media cannot be inserted into the Storyteller.
The Storyteller can display Link Sequences. Entries are always displayed as a list, usually preceded by dots or other symbols.
The display of additional information such as icons is also supported, as described under Link Text Display.
Please note that you should not enter too many links, as space on mobile screens is limited.
For the mobile display of articles, teasers, and content sections in Storyteller, there are various options for arranging text and images using the “Storyteller Display” element setting.
Firstly, the text can always be displayed directly on the image in both the mobile and desktop views.
In the mobile view, the text can also be displayed either directly on the image or with a colored background above or below the (smaller) image. In the desktop view, the text is then displayed with a colored background either to the right or left of the image.
The Text Font Size element setting is available for displaying text. This allows you to reduce the font size for individual “pages” in Storyteller for mobile viewing or for all screen sizes, so that longer texts can also be displayed.
In the mobile display “Image above / Text below” (or vice versa), the vertical alignment of the texts is automatically optimized for the mobile display so that the texts are not cut off unfavorably. The text is docked below (or above) the image. The element setting Text alignment vertical is ignored in this case.
By default, the Storyteller displays the links to the “Imprint,” “Privacy Policy,” and “Legal Notice” pages specified in the cookie banner configuration in the navigation bar.
These links can also be hidden using the Storyteller's Navigation Imprint Links element setting.