Yeeflow

The Divider Control 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 icon dividers for enhanced design styling.

In addition, you can include text or icons before, after, or in the middle of your divider.

___________________________________________________________

Firstly, find the Line control in the controls add panel,. Then, drag and drop it into a section or container on your page.

Style: Choose between many classic and patterned styles, such as Solid, Dotted, Dashed and Double.

Width: Control the width of the line as percentage from 0 to 100 percent.

Align: Align the line 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 an icon from the Icon Library.

1. Style: Choose between many classic and patterned styles, such as Solid, Dotted, Dashed and Double.
2. Width: Control the width of the line as percentage from 0 to 100 percent.
3. Align: Align the line to the left, center or right of the page.
4. Add Element: Select from None, Text, or Icon. Select Text or Icon allows you to either enter the Text to be included or select an icon from the Icon Library.

Color: Choose the color of the Divider.

Weight: Set the size/height of the line, from 1 to 100.

Spacing: Slide to set the gap above and below the line, from 1 to 50

1. Color: Choose the color of the Divider.
2. Weight: Set the size/height of the line, from 1 to 100.
3. Spacing: Slide to set the gap above and below the line, from 1 to 50

Typography: Set the typography options for the text

Position: Choose the position of the text in relation to the divider, selecting from Left, Center, or Right

Spacing: Slide to add space between the text and the divider, from 1 to 50

1. Color: Choose the text color
2. Typography: Set the typography options for the text
3. Position: Choose the position of the text in relation to the divider, selecting from Left, Center, or Right
4. Spacing: Slide to add space between the text and the divider, from 1 to 50

There are 3 different VIEWS for the widget: Default, Stacked, and Framed. Each comes with its own set of options.

Primary Color: Choose the icon color

Position: Choose the position of the icon in relation to the line, selecting from Left, Center, or Right

Spacing: Slide to add space between the icon and the line, from 1 to 50

Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360

1. Size: Set the size of the icon
2. Primary Color: Choose the icon color
3. Position: Choose the position of the icon in relation to the line, selecting from Left, Center, or Right
4. Spacing: Slide to add space between the icon and the line, from 1 to 50
5. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360

Spacing: Set the padding around the icon

Primary Color: Set the color of the stack background

Secondary Color: Set the color of the icon

Spacing: Slide to add space between the icon and the line, from 1 to 50

Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks

1. Size: Set the size of the icon
2. Spacing: Set the padding around the icon
3. Primary Color: Set the color of the stack background
4. Secondary Color: Set the color of the icon
5. Position: Choose the position of the icon in relation to the line, selecting from Left, Center, or Right
6. Spacing: Slide to add space between the icon and the line, from 1 to 50
7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
8. Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks

Spacing: Set the padding around the icon

Primary Color: Set the color of the frame border

Border Width: Control the thickness of the frame border

Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames

1. Size: Set the size of the icon
2. Spacing: Set the padding around the icon
3. Primary Color: Set the color of the frame border
4. Secondary Color: Set the color of the icon
5. Position: Choose the position of the icon in relation to the line, selecting from Left, Center, or Right
6. Spacing: Slide to add space between the icon and the line, from 1 to 50
7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
8. Border Width: Control the thickness of the frame border
9. Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames

Set the <a href="https://support.yeeflow.com/en/articles/8661745">Advanced options</a> that are applicable to this control.

Easily segment content with Yeeflow's divider feature. Enhance organization and readability effortlessly.

Add Divider to the page

Content

Style

Divider

Text

Icon

VIEW: Default

VIEW: Stacked

VIEW: Framed

Advanced Settings