---
title: แบ่งแนวตั้ง
slug: th/user-guides/kDe0zE5xAZR3HVK9ZLLad
createdAt: 2024-07-24T11:16:06.896Z
---

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-yLur2NS-7n5n6p1g7iEKd-20240820-123417.png "แยกแนวตั้ง")

มันจะแบ่งเนื้อหาของคุณออกเป็นสองคอลัมน์เคียงข้างกัน ทำให้คุณมีความยืดหยุ่นในการนำเสนอข้อมูลในรูปแบบที่ดึงดูดสายตามากขึ้น เปรียบเสมือนการมีผ้าใบสองผืนอยู่ข้าง ๆ กันเพื่อใช้งาน

## เมื่อควรใช้

- **เปรียบเทียบและเปรียบต่าง**

  แสดงความเหมือนและความแตกต่างระหว่างสองหัวข้อหรือสองผลิตภัณฑ์
- **สร้างเนื้อหาแบบเคียงข้างกัน**
  แสดงข้อมูลที่เกี่ยวข้องไว้ด้วยกัน เช่น ฟีเจอร์และประโยชน์
- **ปรับปรุงความสามารถในการอ่าน**

  แบ่งส่วนข้อความยาว ๆ ด้วยองค์ประกอบเชิงภาพ
- **แสดงตัวอย่างหลายแบบ**

  นำเสนอทางเลือกหรือรูปแบบต่าง ๆ แบบเคียงข้างกัน

## วิธีใช้บล็อกแยกแนวตั้ง

::::WorkflowBlock
:::WorkflowBlockItem
พิมพ์ `/` เพื่อเปิดเมนูบล็อกของ Archbee
:::

:::WorkflowBlockItem
ค้นหา **Vertical Split** แล้วคลิกเพื่อแทรกบล็อก

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-tdJQA3ikGzMdBk2aoa-XP-20240820-122615.png "เพิ่มบล็อก Vertical Split")
:::

:::WorkflowBlockItem
เลือกสัดส่วนความกว้างจากมุมขวาบน 
คุณสามารถเลือกได้ 3 ตัวเลือก:

- **30/70 **แบ่ง
- **50/50 **แบ่ง
- **70/30** แบ่ง

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-tGxQGApOOav0c1n0B3EhB-20240820-122917.png "สัดส่วนความกว้าง")
:::

:::WorkflowBlockItem
คุณสามารถเพิ่มเนื้อหาของคุณได้ตามต้องการ และปรับแต่งโดยใช้ [เมนู WYSIWYG](#) หรือแทรกบล็อกอื่น เช่น:

- [Headings](docId\:n7tF0cW1NYcGJ95eLyvzv) 
- [หัวข้อที่ขยายได้](docId\:Gdj2J6Ro-QNT7JUkoTd8z) 
- [รายการ](docId\:qFf_dOYkfQ7nFLxAQMEBC) 
- [ปุ่ม](docId\:sZpaH1N-I3assa06PZ8Vq) 
- [Callout](docId\:RSZRJI1QAMLJnfm5FEyuI) 
- [เส้นคั่นแนวนอน](docId\:SUdKbXtAQXtHuYA3FvceR) 
- [Minitaskers](docId\:ypbz6l-K-NWw4jeTmZBg6) 
- [ไฟล์](docId\:MEMy73RjJGuMNIqzyG_Qg) 
- [รูปภาพ](docId\:pfxmITebqYMNG3_1KMqb4) 
- [วิดีโอ](docId:5BHBpuA1QsB91PTPJUBHN) 
- [แผนที่](docId\:MZRckUAyZJ5--ar6IRvx6) 
- [Code editor: multi-language](docId\:AWmOv__BlChJLUPRL0vkl) 
- [Embed Examples](docId:_Ht4fXtrP-c5akFFn-eSN) 
:::
::::

## ตัวอย่าง

:::::::Tabs
:::::Tab{title="เปรียบเทียบแพ็กเกจ"}
**เปรียบเทียบแพ็กเกจ **— แสดงคุณสมบัติ ราคา และประโยชน์ของแต่ละแพ็กเกจอย่างชัดเจนในรูปแบบเปรียบเทียบกันแบบเคียงข้าง


::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-HR2x2FQS9ERSjKWv5k9F9-20240820-121406.png)

ฟีเจอร์มาตรฐานสำหรับจัดการและเผยแพร่เอกสาร

<font color="#2166ae">  </font> ผู้อ่านไม่จำกัดจำนวน <font color="#2166ae">  </font> พื้นที่โปรเจกต์ไม่จำกัด <font color="#2166ae">  </font> พอร์ทัลแบบสาธารณะหรือส่วนตัว <font color="#2166ae">  </font> โดเมนและการปรับแบรนด์แบบกำหนดเอง <font color="#2166ae">  </font> JavaScript แบบกำหนดเอง <font color="#2166ae">  </font> การป้องกันด้วยรหัสผ่าน
:::

:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-OiNhXRKDFgchzLmC6_N5L-20240820-121406.png)

ฟีเจอร์ขั้นสูงและการปรับแบรนด์เต็มรูปแบบสำหรับการขยายงานด้านเอกสาร

<font color="#2166ae">  </font> ทุกอย่างในแพ็กเกจ Growing <font color="#2166ae">  </font> การควบคุมแบรนด์แบบสมบูรณ์ <font color="#2166ae">  </font> ระบบรีวิว <font color="#2166ae">  </font> คอนเทนต์และตัวแปรที่นำกลับมาใช้ใหม่ได้ <font color="#2166ae">  </font> ระบบเวอร์ชันและการแปล <font color="#2166ae">  </font> การควบคุมสิทธิ์การเข้าถึงทีมขั้นสูง <font color="#2166ae">  </font> การควบคุมสิทธิ์การเข้าถึงผู้อ่านขั้นสูง
:::
::::

ดูรายละเอียดเพิ่มเติมได้ที่ [https://www.archbee.com/pricing](https://www.archbee.com/pricing) หน้าเว็บ
:::::

::::::Tab{title="คู่มือทีละขั้นตอน"}
**คู่มือทีละขั้นตอน&#x20;**— แสดงคำแนะนำแบบภาพหรือโค้ดในคอลัมน์หนึ่ง พร้อมกับคำอธิบายแบบเขียนในอีกคอลัมน์ (สำหรับคู่มือ How-to คุณสามารถใช้ [เวิร์กโฟลว์](docId\:uO-p5uNPbIu6EIV95OtY6) บล็อก)


:::::VerticalSplit{layout="right"}
::::VerticalSplitItem
ค้นพบว่า Archbee สามารถช่วยคุณส่งมอบเอกสารที่ตอบคำถามให้ผู้ใช้ นักพัฒนา และทีมได้อย่างไร

จองเวลาและพูดคุยกับ Head of Product ของเราเพื่อรับคำแนะนำแบบตัวต่อตัว (ไม่ใช่สายขายแน่นอน!)

:::CtaButton{label="จองเดโม" externalHref="https://www.archbee.com/book-a-demo" openInNewTab="true"}

:::
::::

:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-P4quRkSsH1zD2O8sNJhmM-20240820-115459.png)
:::
:::::
::::::

:::::Tab{title="สิ่งที่ควรทำและไม่ควรทำ"}
**สิ่งที่ควรทำและไม่ควรทำ&#x20;**— อธิบายแนวปฏิบัติที่ดีที่สุดและข้อควรระวังในคอลัมน์หนึ่ง และคำอธิบายหรือผลกระทบในอีกคอลัมน์

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
<font color="#3b9f0f">ทำ</font><font color="#3b9f0f">ควร</font>

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-cTuj-hMen2jBVWghk7eIK-20240820-113751.png)

✅  CTA หลักโดดเด่นกว่าองค์ประกอบอื่น
✅  CTA รองมีความโดดเด่นน้อยกว่า
:::

:::VerticalSplitItem
<font color="#eb1418">ไม่ควร</font>

![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-QdYNL7rDqOiPWR40bnl5A-20240820-113800.png)

❌  ไม่มีลำดับความสำคัญที่ชัดเจน
❌  ไม่มีตัวกระตุ้นทางสายตาหรือให้ความรู้สึกสับสน
:::
::::
:::::

:::::Tab{title="คำถามที่พบบ่อย"}
::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**การใช้ Archbee จะทำให้ฉันรวยไหม?**
:::

:::VerticalSplitItem
เราไม่สามารถสัญญาได้ แต่ก็น่าลองดู

อย่างน้อยถ้ามันไม่ทำให้คุณเป็นเศรษฐี คุณก็จะมีเอกสารที่ดูดีมาก

และเอาจริงนะ ใครจะต้องใช้เงิน ในเมื่อคุณสามารถได้คำชมเกี่ยวกับ [พอร์ทัลเอกสารที่ตอบคำถามของผู้ใช้ด้วย AI](docId\:v3PUWjmtl1Mdw5rQDDk51)?
:::
::::
:::::
:::::::

***

:::hint{type="info"}
**🧠   จำไว้&#x20;**

กุญแจสำคัญในการใช้การแบ่งแนวตั้งอย่างมีประสิทธิภาพคือความสมดุล ตรวจสอบให้แน่ใจว่าชุดเนื้อหาในแต่ละคอลัมน์สอดคล้องกันและช่วยเสริมสาระสำคัญโดยรวมของเอกสารของคุณ&#x20;

ลองผสมผสานเนื้อหาในรูปแบบต่างๆ เพื่อค้นหาว่ารูปแบบใดเหมาะสมที่สุดสำหรับผู้อ่านของคุณ
:::

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;ค้นหาบล็อกอื่น ๆ**

ค้นพบวิธีใหม่ ๆ และบล็อกต่าง ๆ เพื่อสร้างหน้าเอกสารที่สวยงามและใช้งานได้จริง

[ดูบล็อกทั้งหมด](docId\:fvbccw7nLvGJbcHvBvBG9)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; ต้องการความช่วยเหลือ?  ⬇️**

ใช้ **ฟองแชทสีน้ำเงิน** **ที่มุมขวาล่าง** ของหน้าจอ

หรือใช้ **AI Chat** (จากช่องค้นหา) เพื่อรับคำตอบอย่างรวดเร็ว
:::

:::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"}**&#x20;  ความคิดเห็นของคุณสำคัญ**

ใช้แบบฟอร์มความคิดเห็นด้านล่างได้โดยไม่ระบุตัวตน

หรือถามคำถามได้ที่ **ส่วนถาม-ตอบ** แล้วทีมงานหรือ AI ของเราจะให้คำตอบแก่คุณ
:::
::::