Porto provides powerful Shape Divider options that allow you to add decorative top and bottom shapes to any Section (WPBakery) or Section/Container (Elementor). Shape Dividers help create smooth transitions between sections and give your site a more dynamic visual style.
You can use Porto’s built-in divider shapes or apply your own custom SVG file.
Each section supports two dividers: Top Shape Divider and Bottom Shape Divider
Where Shape Dividers Are Available
WPBakery Page Builder - Shape Divider settings are found in Section Element.
Elementor - Shape Divider settings are available in Section and Container(for Flexbox Container)
Shape Divider Options
| Option | Description |
|---|---|
| Divider Type | Select from Porto’s built-in shape dividers. Choose Custom if you want to use your own SVG. |
| Custom Shape Divider | Paste custom SVG code or upload an SVG (Elementor only). Used when Divider Type = Custom. |
| Divider Color | Sets the fill color of the shape divider. |
| Height | Adjusts the divider’s vertical size (height). |
| Flip | Flips the divider along the Y-axis (vertical flip). |
| Invert | Flips the divider along the X-axis (horizontal inversion). |
| Extra Class Name | Adds a custom CSS class for advanced styling (enter without dots, e.g.,
my-divider
). |
Here is our shape dividers illustration page.
