---
title: División vertical
slug: division-vertical
createdAt: 2024-07-24T11:16:06.896Z
---
Divide tu contenido en dos columnas una al lado de la otra, dándote la flexibilidad de presentar información de una manera visualmente atractiva. Es como tener dos lienzos con los que trabajar, uno al lado del otro.
## Cuándo usarlo
- **Comparar y contrastar**
Mostrar similitudes y diferencias entre dos temas o productos.
- **Crear contenido lado a lado**
Mostrar información relacionada junta, como características y beneficios.
- **Mejorar la legibilidad**
Dividir secciones largas de texto con elementos visuales.
- **Mostrar múltiples ejemplos**
Presentar diferentes opciones o variaciones una al lado de la otra.
## Cómo usar el bloque de división vertical
::::WorkflowBlock
:::WorkflowBlockItem
Escribe `/` para abrir el menú de bloques de Archbee
:::
:::WorkflowBlockItem
Busca el bloque **División vertical** y haz clic para insertarlo
:::
:::WorkflowBlockItem
Elige las proporciones de ancho en la esquina superior derecha.
Tienes 3 opciones:
- **30/70 **división
- **50/50 **división
- **70/30** división
:::
:::WorkflowBlockItem
Siéntete libre de agregar tu contenido. Puedes darle estilo como quieras usando el [Menú WYSIWYG](#) o incluso insertar otros bloques, como:
- [Encabezados](docId\:undefined)
- [Encabezados expandibles](docId\:undefined)
- [Listas](docId\:undefined)
- [Botón](docId\:undefined)
- [Aviso](docId\:undefined)
- [Divisor horizontal](docId\:undefined)
- [Minitareas](docId\:undefined)
- [Archivo](docId\:undefined)
- [Imagen](docId\:undefined)
- [Video](docId\:undefined)
- [Mapa](docId\:undefined)
- [Editor de código: multiidioma](docId\:undefined)
- [Ejemplos de incrustación](docId\:undefined)
:::
::::
## Ejemplos
:::::::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:5jt8wnBSIYgh6jp4Dc3t3) 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\:xvEGznph5It2-GgeIFPkq)?
:::
::::
:::::
:::::::
***
:::hint{type="info"}
**🧠 Recordatorio **
La clave para un uso eficaz de una división vertical es el equilibrio. Asegúrate de que el contenido de cada columna se complemente y contribuya al mensaje general de tu documento.
Experimenta con diferentes combinaciones de contenido para encontrar lo que mejor funcione para tu audiencia.
:::
***
::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} ** Encontrar otros bloques**
Descubre nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales.
[Consulta todos los bloques](docId\:G2gQexIsuE2XnVGU6PWsT)
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}** ¿Necesitas ayuda? ⬇️**
Usa la **burbuja** **azul de chat **desde la esquina inferior derecha.
O prueba el **Chat de IA** (desde el cuadro de búsqueda) para respuestas rápidas.
:::
:::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"}** Tu opinión importa**
Usa el siguiente formulario de comentarios, de forma anónima.
O haz una pregunta en la **sección de Preguntas y Respuestas** y nuestro equipo o la IA te dará una solución.
:::
::::