Skip to content

Title Section


As soon as you create a new Story, by default, only a Title Section (the cover) is present in the workspace. In this section the story editor can customize two different elements: the title text and the cover's background.

Content

By default, the title section has the following placeholder with an empty background behind it:

With a click inside the text area, it expands and the Text Editor Toolbar appears allowing the story editor to type and/or edit the title text:

Once the text has been written, it is possible to configure the text area position and its style from the component's toolbar:

The text window toolbar allows the user to change the following settings:

  • The Change size button allows to change the size of the text window in Small, Medium, Large or Full.

  • The Align content button allows to align the text window, inside the Container, on the Left, Center or Right.

  • The Change field theme button allows to change the text window theme in Default (same default theme settings of the story, see Story Settings), Bright, Dark or Custom (allows to customize background and text colors and enable or disable the shadow)

  • The Remove button allows delete the title section.

Note

When a section has only one content, and the story editor remove that content, the entire section will be also automatically deleted.

Setting a title with Large size, aligned on the Center of the Container and with a Bright theme, the result is something like:

Background

For a Title sections it is possible to customize the background through the background editing toolbar:

In case of an empty background, the background editing toolbar allows to:

  • Add a media content as a background, with the Change media source button that opens the Media Editor

  • Change the height of the section through the Fit/adapt content button

It is possible to add three types of media contents as a background: images, videos or maps.

Images

Once an image is added for the background, the result is something like this:

In this case the background editing toolbar allows to customize the image background through the following settings:

  • Change media source allows to select the media content to use for the section, clicking on this button the Media Editor opens

  • Change the content height through the Fit/adapt content button

  • Change the relation image/container, choosing between making the background cover the whole container or making the whole background visible inside the container

  • Change size between Small, Medium, Large or Full

  • Align content on the Left, Center or Right

  • Change the background theme to set the colour of the empty background between Default (same default theme settings of the story, see Story Settings), Bright, Dark or Custom (allows to customize the color of the background).

Warning

The Align content and the Change field theme buttons are disabled if the image size is full screen

Videos

Once a video is added for the background, the result is something like this:

The background toolbar, in this case, changes a little bit by including an additional button:

  • The Audio, enabled by default, through which you can enable or mute the video.

By clicking on the Make the whole background visible inside the container button other two buttons appear to perform the following operations:

  • Enable Autoplay to play the video automatically once the user is on it

  • Enable Loop to continuously repeat the video

Note

The video play will be available only in View Mode of the story: it is not available in edit mode except in the media editor as a preview.

Maps

In this case, adding a map as background, the result will be like this:

The background toolbar, in this case, changes a little bit by including an additional button: