To present stories with an appealing background, you can use the following layers
Image
Video
Color
Gradient
ShadingShade
Divider
...
By combining these layers you can design your story background. For example, it is possible to add a color or a gradient with transparency over a background image. This allows you to better highlight text on a bumpy background or colorize entire images. The color palette is predefined by the theme. Therefore, the story remains color-matched and will automatically adopt the new colors when the theme is changed.
...
In addition, you can also set a plain, single-color and transparent background as you wish to colorize images and videos. At this point, the theme colors are available for you to choose from. By using theme colors, you are always in the current color scheme. In addition, the story color scheme remains dynamic and automatically adapts to theme changes.
...
Gradient
...
Color: Determines the base color for the gradient.
Brightness: Determines the algorithm for the start and end color. Either lighter, darker, or with a custom gradient color.
Type: You can choose between two types: linear and radial.
Direction: Determines the direction of the gradient. You can also choose between a linear or radial gradient.
Start position: Controls where the color transition begins (in % )
End position: Controls where the color transition end (in % )
Repeat: Controls whether and how a gradient should be repeated. Repetition only takes effecr if the gradient size is less then 100%.
Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.
CSS Class: Allows inserting additional CSS classes for the element.
CSS Style: Allows inserting inline CSS for the element.
Below you can view several gradients
Image 1 linear gradient: Color: "Warning to Matched Hue".
Below you can view several gradients:
...
Shade
...
A shading is also a gradient. Start color is the selected color, end color is the full transparency of it. Shading
...
Divider
...
is primarily used to lighten or darken backgrounds, thereby making text more legible on bumpy backgrounds.
Below you can see a white shading from right to left to make the dark text more visible on the dark, bumpy background.
...
Similar to the gradients, the following options are available:
Color: Determines the shading color.
Type: You can choose between two types: linear and radial.
Direction: Determines in which direction the shading should run. In addition, you can decide between a linear or radial course.
Start Position: Controls where the gradient starts (in % ).
End Position: Controls where the gradient ends (in % ).
Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.
Flip: Mirrors the image horizontally or vertically or both in combination.
CSS Class: Allows inserting additional CSS classes for the element.
CSS Style: Allows inserting inline CSS for the element.
Below you can view several gradients
Image 1 linear gradient: Color: "Warning to Matched Hue".
Divider
...
Dividers are used to graphically separate or connect the bottom or top of the story to the following or preceding story.
Following options are available:
Style: Library of graphic separator shapes.
Fill Color: Fill color of the shape. For a smooth transition, select the background color of the neighbor section (Story)
Height: Height of divider as CSS size unit.
Min. Height: Minimum height of divider shape as CSS size unit.
Max. Height: Maximum height of divider shape as CSS size unit.
Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.
Flip: Mirrors the image horizontally or vertically or both in combination.
CSS Class: Allows inserting additional CSS classes for the element.
CSS Style: Allows inserting inline CSS for the element.