The Divider Widget allows you to add styled horizontal lines that divide your content.
You can choose either the standard line with nicely styled effects, or select from a variety of 25+ SVG dividers for enhanced design styling.
In addition, you can include text or icons before, after, or in the middle of your divider.
Content
Style: Choose between many classic and patterned styles, such as solid, curly, wavy, tribal patterns, arrows, pluses and more.Width: Control the width of the divider as percentage from 0 to 100 percent.Alignment: Align the divider to the left, center or right of the page.Add Element: Select from None, Text, or Icon. Select Text or Icon allows you to either enter the Text to be included or select or upload an icon from the Icon Library.
Style
Divider
Color: Choose the color of the dividerSize: Set the size/height of the divider, from 1 to 100, in either pixels or as a percentageAmount: Set the number of patterned elements to showGap: Slide to set the gap above and below the divider, from 1 to 50
Text
Color: Choose the text colorTypography: Set the typography options for the textPosition: Choose the position of the text in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the text and the divider line, from 1 to 50
Icon
There are 3 different VIEWS for the widget: Default, Stacked, and Framed. Each comes with its own set of options.
VIEW: Default
Size: Set the size of the iconPrimary Color: Choose the icon colorPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
VIEW: Stacked
Size: Set the size of the iconPadding: Set the padding around the iconPrimary Color: Set the color of the stack backgroundSecondary Color: Set the color of the iconPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360Border Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks
VIEW: Framed
Size: Set the size of the iconPadding: Set the padding around the iconPrimary Color: Set the color of the frame borderSecondary Color: Set the color of the iconPosition: Choose the position of the icon in relation to the divider, selecting from Left, Center, or RightSpacing: Slide to add space between the icon and the divider line, from 1 to 50Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360Border Width: Control the thickness of the frame borderBorder Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames
Advanced
Set the Advanced options that are applicable to this widget