The Pageflow Editor is divided into two main areas:
Left side: Live preview – Here you see in real-time how your story will look. You can select elements by clicking on them to edit them in the sidebar.
Right side: Sidebar – Here you find the outline of your story and can make all settings for the currently selected element, section, or chapter.
Structure of a story
A story is structured hierarchically:
-
Chapters – Chapters primarily serve to orient your readers and are displayed in the navigation bar at the top of the story.
-
Sections – Each section has a uniform background (image, video, or color) and can contain any number of content elements.
-
Content elements – These are the individual building blocks of your story (e.g., text, images, videos) that are placed on the background of a section.
In the outline, you can add new chapters and sections to your story using the "New chapter" and "New section" buttons.
Adding elements
To add new elements to your story, use the plus buttons in the live preview:
-
When you select an element, plus buttons appear above and below the element.
-
When you click on the background (to select a section), a plus button also appears, allowing you to add an element to that section.
Clicking a plus button opens a dialog where you can select which type of element you want to insert, such as text, images, videos, or other content types.
Section settings
To select a section, simply click in an empty area of the background in the preview. Alternatively, you can double-click on a section's thumbnail in the outline.
Each section in your story has a uniform background. You can choose from different options:
- Image – A static background image
- Video – A background video that plays automatically
- Color – A simple background color
In addition to the background, you can configure further layout settings, such as the text position or the text background used to optimize text readability over images.
Selecting files for elements
For many elements – such as images or videos – you can click the "Edit" button to access the file list. There you select a previously uploaded file that you want to use for the element or as a background.
To learn how to upload files, see the article How can I upload media files?
Transition effects between sections
You can define how the backgrounds of two adjacent sections transition into each other. When you select a section, you will find the "Edit transition effect" button. Here you have access to various effects that determine how the transition behaves when scrolling.
The currently set transition effects are also visible in the outline between sections and can be edited directly there.
Mobile preview
With the toggle button in the preview, you can switch between desktop and mobile view. This allows you to see directly how your story will look on smartphones and optimize the display for mobile devices.
Tips and tricks for mobile optimization can be found in the article "How to keep motifs visible on smartphones" and in our Best Practice articles.