Advanced divider module for divi lets you create a divider in between content. You can add a separator and adjust lines in different types of divider designs. Let’s explore all the unique features this module has-
Content Tab
Line Setting
In the line setting, you have 10 different divider styles to choose from. In addition, you can turn ON multiple lines and adjust the number of lines and the gap between those lines.
Separator Setting
Separator Setting comes with 4 different separator types. Based on separator types setting gets changed. Here is the list of separator types-
- Icon: Icon allows you to add Divi icons as a divider separator. You can also use an image as Icon from here.
- Text: Text separator allows you to add text as a separator. You can select an HTML tag for the text as well.
- Lottie: If you want to use Lottie animation as a separator, you can add an external URL or upload the file to your media library.
- No separator: This will remove the separator and keep connected divider lines.
NOTE: If you want to use the Lottie File as the separator, go to the DiviFlash Dashboard and activate Json File Extension.
Lottie Setting
The Lottie Setting is only available when you select the Lottie as the separator. It includes animation trigger, loop, speed, direction, etc. You will find a details explanation of those features in the Lottie module overview.
Design Tab
Line
The advanced divider has two parts (Left and Right) in the line. You can style both pieces according to your needs.
NOTE: Line design options can be changed depending on selected divider types. For example, if the divider type is selected as gradient then settings will be “Line background” and “right line background” instead of “color” and “right color”.
- Color: Give a solid color to the divider.
- Right Color: Use a different color on the right side of the divider.
- Size: Adjust the thickness of the divider with the size option.
- Width: Change the width of the divider.
- Line Alignment: Set the alignment of the divider.
- Left width: Define the width of the left divider.
- Right Width: Define the width of the right divider.
- Space Between: If required, add space in-between the left and right divider.
Custom Line
NOTE: Custom Line feature only works when “Divider Type” is selected as “Custom”.
The Custom Line feature lets you adjust the corner radius of the divider. In addition, you can apply a border, control its width, color, and add a box-shadow to the divider line.
Separator Style
Depending on the separator types, Separator style brings features associated with the selected separator.
- For Icon: You can change the icon background, color, and size with a stylish border and box-shadow effects.
- For Text: You have the option to change the text background color with a border and box-shadow effects.
NOTE: Typography design is available in the Separator Text option.
- For Lottie: Selecting Lottie as a separator brings an additional option to change the Lottie image size. Except for that, you can add background color, radius, border, and shadow.
Separator Text
The Separator Text feature works only for the Text separator, allowing you to change the font, weight, style, and alignment. Nevertheless, you can change the text color, size, letter spacing, and line height.
Custom Spacing
Under Custom Spacing, you have the option to apply margin & padding around the separator.
Advanced Tab
Features from advanced tab covered on General doc.
