How to Use the Line Element for Design & Separation

The line element is a simple but powerful tool for creating visual separation or adding a design accent to your webpage.

1. Adding a Line Element

1. Open the Elements Panel on the left.
2. Find the Line Element under "Shapes & Dividers."
3. Click, hold, and drag it to the desired position on your page.

2. Adjusting the Line Size

Resizing Manually

• Click on the line to display left and right handlebars.
• Drag the handles to adjust the width.

Precise Width & Height Settings

• Select the Settings Panel on the left.
• Adjust:
• Width – Set in percent (%) for responsive design or pixels (px) for a fixed size.
• Height – Increase to make the line thicker.

3. Styling the Line

• Go to the Style Panel to change the line type.
• Choose from different styles:
• Solid
• Dashed
• Dotted
• Double
• Custom Decorative Styles

Color & Effects

• Adjust the line color to match your design.
• Add shadows or gradients for a stylish effect.

4. Adding Text or Icons to the Line

Text Placement

• Under Style → Text, enable text inside the line.
• Adjust:
• Alignment: Left, center, or right.
• Spacing: Distance between text and line.
• Font & Color: Customize typography and colors separately.

Adding an Icon

• Instead of text, choose Icon from the dropdown.
• Pick an icon that fits your design (e.g., arrows, stars, or symbols).

5. Responsive Adjustments

• Ensure the line width and text placement look good on tablet and mobile views.
• Adjust the height and width separately for smaller screens if needed.

Why Use the Line Element?

Creates clear visual separation between sections.

Adds decorative design touches for branding or emphasis.

Flexible styling options with colors, text, and icons.

By using the line element effectively, you can make your page more structured and visually appealing while maintaining a clean, professional look.