Breaking a webpage into clear sections improves readability, enhances user experience, increases visual appeal, and helps with SEO, making it a crucial part of your Divi website.
Divi section dividers allow you to add pre-designed shapes and patterns to the top and bottom of a section on your page.
What is a Divi divider?
The Divi divider is a built-in design setting for Divi sections that allows you to add any of 26 pre-designed shape dividers to separate content on your web pages. Additional settings in the section divider tab allow you to create custom dividers to suit any website style.
- Divi Dividers can be added to any Divi section but not to modules, columns, or rows
- Dividers can be added to the top of the section, the bottom of the section, or both the top and bottom
- There are 26 divider shapes to choose from
- Divider shapes can be flipped, resized, repeated, combined, and customized
- Divider shapes have an auto color match for the color of your current section and the adjacent section
How to add dividers to Divi
Here’s a step-by-step guide on how to use the Divi shape divider feature:
- Open a page or post and enable the Divi Visual Builder and add a Divi section. Hover over it to bring up the options bar.
- Click the settings gear icon to open the popup panel for the Section Settings.
- In the Design tab of the section, you will see Dividers as the second tab. Click on the Dividers tab.
- You will need to select the divider location you want to add by clicking on the top or bottom options.
- By default, the divider style is set to None. Click here to select your divider shape from the 26 available.
- From here you will see a live view of the divider which can then be customized using the shape divider options below:
– Shape divider color allows you to use any color you like for dividers but Divi will auto-match it to the adjoining section by default.
– Section divider height allows you to change the default divider shape height from 100px to any height required. This also has the option to set a different height on hover by clicking the hover options arrow icon.
– Section divider horizontal repeat allows you to change the default section shape from showing 1 time to it showing multiple times from left to right.
– Section divider flip allows you to flip your divider shape horizontally or vertically.
– Divider arrangement allows for the divider to be displayed either above or below the content of the section.
Tips for using dividers in Divi
Here are some design tips for using shape dividers between page sections in Divi:
- Choose the right shape: Divi provides a range of pre-designed shape dividers to choose from so choose a shape that complements your website design and aligns with your brand style.
- Use colors wisely: A color is a powerful tool for creating contrast and drawing attention to specific page sections. Use colors that complement your website’s color scheme and choose contrasting colors for the divider to create visual interest and emphasize the separation between sections.
- Separate the shape dividers – Add an empty section above or below other sections to add the shape divider. By doing this you can use the Divi animation, motion scroll, and transition effects on the divider.
- Pay attention to placement: The placement of your shape divider can greatly impact the flow and readability of your page. Place dividers strategically to break up long sections of text, highlight important content, or emphasize the separation between different types of content. You do not need to add a divider to every section.
- Use shape dividers consistently: Consistency is key to creating a cohesive design. Use shape dividers consistently throughout your website to create a visual theme and reinforce your brand style.
- Don’t overdo it: While shape dividers can add visual interest and improve the flow of your page, it’s important not to overdo it. Too many dividers can be overwhelming and distract from the content on your page.
Some examples of Divi dividers
You can always view great examples of Divi designs here in our own showcase and many of the best Divi websites will be using the built-in Divi divider options.
When the option was added to Divi back in 2018 Elegant Themes released a tutorial on how to recreate some nice examples of Divi dividers they built. You can download the Divi section dividers layout directly that we built using the tutorial or view the tutorial here.
There are a few other nice examples of dividers being used used in these Divi tutorials from Elegant Themes such as:
- How to add motion to section dividers
- How To Combine Background Masks with Section Dividers in Divi
- Elegantly Hiding Your Copy Below Section Dividers in a Stunning Design with Divi
Final thoughts
Separating a long page into sections is crucial if you want users to stick around to the end and using shape dividers makes transitions between these sections more appealing. Use them wisely and don’t overdo them and you can create some great styles for your website.
Use the extend styles, copy styles, and preset options to quickly duplicate shape dividers across your website where needed.
There is also a Divider module in Divi but this is more basic for creating dividing lines of various styles between content rather than shaped dividers across whole page sections.
