With the Divider Widget, you can integrate customized horizontal lines within your content.
The Divider Widget allows you to pick between a standard line that comes with stylish effects or from over 25 SVG dividers for a more enhanced design. Plus, you have the option to add text or icons either before, after, or right in the middle of your divider.
Content tab
- Style: Pick from various styles within these three categories: Line, Pattern, and Tribal.
- Width: Adjust the divider's width from 0 to 100 percent as needed.
- Alignment: Choose to align your divider to the left, center, or right.
- Add Element: Opt for None, Text, or Icon to add to your divider, with the ability to type in text or select/upload an icon.
Style tab
- Color: Pick the color you want for the line.
- Weight: Adjust the thickness or height of the line, anywhere from 1 to 100, in pixels or percentages.
- Size: Adjust the size of the divider.
- Amount: Specify the count of patterned elements to display.
- Gap: Adjust the vertical spacing of the divider relative to the box.
Text Style
Note:
Available only if you added a Text Element from the Content section.
- Color: Select the color for any text you add.
- Typography: Customize the typographical settings of the divider text.
- Text Stroke: Add a stroke to the text with thickness and color picker options.
- Position: Set text position relative to the divider.
- Spacing: Adjust the spacing between the text and the divider.
Icon Style
Note:
Available only if you added an Icon Element from the Content section.
Three View modes are available for styling: Default, Stacked, and Framed. Each mode includes its own array of selectable options.
Default view
- Size: Adjust the size of the icon.
- Primary Color: Customize the color of the icon.
- Position: Place the icon to the left, center, or right relative to the divider.
- Spacing: Adjust the spacing between the icon and the divider.
- Rotate: Rotate the icon anywhere from 0 to 360 degrees.
Stacked view
- Size and Padding: Determine the icon's size and the padding.
- Primary Color: Customize the color of the icon background.
- Secondary Color: Customize the color of the icon.
- Position: Position the icon to the left, center, or right of the divider.
- Spacing: Adjust the spacing between the icon and the divider.
- Rotate: Option to rotate the icon.
- Border Radius: Adjust the radius for curved corners.
Framed view
- Size and Padding: Similar to the stacked view, adjust the icon's size and its surrounding padding.
- Frame Colors: Select colors for the frame's border and the icon.
Position, Spacing, and Rotation: Control where the icon sits, how much space is around it, and its rotation angle. - Border Width and Radius: Customize the frame's thickness and corner roundness for a distinct look.
Each view allows for a tailored approach to icon styling, offering creative ways to enhance your dividers.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.