Shape Dividers

Shape Dividers are a special type of element that allow you to insert inline SVG shapes along the top and bottom edges of Sections.

Inserting A Shape Divider

Shape Dividers can be inserted by selecting a Section, and clicking Add Shape Divider at the bottom of the Primary tab of the Properties Pane.

Manipulating Shape Dividers

Shape Dividers are inserted as individual elements, but cannot be selected for editing in the builder preview like other elements. This is because of the special CSS required to position them in the proper locations within their parent Section. Instead, to edit a Shape Divider, you must navigate to the Section in the Structure Pane and select the Shape Divider as you would any other element. The Properties Pane will then be populated with the styling options available for Shape Dividers.

• Divider Shape - Choose from 33 built-in SVG shapes.
• Custom Shape - Paste in an SVG from an external source, see Using Custom SVG Shapes below.
• Color - Set the color of the Shape Divider.
• Position - Set the Shape Divider to be along the top or bottom edge of the Section.
• Flip Horizontally - Flip the entire Shape Divider horizontally.
• Height - Set the height of the Shape Divider.
• Width - Set the width of the Shape Divider. Cannot be less than 100%.
• Center Horizontally - Normally the Shape Divider starts at the left edge of the viewport and stretches to the right. You can change the way your Shape Divider looks by setting it to a large width, like 200%, and then centering it horizontally to maintain symmetry.
• Z-Index - Set the z-index of the Shape Divider. Used when layering other elements on top of or behind Shape Dividers.

Because of the way Oxygen's Shape Dividers are engineered, you can insert an unlimited number of Shape Dividers and layer them in interesting ways by manipulating the dimensions, opacity, color, and z-index for each one.

Using Custom SVG Shapes

The Custom Shape field allows you to paste in SVGs from other sources. There are a few requirements in order for external SVGs to work as expected as an Oxygen Shape Divider:

1. The <svg> element must have preserveAspectRatio="none" as an attribute.
2. Any fill attributes in the code must have the value of "currentColor" - this allows them to inherit the color set for the Shape Divider in the Properties Pane.

This is an example of an external SVG that will work perfectly as an Oxygen Shape Divider: