Divi Section Dividers (or Divi Shape Dividers) allows you to add creative shape transitions between different sections on your page.

Section Divider designs can be placed at the top and/or bottom of each section element in Divi.

This allows a unique way to separate your content with seamless background design transitions.

Divi Dividers are available in all sections:

Section dividers are unique to the Section element of Divi, so you can't add them to other elements like modules, columns, or rows.

You can use background masks and/or gradients to add unique background designs to those elements.

You can choose between 26 unique shapes, which can be flipped, resized, repeated, combined, and customized to create endless possibilities for design.

These shapes are built using SVG, meaning they will scale without losing quality, look perfect on retina devices, are super lightweight and won’t hurt your website’s loading speeds.

There are several options to help you create beautiful shape dividers for your Divi pages. Dividers can be set on the top and bottom of your sections.

Additionally, you can choose your divider style, color, and height.

There is also a horizontal repeat option that gives your dividers a completely different appearance and options for flipping them. Lastly, you can position your divider on or underneath the section content.

Shape Dividers can be placed at the top and bottom of the section. When used in combination, you can achieve amazing results.

There are 26 divider options to choose from. Angles, diagonals, and curved options offer a different style and feel.

Customizing the shape divider options is easy with Divi!

When a new shape divider is added to a section, that shape will automatically match 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.

In addition to the built-in automatic color match, you can choose any color you'd like for your divider using saved, global, or recent colors.

You can also use Divi's proprietary magic color system to choose a color based on your most recent colors. Divi will suggest harmonious colors in rows based on your recent activity.

Please refer to our documentation to learn more about Divi's color management system.

Adjusting the height of your divider will alter how the divider appears in your section. The default height for shape dividers is 100px. That being said, you can use any unit of measurement supported by Divi, including pixels (px), picas (pc), percent (%), view height (vh), and more.

An additional option for divider height is the ability to adjust the height on hover. This enables you to create a movement effect when users navigate throughout the page.

To learn more about Divi hover options, read our documentation.

Horizontal repeat is used to duplicate the divider from left to right. By default, one instance of a shape divider is enabled.

To choose how many times to repeat your divider, use the horizontal repeat slider to assign how many instances your divider should be visible.

Horizontal repeat can also be adjusted with Divi's responsive options.

Divi enhances your options further by providing a flip option for your divider. You can flip your divider horizontally or vertically.

The divider arrangement setting allows the divider to be added above or below the section content.

This is useful for adding dimension and depth to your design and adds interesting effects to keep your site's visitors engaged.

There are endless possibilities when working with Divi dividers.

As previously mentioned, you can add the appearance of motion to your dividers by using Divi's hover effects on the divider height.

However, there are additional ways of adding motion to your dividers. For example, you can add an empty section above or below other sections containing content to display motion using Divi's animation effects.

If you'd like to learn how to create this effect yourself, read the post here.

Another way to incorporate motion into your shape dividers is using Div's scroll transform effects. Applying these effects will make the page come to life when a user scrolls.

If you want to learn more about applying scroll effects using shape dividers and the scroll transform settings, read our post that will show you how to do it.

There are plenty of ways to incorporate shape dividers into your designs. To learn fun and interesting new ways to make your designs pop, check out some additional resources on the Elegant Themes blog.