Shape dividers are SVG based shapes that can be used to separate the sections of a page. Shape divider are available in layers, layout grids and the flex box container. The dividers can be added at the top or bottom (or both) of a layer.
There are more than 30 shapes you can choose from, but you can also add custom shape SVG files.
Shape dividers can be added at the top or bottom (or both) of a layer, layout grid or flexbox container.
The properties of each side can be configured indivually.
The color specifies the color of the shape.
The width specifies the width in percentages, this can be useful if you only want to display a smaller part of the shape, for example 200%, clips the left and right part of the shape.
Adding custom shapes
Shapes dividers are SVG files and are stored in the sub folder 'dividers' of the application folder.
The code of a typical SVG shape looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path class="divider-fill" d="M500,50 C350,48 250,250 0,250 V0.3 h500 z"></path>
Note that the path has a class named divider-fill, this is used by the application for styling the shape and should be included in all paths or shapes.
For inspiration how to create your own shapes, please take a look at the code of the standard shapes .
The height is in pixels.
Shapes can be flipped horizontally/vertically. This makes it possible to use shapes that were designed to be used at the top, also at the bottom by flipping it vertically.
The arrangement property controls whether the shape will be displayed underneath the content or on top of content.