Advanced Separator
Advanced Separator draws a divider line across a section. Its one job is to break up content with a line that can carry a text label, an icon or an image in the middle.
How to add the Advanced Separator module
- Open the Visual Builder and add a section and row.
- Click the plus icon in a column and search for "Advanced Separator".
- Add the module, then choose what sits on the line in the Divider Element setting.
Content
Content group
Open the module settings and go to the Content tab, then the Content group.
- Divider Element: Text, Icon or Image. Default is Icon.
- Image: The image shown on the line. Used when Divider Element is Image.
- Divider Text: The label shown on the line. Used when Divider Element is Text. It supports dynamic content.
- Select Icon: The icon shown on the line. Used when Divider Element is Icon.
If the chosen element is empty (no text, no icon or no image), the module draws the lines without a center element.
Mask group
Content tab, Mask group.
- Use Mask: Off by default. Fills the text or icon with an image instead of a solid color. It does not apply when Divider Element is Image.
- Upload Mask Image: The image used to fill the text or icon.
Design
Divider group
- Content Alignment: Left, Center or Right. Default is Center.
- Use Bottom Shape: Off by default. Replaces the two border lines with a decorative shape under the center element.
- Select Shape: Shape 1 to Shape 18. Default is Shape 1.
- Shape Width: Default 280px.
- Shape Weight: Default 1.
- Shape Color: Default #333333.
- Shape Margin: Default 0px on all sides.
Divider Text group
Font settings for the divider text. The text is rendered as an H1 unless you set a different heading level here.
Divider Text Box group
- Padding: Padding around the text.
- Background: Background color behind the text.
- Border Radius: Corner rounding for the text box.
Icon/Image group
- Icon Color: Default #5b2cff.
- Icon Background: Background color behind the icon.
- Icon Size: Default 40px.
- Icon Padding: Padding around the icon.
- Image Width: Default 100px.
- Border: Border and radius options for the icon or image.
Border group
- Border Type: None, Classic or Pattern. Default is Classic.
- Border Style: For Classic, choose Solid, Double, Dotted or Dashed. Default is Double. For Pattern, choose Curved, Zigzag, Square or Curly. Default is Curved.
- Border Spacing: Gap between the line and the center element. Default 20px.
- Border Color: Default #5b2cff.
- Border Weight: Default 6px.
- Border Height: Default 10px.
- Border offset Top: Default 0px.
Mask group
- Image Repeat: Repeat or No Repeat. Default is Repeat.
- Image Size: Actual Size or Fit. Default is Fit.
- Image Position: Nine preset positions or Custom Position. Default is Center Center.
- Horizontal Value and Vertical Value: Offsets used with Custom Position. Both default to 0%.
FAQ
Does Advanced Separator work in Divi 4 and Divi 5?
The plugin includes a Divi 4 version of the module and a native Divi 5 module, both named Advanced Separator. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.
Why do the border lines disappear when I turn on Use Bottom Shape?
With Use Bottom Shape on, the module draws the selected shape instead of the two border lines.
Can I use an image as the mask for an image element?
No. The mask only applies to the text or icon element.