# How do you add a vertical divider in Adalo?

Add a lightweight vertical divider with Adalo’s marketplace component, then set its color, thickness, height, and responsive placement.

- Canonical URL: https://adalocado.com/answers/add-vertical-divider-in-adalo
- Verification: Community workaround
- Topic: Responsive Design
- Skill level: Beginner
- Last reviewed: 2026-08-16
- Index status: improve-first

## Short answer

Add the Vertical Line marketplace component, set its color and width, and resize its frame to the required height. Use it as a visual separator only; keep related content grouped structurally.

Use the dedicated Vertical Line component for a resizable divider instead of rotating or compressing unrelated components. Keep the line inside the layout container whose content it separates.

## Intended outcome

The screen has a consistent vertical separator that works across Web, iOS, and Android.

## Requirements

- The Vertical Line marketplace component
- A screen or container with two areas that need visual separation

## Step by step

1. **Add Vertical Line**

   Open Marketplace Components, search for Vertical Line, and place the component between the two content areas.

2. **Set its appearance**

   Choose the line color and a width between 1 and 20 pixels, then resize the component to the intended height.

3. **Anchor it responsively**

   Place the line inside the same responsive container as the content it separates and test the alignment at every target width.

## Why it works

- The dedicated component renders a centered, lightweight line whose height follows its component frame.
- A divider communicates grouping visually but does not create layout structure or accessibility semantics by itself.

## Common failures

### The line shifts away from the content

Move it into the same parent container and review the component’s anchoring and responsive layout settings.

### The divider looks too heavy

Reduce the width, lower the color contrast, and reserve strong lines for boundaries that users must notice.

## Testing checklist

- [ ] Resize the screen through all supported breakpoints and confirm the divider stays aligned.
- [ ] Temporarily remove the divider and confirm the content grouping is still understandable.
- [ ] The divider aligns with both content areas
- [ ] The line does not cover interactive controls
- [ ] Phone and desktop layouts remain balanced

## Limitations

- The release is documented in an Adalo staff forum announcement, but no matching Help Center page was found during review.
- A vertical divider should not be the only cue that communicates meaning or state.

## Community evidence

### [Vertical Line](https://forum.adalo.com/t/64077/5)

Adalo released a customizable Vertical Line marketplace component. Boundary: The accepted reply links to the release rather than providing a builder walkthrough.

## Sources

- [Adalo Forum accepted release update](https://forum.adalo.com/t/64077/5)
- [Adalo Forum: Vertical Line component announcement](https://forum.adalo.com/t/new-component-vertical-line-now-on-the-marketplace/66209)

Markdown version: https://adalocado.com/answers/add-vertical-divider-in-adalo.md