กริดลิงก์
Link Grid คือตัวองค์ประกอบที่ผสมผสานความสวยงามแบบการ์ดเข้ากับฟังก์ชันการคลิกได้
เหมาะอย่างยิ่งสำหรับการเน้นให้โดดเด่น ข้อมูลสำคัญหรือการแสดง ทรัพยากรที่เกี่ยวข้อง
เวลาเหมาะสำหรับการใช้งาน
เน้นข้อมูลสำคัญ
สร้างการ์ดที่ดึงดูดสายตาสำหรับประกาศหรืออัปเดตสำคัญ
แสดงเนื้อหาที่เกี่ยวข้อง ลิงก์ไปยังทรัพยากร บทความ หรือสินค้าเพิ่มเติม
สร้างไดเรกทอรีที่สวยงามดึงดูด
จัดระเบียบข้อมูลให้อยู่ในรูปแบบการ์ดที่คลิกได้เพื่อการนำทางที่ง่ายขึ้น
ยกระดับประสบการณ์ผู้ใช้ มอบวิธีที่ชัดเจนและโต้ตอบได้เพื่อช่วยให้ผู้ใช้สำรวจเนื้อหาของคุณ
วิธีสร้าง Link Grid
พิมพ์/ เพื่อเปิดเมนูArchbee Block
ค้นหาLink Grid และคลิกเพื่อแทรก
เลือกวิธีที่คุณต้องการสร้าง
Link Grid แบบกำหนดเองเทียบกับแบบเติมอัตโนมัติ
เมื่อคุณเขียนเนื้อหาใน Link Grid ด้วยตนเอง ขั้นตอนถัดไปคือ:
ส่วนหัวสีทึบ
คุณสามารถใช้สีเป็นส่วนหัวเพื่อทำให้การ์ดของคุณโดดเด่นได้มากขึ้น คุณยังสามารถใช้รหัสสีให้ตรงกับคุณสมบัติของคุณได้อีกด้วย
คลิกที่ ประเภทส่วนหัว 
แล้วเลือก สี
คลิกที่ เปลี่ยนสี และเลือกสีที่คุณต้องการ การเปลี่ยนแปลงทั้งหมดจะถูกบันทึกโดยอัตโนมัติ
ส่วนหัวรูปภาพ
คุณสามารถใช้รูปภาพเป็นส่วนหัวเพื่ออธิบายเนื้อหาภายในการ์ดและทำให้สวยงามมากขึ้น
คลิกที่ ประเภทส่วนหัว แล้วเลือก รูปภาพ
คลิกที่ เพิ่มรูปภาพ ปุ่ม
เลือกภาพของคุณ การเปลี่ยนแปลงทั้งหมดจะถูกบันทึกโดยอัตโนมัติ
ตัวเลือกเลย์เอาต์
จำนวนรายการต่อแถว - ควบคุมจำนวนรายการที่แสดงในแต่ละแถว:
- 3 รายการต่อแถว
- 2 รายการต่อแถว
- 1 รายการต่อแถว
คู่มือรูปภาพ
เพื่อให้เนื้อหาของคุณแสดงผลได้อย่างถูกต้อง เราแนะนำให้สร้างรูปภาพที่มี ความสูง 480px และ ความกว้าง 1324px โดยทำตาม คู่มือพื้นที่ที่มองเห็นได้ ด้านล่าง คุณสามารถมั่นใจได้ว่าเนื้อหาของคุณจะไม่ถูกตัดออก
คู่มือพื้นที่ที่มองเห็นได้
รูปภาพหลักมีขนาดความสูง 480px และความกว้าง 1324px
ในกรณีที่มี 3 Link Grids ต่อแถว พื้นที่ที่มองเห็นจะมีขนาด 480px ในด้าน ความสูง และ 860px ในด้านความกว้าง พื้นที่ที่มองเห็นนี้จะถูกจัดกึ่งกลางภายในมิติหลัก โปรดดูภาพด้านล่างเพื่อความเข้าใจที่ชัดเจนยิ่งขึ้น:
เพื่อความชัดเจน เนื้อหาหลักหรือโลโก้ควรถูกจัดวางภายในพื้นที่ที่กำหนดนี้
โปรดดูตัวอย่างสาธิตด้านล่างเกี่ยวกับภาพหน้าปกและลักษณะการทำงานของมัน
มาร์กดาวน์
นี่คือวิธีสร้างแท็บในเอกสารของคุณโดยใช้โค้ดมาร์กดาวน์:
สร้าง Link Grid เริ่มต้นด้วยบรรทัด ::::link-array .
เพิ่มการ์ดลิงก์ เนื้อหาแต่ละรายการของ Link Grid จะอยู่ระหว่าง :::link-array-item และ ::: .
เลือก headerType คุณมีตัวเลือกสำหรับหัวข้อสองแบบ:
- IMAGE: แสดงภาพเป็นพื้นหลังของหัวข้อ
- COLOR: ให้คุณใช้สีแบบทึบเป็นพื้นหลังของหัวข้อ
เพิ่มแอตทริบิวต์ที่เหมาะสม
สำหรับ IMAGE หัวข้อ:
- เพิ่ม URL ของรูปภาพเป็นค่าในแอตทริบิวต์ headerImage .
- ตัวอย่าง: headerImage="https://placehold.co/600x400")
สำหรับ COLOR หัวข้อ:
- กำหนดค่าสีที่ต้องการโดยใช้โค้ดสี hex ในแอตทริบิวต์ headerColor .
- ตัวอย่าง: headerColor="#ff00FF"
เพิ่มเนื้อหาภายในการ์ดลิงก์ของคุณ
🚨 โปรดทราบ!
เมื่อใช้ไวยากรณ์ triple colon (:::) เพื่อสร้างองค์ประกอบ markdown แบบซ้อน โปรดตรวจสอบว่าทุกองค์ประกอบแม่ด้านบนมีเครื่องหมายโคลอนเพิ่ม (:) ก่อน triple colon เปิดของมันด้วย
## Link Array - Example
::::link-array
:::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"}
- list item 1
- list item 2
:::
:::link-array-item{headerType="COLOR" headerColor="#ff00FF"}
- [ ] unchecked list box
- [x] checked list box
:::
::::ผลลัพธ์อยู่ที่นี่:
- รายการ 1
- รายการ 2
กล่องรายการที่ไม่ถูกเลือก
กล่องรายการที่ถูกเลือก
ตรวจสอบ ใช้ทางลัด Markdown หน้าเพื่อดูทางลัด Markdown เพิ่มเติมสำหรับบล็อกอื่นๆ
ตัวอย่าง
ตัวอย่าง? สำหรับ Link Grid หรือ? มันเหมือนกับการหาน้ำในมหาสมุทร คุณหลีกเลี่ยงไม่ได้ เอกสารของเราเต็มไปด้วยสิ่งเหล่านี้! ในหน้านี้มี 8 รายการ พร้อมรูปภาพ
CSS แบบกำหนดเอง
ตลอดประสบการณ์อันยาวนานของเรา เราทุ่มเทในการช่วยลูกค้าปรับแต่งเอกสารให้สอดคล้องกับความต้องการเฉพาะของแต่ละคน นอกจากนี้ เรายังได้มอบความช่วยเหลืออันมีค่า ซึ่งเราเชื่อว่าจะเป็นประโยชน์อย่างยิ่งต่อคุณในการสร้างเอกสารที่ยอดเยี่ยมสำหรับผลิตภัณฑ์ของคุณ
ตั้งค่าลิงก์ให้ตรึงอยู่ด้านล่าง
ตั้งค่าลิงก์ภายใน Link Grid ของคุณให้ตรึงอยู่ที่ด้านล่างของการ์ด
<style>
.ab-link-block-content-wrap .ab-link {
position: absolute;
bottom: 0;
}
</style>
ค้นหาบล็อกอื่น ๆ
ค้นพบวิธีใหม่ ๆ และบล็อกต่าง ๆ เพื่อสร้างหน้าเอกสารที่สวยงามและใช้งานได้จริง
ต้องการความช่วยเหลือ? ⬇️
ใช้ สีฟ้า ไอคอนแชท ที่มุมขวาล่าง
หรือใช้ AI Chat (จากช่องค้นหา) เพื่อรับคำตอบอย่างรวดเร็ว
ความเห็นของคุณมีความสำคัญ
ใช้แบบฟอร์มด้านล่างเพื่อให้ข้อเสนอแนะได้โดยไม่ระบุตัวตน
หรือถามคำถามใน ส่วน Q&A แล้วทีมงานหรือ AI ของเราจะให้คำตอบแก่คุณ