---
title: Vertical Split
slug: docs/vertical-split
docTags:
createdAt: 2024-07-24T11:16:06.896Z
---
It splits your content into two side-by-side columns, giving you the flexibility to present information in a visually engaging way. It's like having two canvases to work with, side by side.
## When to use it
- **Compare and contrast**
- Showcase similarities and differences between two topics or products.
- **Create side-by-side content**
Display related information together, such as features and benefits.
- **Improve readability**
- Break up long sections of text with visual elements.
- **Showcase multiple examples**
- Present different options or variations side by side.
## How to Use the Vertical Split Block
::::WorkflowBlock
:::WorkflowBlockItem
Type `/` to open Archbee block menu
:::
:::WorkflowBlockItem
Search for **Vertical Split** block and click to insert insert
:::
:::WorkflowBlockItem
Choose the width proportions form upper right corner.
You have 3 options:
- **30/70 **split
- **50/50 **split
- **70/30** split
:::
:::WorkflowBlockItem
Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like:
- [Headings](docId\:CH1EclxGmlPa-XaZAwY6u)
- [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ)
- [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g)
- [Button](docId\:JDAXu7IBxBA1jW3KHOrOp)
- [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC)
- [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L)
- [Minitaskers](docId\:VYT5x0nyqUpzGwz906R56)
- [File](docId\:t1Ky085LzcMKkp3H9EBA_)
- [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V)
- [Video](docId\:B2Ip7DJZj3gHcRxc42rIL)
- [Map](docId:_6bL0kZA7bB9RgcNylSWS)
- [Code editor: multi-language](docId:_DmwEwV5w9YcnVMlcUI53)
- [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0)
:::
::::
## Examples
:::::::Tabs
:::::Tab{title="Compare Plans"}
**Compare plans **— Clearly outline the features, pricing, and benefits of different plans in a side-by-side comparison.
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Standard features to manage and distribute documentation.
Unlimited readers Unlimited project spaces Public or private portals Custom domain & branding Custom JavaScript Password protection
:::
:::VerticalSplitItem
Advanced features and full branding for scaling documentation.
Everything in Growing Complete branding control Review system Reusable content & variables Versioning & localization Advanced team access control Advanced reader access control
:::
::::
Check more details on [https://www.archbee.com/pricing](https://www.archbee.com/pricing) page.
:::::
::::::Tab{title="Step-by-step guide"}
**Step-by-step guide **— Show visual instructions or code snippets in one column, while providing written explanations in the other (for How-to guides you can use [Workflow](docId\:tNgOuV2y9_9uT1vnWHqXJ) block).
:::::VerticalSplit{layout="right"}
::::VerticalSplitItem
Discover how Archbee can help you deliver documentation that answers questions for end-users, devs and team.
Book a slot and chat to our Head of Product for a walk-through. (Definitely not a sales call!)
:::CtaButton{label="Book a demo" externalHref="https://www.archbee.com/book-a-demo" openInNewTab="true"}
:::
::::
:::VerticalSplitItem
:::
:::::
::::::
:::::Tab{title="Do's and Don'ts"}
**Do's and Don'ts **— Clearly outline best practices and potential pitfalls in one column, and the corresponding explanations or consequences in the other.
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Do
✅ Main CTA stands out against everyting else
✅ Second CTA is less visible
:::
:::VerticalSplitItem
Don't
❌ No natural hierarchy
❌ No visual trigger or mixed feelings
:::
::::
:::::
:::::Tab{title="FAQ section"}
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Will using Archbee make me rich?**
:::
:::VerticalSplitItem
We can't promise that, but it's worth a shot.
After all, if it doesn't make you a millionaire, at least you'll have a really fancy-looking documentation.
And let's be honest, who needs money when you can have compliments on your [documentation portal that answers your user's questions with AI](docId:1tOWnw572B2YbhvcxyZCm)?
:::
::::
:::::
:::::::
***
:::hint{type="info"}
**🧠 Remember **
The key to effective use of a vertical split is balance. Ensure the content in each column complements the other and contributes to the overall message of your document.
Experiment with different content combinations to find what works best for your audience.
:::
***
::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} ** Find other blocks**
Discover new ways and blocks to create stunning and functional documentation pages.
[Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p)
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}** Need help? ⬇️**
Use the **blue** **chat bubble **from bottom right corner.
Or try **AI Chat** (from search box) for quick answers.
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Your opinion matters**
Use the below feedback form, anonymously.
Or ask a question in **Q\&A section** and our team or AI will give you a solution.
:::
::::