Using the Shape Dividers feature, you can add attractive and unique separators to your web pages. There are 24 default shapes to pick from, or you can create your own by uploading an SVG code. No matter which shape you choose, you can fully customize the look of your divider by flipping, inverting, resizing, and coloring it. There’s also a lot of choice when it comes to placement, since Shape Dividers can be added above or below any row on your page.
This feature helps you create dynamic transitions that break up your content in a visually stunning way.
The Shape Dividers options are located inside the Row and Inner Row sections, in the tab labeled Dividers. Here you find 12 useful settings, which can be mixed and matched to create awesome dividers, screenshot:
- Shape Divider: select Default to use a pre-made shape, or choose Custom to upload your own Shape Divider using an SVG code.
- Shape Type: pick from one of 24 default shapes Curve, Curve Opacity, Curve Asymmetrical, Curve Asymmetrical Opacity, Book, Spear, Arrow, Mountains, Clouds, City, Triangle, Pyramids, Tilt, Tilt Opacity, Ray Opacity, Fan Opacity, Swoosh, Swoosh Opacity, Waves, Waves Opacity, Hills, Hills Opacity, Flow, and Flow Opacity, screenshot.
- Shape SVG: select a custom SVG code. Unless modified by the color option, your custom SVG will retain the original color. When using a custom SVG, it is important that the SVG is inserted as SVG code and not as SVG file. You can do this using the Add Multimedia option by simply entering the SVG code. This way, the custom SVG will be easy to assign and modify in various parts of your site. Plus, you’ll be able to apply your own custom color: , screenshot 1, screenshot 2, screenshot 3.
To create a SVG code for the web you can follow one of the many online tutorials (example) and use a software like Adobe Illustrator. This is an example of SVG that can be easily created. Note that the "fill"property is used to use automatically the Uncode colors:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px" height="24px" viewBox="0 0 240 24" enable-background="new 0 0 240 24" xml:space="preserve" preserveAspectRatio="none"> <path fill="#464D54" d="M119.849,0C47.861,0,0,24,0,24h240C240,24,191.855,0.021,119.849,0z"/> </svg>
- Shape Inverted: choose this option to use the inverted shape.
- Shape Flip: this option will flip the Shape Divider horizontally.
- Shape Height: set a custom height, in pixels or percentage, for your Shape Divider. When a height is specified in pixels, Shape Dividers use breakpoints to scale harmoniously in response to smaller devices or viewports. A display size above 1500 pixels will use the original height value, a display size from 1499px to 1180px scales to 80%, from 1179px to 960px scales to 65%, from 959px to 570px scales to 50%, and under 569px scales to 25% of the first breakpoint shape divider's height.
- Shape Color: choose a solid color for the Shape Divider. Default color is white. Please note that it’s not possible to use a gradient, unless you upload your own SVG that already includes one.
- Shape Opacity: set a custom opacity for the Shape Divider.
- Shape Ratio: this setting preserves the shape aspect ratio: your shape will be enlarged outside the canvas to preserve its original ratio between width and height. This option is useful if your divider must maintain a precise shape, as with the Clouds or City default shapes.
- Shape Safe: select this option to enable a safe padding area. This option sets a the position relative to the content to avoid any overlap.
- Shape Z-Index: set to position the Shape Divider above or below your content. Z-Index controls are also available on Uncode on Rows, Inner Rows, and Columns. When Z-Index options are combined, you can create beautiful effects based on the overlap and intersections between multiple levels.
- Shape Hidden on Mobile: picking this option enable the Shape Divider visibility options for small devices and tablets.
Create a Shape Divider
To create a row with Shape Dividers follow these steps:
- Open the Row Settings, go to the Dividers tab, and enable the Shape Divider.
- Choose whether to use the Shape Divider on the top of the row, the bottom, or both. For this example, we’ll go with a bottom Shape Divider.
- Select a shape.
- Optionally, pick a color and configure other design options such as the height, etc.
- Save the changes.
- Header Slider: you can add a Shape Divider to a Content Header Slider. To do this for the whole slider, you can apply the divider to the main Row container, screenshot. For individual slides, you can apply the divider to the Inner Rows screenshot.
- Shape divider not full width: The default Shape Dividers are fluid, this means that they lengthen to cover the monitor's width. Using the Shape Ratio option you can lock the ratio. If your SVG is not able to cover the available width is because you inserted a small height with the Shape Ratio option, use a greater height, screenshot.
- Design Tip: we suggest matching the color of the Shape Divider background to the color above or below the section. This creates a smooth continuation of color, resulting in an attractive effect.