กลุ่ม คือกล่องที่ใส่บล็อกอื่นไว้ข้างในและจัดเรียงให้ ใช้เพื่อวางสิ่งต่าง ๆ เคียงข้างกัน สร้างคอลัมน์ หรือให้บางส่วนของส่วนนั้นมีพื้นหลังและเส้นขอบเป็นของตัวเอง
ใช้กลุ่มได้ที่ไหนบ้าง
หลายส่วนรองรับบล็อกกลุ่ม ได้แก่ ส่วนท้าย จดหมายข่าว ส่วนเปิดหน้า สไลด์ของสไลด์โชว์ คำถามที่พบบ่อย ก่อนและหลัง รีวิว ติดต่อ 404 การยืนยันคำสั่งซื้อ แถวย่อ/ขยาย และพื้นที่ข้อความของรายการสินค้า เช่น สินค้าแนะนำและคอลเลกชัน แต่ละส่วนจะกำหนดเองว่าบล็อกใดใส่ในกลุ่มได้ และรับกลุ่มได้กี่กลุ่ม
หากต้องการเพิ่มในตัวสร้างร้านค้า ให้เลือกส่วน คลิก เพิ่มบล็อกใหม่ แล้วเลือก กลุ่ม จากนั้นลากบล็อกอื่นเข้าไปในกลุ่ม บางส่วน (ส่วนท้าย จดหมายข่าว รีวิว) ยังให้คุณใส่กลุ่มไว้ในกลุ่มได้ด้วย
เลย์เอาต์
- ความกว้าง: เต็มพื้นที่ ใช้พื้นที่ว่างและแบ่งเท่า ๆ กันกับกลุ่มแบบเต็มพื้นที่อื่นที่อยู่ข้างกัน พอดี กว้างเท่ากับเนื้อหาข้างในเท่านั้น กำหนดเอง ตั้ง ความกว้างที่กำหนดเอง เป็นเปอร์เซ็นต์
- ทิศทาง: แนวตั้ง เรียงบล็อกซ้อนกัน แนวนอน วางบล็อกเคียงข้างกัน บล็อกที่วางเคียงข้างกันจะขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ
- เรียงแนวตั้งบนมือถือ (เฉพาะแนวนอน): บนมือถือบล็อกจะเรียงซ้อนกันแทน
- ตำแหน่ง: จัดบล็อกในแนวบนล่าง (ด้านบนกึ่งกลางด้านล่าง)
- การจัดแนว: จัดบล็อกในแนวซ้ายขวา (ซ้ายกึ่งกลางขวา)
- เว้นระยะเท่ากัน: กระจายบล็อกให้มีช่องว่างระหว่างกันเท่า ๆ กัน มีให้เลือกตามทิศทางที่บล็อกเรียงตัว: ในตำแหน่งสำหรับกลุ่มแนวตั้ง และในการจัดแนวสำหรับกลุ่มแนวนอน
รูปลักษณ์
- ใช้ชุดสีของส่วนหลัก: เปิดอยู่โดยค่าเริ่มต้น กลุ่มจึงใช้สีของส่วน ปิดแล้วเลือก ชุดสี เพื่อให้กลุ่มมีสีพื้นหลังและสีข้อความเป็นของตัวเอง
- เส้นขอบ: ไม่มี หรือ ทึบ เมื่อเลือกทึบจะมี ความหนาเส้นขอบ (1 ถึง 20 พิกเซล) และ ความทึบเส้นขอบ เพิ่มเข้ามา สีคือสีเส้นขอบของชุดสี
- ความโค้งมุม: ทำให้มุมโค้งมน ตั้งแต่ 0 ถึง 100 พิกเซล
- ชั้นสีทับพื้นหลัง: เพิ่มชั้นสีทับบนพื้นหลัง ตั้งค่า สีซ้อนทับ และ สไตล์ซ้อนทับ: ทึบ หรือ ไล่ระดับสี ที่จางไปจนใส โดยมี ทิศทางไล่ระดับสี เป็น ขึ้น หรือ ลง มีประโยชน์ในการทำให้อ่านข้อความบนรูปในส่วนเปิดหน้าได้ง่าย
ระยะห่าง
ระยะห่าง คือช่องว่างระหว่างบล็อกภายในกลุ่ม (0 ถึง 100 พิกเซล) ระยะขอบใน คือช่องว่างระหว่างขอบของกลุ่มกับบล็อกข้างใน ในแต่ละด้าน
สูตรสำเร็จ
- สองปุ่มเคียงข้างกัน ในส่วนเปิดหน้า: ใส่ทั้งสองปุ่มไว้ในกลุ่มแนวนอนที่มีระยะห่างเล็กน้อย
- ส่วนท้ายสามคอลัมน์: กลุ่มแนวนอนที่มีรายการแบบเต็มพื้นที่สามรายการข้างใน และเปิดเรียงแนวตั้งบนมือถือ
- การ์ด: กลุ่มแนวตั้งที่มีชุดสีของตัวเอง เส้นขอบแบบทึบ ความโค้งมุม และระยะขอบใน
- ข้อความชิดซ้าย ปุ่มชิดขวา: กลุ่มแนวนอนที่ตั้งการจัดแนวเป็นเว้นระยะเท่ากัน
ควรรู้
- คอลัมน์หนึ่งกว้างเกินต้องการ: กลุ่มแบบเต็มพื้นที่สองกลุ่มจะแบ่งพื้นที่เท่ากัน ตั้งกลุ่มหนึ่งเป็นกำหนดเองแล้วใส่เปอร์เซ็นต์
- กลุ่มไม่แสดง: กลุ่มที่ไม่มีบล็อก หรือมีแต่บล็อกที่ถูกซ่อน จะไม่แสดงบนร้านค้า
- ไม่มีกลุ่มในรายการบล็อก: ส่วนนั้นไม่รับกลุ่ม หรือมีกลุ่มครบจำนวนสูงสุดแล้ว
- การตั้งค่าข้อความ ปุ่ม และเส้นคั่นอยู่ใน บล็อกกลุ่ม ข้อความ ปุ่ม และเส้นคั่น: การตั้งค่าคอมโพเนนต์เลย์เอาต์ทำงานอย่างไร