---
title: Fractionnement vertical
slug: docs/fr/fractionnement-vertical
createdAt: 2024-07-24T11:16:06.896Z
---
Il divise votre contenu en deux colonnes côte à côte, vous offrant la flexibilité de présenter des informations de manière visuellement attrayante. C’est comme avoir deux toiles sur lesquelles travailler, côte à côte.
## Quand l’utiliser
- **Comparer et contraster**
Mettre en valeur les similitudes et les différences entre deux sujets ou produits.
- **Créer du contenu côte à côte**
Afficher ensemble des informations liées, comme des fonctionnalités et des avantages.
- **Améliorer la lisibilité**
Aérer de longues sections de texte avec des éléments visuels.
- **Mettre en valeur plusieurs exemples**
Présenter différentes options ou variations côte à côte.
## Comment utiliser le bloc Division verticale
::::WorkflowBlock
:::WorkflowBlockItem
Tapez `/` pour ouvrir le menu de blocs Archbee
:::
:::WorkflowBlockItem
Recherchez le bloc **Division verticale** et cliquez pour l’insérer
:::
:::WorkflowBlockItem
Choisissez les proportions de largeur dans le coin supérieur droit.
Vous avez 3 options :
- **30/70 **répartition
- **50/50 **répartition
- **70/30** répartition
:::
:::WorkflowBlockItem
N’hésitez pas à ajouter votre contenu. Vous pouvez styliser le contenu comme vous le souhaitez à l’aide du [WYSIWYG Menu](#) ou même insérer d’autres blocs, tels que :
- [Titres](docId\:m5YtbqSdP8r5-Mf8qZ06o)
- [En-têtes extensibles](docId\:vzJtGjqibvOm7Liy_MlxO)
- [Listes](docId\:nPfcEoI9K08-yMLuZK7Fh)
- [Bouton](docId:3nU6V7-dlt4mIBEHdZb-Z)
- [Avertissement](docId\:OL_gxdn7xBLaPFqLQ3n-7)
- [Séparateur horizontal](docId\:nCxSX6BbAvR5tG3MPNYwH)
- [Minitaskers](docId\:JbJU857BtqOt2Y7K3l3PV)
- [Fichier](docId:_NnUvECpV1i_8pS-sS1h-)
- [Image](docId\:TPn9FZo6lfXo2lMviwCWj)
- [Vidéo](docId\:GQ9-sKSwAguEEbpshXf6u)
- [Carte](docId:0Th8Fda7i1_Nt7eFmFeKT)
- [Éditeur de code : multilingue](docId:9h6qJpsLDGr0J3o9xDD8K)
- [Exemples d’intégration](docId\:tQv8z09d0Qm9bwpWCW8s8)
:::
::::
## Exemples
:::::::Tabs
:::::Tab{title="Comparer les forfaits"}
**Comparer les forfaits **— Présentez clairement les fonctionnalités, les tarifs et les avantages des différents forfaits dans une comparaison côte à côte.
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Fonctionnalités standard pour gérer et distribuer la documentation.
Lecteurs illimités Espaces de projet illimités Portails publics ou privés Domaine personnalisé et image de marque JavaScript personnalisé Protection par mot de passe
:::
:::VerticalSplitItem
Fonctionnalités avancées et image de marque complète pour faire évoluer la documentation.
Tout ce qui est inclus dans Growing Contrôle complet de l’image de marque Système de révision Contenu et variables réutilisables Gestion de versions et localisation Contrôle avancé de l’accès pour les équipes Contrôle avancé de l’accès pour les lecteurs
:::
::::
Consultez plus de détails sur la page [https://www.archbee.com/pricing](https://www.archbee.com/pricing).
:::::
::::::Tab{title="Guide étape par étape"}
**Guide étape par étape **— Affichez des instructions visuelles ou des extraits de code dans une colonne, tout en fournissant des explications écrites dans l’autre (pour les guides pratiques, vous pouvez utiliser le bloc [Workflow](docId:5dOnYhRH_w9oemTn4LwH4)).
:::::VerticalSplit{layout="right"}
::::VerticalSplitItem
Découvrez comment Archbee peut vous aider à fournir une documentation qui répond aux questions des utilisateurs finaux, des développeurs et de l’équipe.
Réservez un créneau et discutez avec notre Head of Product pour une présentation. (Ce n’est certainement pas un appel de vente !)
:::CtaButton{label="Réserver une démo" externalHref="https://www.archbee.com/book-a-demo" openInNewTab="true"}
:::
::::
:::VerticalSplitItem
:::
:::::
::::::
:::::Tab{title="À faire et à éviter"}
**À faire et à éviter **— Présentez clairement les meilleures pratiques et les pièges potentiels dans une colonne, et les explications ou conséquences correspondantes dans l’autre.
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Àfaire
✅ Le CTA principal ressort par rapport à tout le reste
✅ Le second CTA est moins visible
:::
:::VerticalSplitItem
À éviter
❌ Aucune hiérarchie naturelle
❌ Aucun déclencheur visuel ou impression mitigée
:::
::::
:::::
:::::Tab{title="Section FAQ"}
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Est‑ce qu’utiliser Archbee va me rendre riche ?**
:::
:::VerticalSplitItem
Nous ne pouvons pas le promettre, mais cela vaut la peine d’essayer.
Après tout, si cela ne vous rend pas millionnaire, vous aurez au moins une documentation très élégante.
Et soyons honnêtes, qui a besoin d’argent quand vous pouvez recevoir des compliments sur votre [portail de documentation qui répond aux questions de vos utilisateurs avec l’IA](docId:75QP_iVQynQtsJ6HCihfC) ?
:::
::::
:::::
:::::::
***
:::hint{type="info"}
**🧠 À retenir**
La clé pour utiliser efficacement une séparation verticale est l’équilibre. Assurez-vous que le contenu de chaque colonne complète l’autre et contribue au message global de votre document.
Expérimentez différentes combinaisons de contenu pour trouver ce qui fonctionne le mieux pour votre audience.
:::
***
::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} ** Trouver d’autres blocs**
Découvrez de nouvelles manières et de nouveaux blocs pour créer des pages de documentation remarquables et fonctionnelles.
[Voir tous les blocs](docId\:oSw7o7IGH93-6KHkyg-eL)
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}** Besoin d’aide ? ⬇️**
Utilisez la **bulle de discussion** **bleue **dans le coin inférieur droit.
Ou essayez **Chat IA** (depuis la barre de recherche) pour des réponses rapides.
:::
:::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"}** Votre avis compte**
Utilisez le formulaire de rétroaction ci-dessous, anonymement.
Ou posez une question dans la **section Q\&R** et notre équipe ou l’IA vous donnera une solution.
:::
::::