Introducing Shape Dividers
Easily add dynamic shapes and effects to your page using our new Shape Divider options for sections!
Today we are excited to introduce Shape Dividers to Divi, a brand new option that gives you the ability to add custom shapes and effects to your pages, creating dynamic transitions between blocks of content and adding that extra bit of personal flare to your website.
Shape Dividers can be placed above and below each section on your website, allowing you to easily build stunning transition effects between different parts of your page. You can choose between 26 different shapes, each of which can be can be flipped, resized, repeated, combined and customized to create a vast array of designs.
Check Out The New Shape Dividers In Action
Adding Shape Dividers Is Easy!
A huge range of shapes and effects can be created with ease using the intuitive new shape divider interface.
The Intuitive Shape Divider Interface
Adding custom shape dividers to your page is easier than ever thanks to Divi’s new shape divider interface. In the Visual Builder, you can add new shapes and customize their size, rotation, arrangement and color and watch them transform right before your eyes!
26 Unique Shapes
You can choose between 26 unique shapes. These shapes are built using SVG’s, which means they will scale without losing quality, they will look perfect on retina devices and they are super lightweight and won’t hurt your website’s loading speeds.
Rotate, Resize, Repeat & Customize
Each shape can be fully customized. You can resize the shapes to any height using both pixel and percentage units. Shapes can also be repeated to create unique patterns. Each shape takes on entirely different identity when repeat multiple times.
Place Above & Below Any Section
Shapes can be placed both above and below each section on your page. When used in combination, you can achieve some pretty amazing results.
Place Underneath Or On Top Of Content
Shapes can be placed on top of your section content or underneath your section content. This allows you to create unique effects by layering text and imagery in creative ways.
Automatic Color Inheritance
Divi’s Shape Dividers are super easy to use thanks to automatic color inheritance. When a new divider shape is added, it will automatically take on the color of your current section and the adjacent section, creating a seamless transition between the two without requiring you to customize the colors. When you move the section or adjust your section’s background colors, the divider color will update automatically.
10 Stunning Examples Of Shape Dividers In Action
If you are looking for some inspiration, take a look at some of the awesome designs our team was able to create using these new options.
Example One
Example Two
Example Three
Example Four
Example Five
Example Six
Example Seven
Example Eight
Example Nine
Example Ten
Example Eleven
Example Twelve
