Shape
The Shape element adds decorative shapes to your page -- horizontal lines/dividers, rectangles, circles, or triangles. Use it for visual separation, backgrounds, or decorative accents.
Overview
Shapes are purely visual elements that help organize and decorate your page layout:
- Line -- horizontal divider between sections
- Rectangle -- colored block or border
- Circle -- round decorative element
- Triangle -- directional indicator or accent
Adding a Shape
- Open the Website Builder
- Find Shape in the Elements panel (under Display)
- Drag it onto your page
- Select the shape type and configure properties in the General Tab
Properties
General Tab
| Property | Description | Default |
|---|---|---|
| Shape Type | Shape variant: line, rectangle, circle, or triangle | line |
| Color | Fill color of the shape | #cccccc |
| Border Color | Border/stroke color | #999999 |
| Border Width | Border thickness in pixels | 1 |
| Width | Shape width (px or %) | 100% |
| Height | Shape height in pixels | 2 (line), 100 (others) |
| Border Radius | Corner rounding (rectangle only) | 0 |
| Opacity | Transparency from 0 to 1 | 1 |
Shape-Specific Behavior
- Line: Renders as a horizontal rule. Height controls thickness.
- Rectangle: Renders as a block with optional border radius for rounded corners.
- Circle: Renders as a perfect circle. Width and height are equal.
- Triangle: Renders using CSS borders. Color controls the fill.
Use Cases
- Section dividers -- use lines between content blocks
- Background accents -- colored rectangles behind content
- Bullet points -- small circles as custom list markers
- Directional cues -- triangles as arrows or indicators
Questions?
If you have any questions, please don't hesitate to contact us.