ตัวเลือกแถว
Visual Composer ให้ตัวเลือกแก่คุณในการจัดการกับคุณสมบัติของแถวคอนเทนเนอร์ และมีผลกับคอลัมน์ทั้งหมดที่อยู่ในนั้นทันที คุณสามารถควบคุมความกว้างของแถว/คอลัมน์ ช่องว่างระหว่างคอลัมน์ ตำแหน่งคอลัมน์และเนื้อหา และอื่นๆ ได้ด้วยการคลิกเพียงไม่กี่ครั้ง
ความกว้างของแถวและคอลัมน์
ตามค่าเริ่มต้น ความกว้างของแถวถูกกำหนดโดยธีม WordPress ของคุณและปรับให้เข้ากับพื้นที่เนื้อหา แต่บางครั้งคุณต้องการให้แถวของคุณเต็มความกว้างของหน้าจอเบราว์เซอร์ของคุณ (เช่น คุณต้องการให้มีรูปภาพเด่นที่มีบล็อก "Call to Action")
ในการควบคุมแถว element (เลือกแก้ไขแถว) คุณสามารถดูความกว้างของแถวด้วยตัวเลือกต่อไปนี้ :
- Boxed : ค่าเริ่มต้นเมื่อแถวและคอลัมน์จัดแนวกับส่วนเนื้อหาของธีม WordPress ของคุณ
- Stretched Row : แถวจะเป็นความกว้างเต็มของหน้าจอเบราว์เซอร์ของคุณ ในขณะที่คอลัมน์จะอยู่ในแนวเดียวกับพื้นที่เนื้อหา (เช่น ภาพพื้นหลังของแถวจะเต็มความกว้าง ในขณะที่ชื่อในคอลัมน์จะอยู่ในกรอบ)
- Stretched Row and Column : แถวและคอลัมน์ทั้งหมดในแถวจะมีความกว้างเต็ม (เช่น ส่วนใหญ่ในแถวและคอลัมน์ที่ขยายจะเป็นความกว้างเต็มของหน้าจอเบราว์เซอร์ของคุณ)
ช่องว่างของคอลัมน์
ช่องว่างของคอลัมน์ช่วยให้คุณควบคุมช่องว่างระหว่างคอลัมน์ภายในแถวได้. คุณสามารถควบคุมช่องว่างระหว่างคอลัมน์ทั้งหมดในแถวได้โดยใช้ตัวเลือกแถว
ค่าเริ่มต้นของช่องว่างระหว่างคอลัมน์คือ 30 แต่คุณสามารถแทรกตัวเลขใดๆ เพื่อเปลี่ยนแปลงได้ หากคุณต้องการลบช่องว่างระหว่างคอลัมน์ เพียงป้อน 0 ในค่าช่องว่างคอลัมน์
ความสูงของแถว
ตัวเลือกความสูงเต็มช่วยให้คุณสร้างแถวใดก็ได้ให้เป็นความสูงเต็มหน้าจอเบราว์เซอร์ของคุณ ซึ่งหมายความว่าความสูงขั้นต่ำของแถวของคุณจะเท่ากับความสูงเต็มของหน้าจอ และจะเพิ่มขึ้นหากมีเนื้อหามากกว่าความสูงของหน้าจอ
คุณสามารถใช้ตัวเลือกเต็มความสูงได้หากต้องการให้แน่ใจว่าแถวเดียวเท่านั้นที่สามารถมองเห็นได้ในขณะนั้นเพื่อขจัดสิ่งรบกวน (เช่น แถวรูปภาพที่มีชื่อและปุ่ม "Call to Action")
ตำแหน่งคอลัมน์
เมื่อคุณตั้งค่าแถวให้เต็มความสูงแล้ว คุณจะมีตัวเลือกในการควบคุมตำแหน่งแนวตั้งของคอลัมน์ภายในแถวนี้ ตามค่าเริ่มต้น ทุกคอลัมน์จะมีตำแหน่งแนวตั้ง: ชิดด้านบน (top) อย่างไรก็ตาม บางครั้งคุณอาจต้องวางเนื้อหาไว้ตรงกลางหรือด้านล่างของแถว หรือตั้งค่าคอลัมน์ให้เป็นความสูงของหน้าจอเบราว์เซอร์ด้วย
สรุป มีตำแหน่งคอลัมน์ต่อไปนี้สำหรับแถวเต็มความสูง :
- ด้านบน
- กึ่งกลาง
- ด้านล่าง
- ความสูงเต็ม
หมายเหตุ : แถวแรกของเลย์เอาต์ของคุณอาจมีค่าความสูงน้อยกว่าเล็กน้อย เนื่องจากจะสงวนพื้นที่สำหรับส่วนหัวของธีม WordPress ของคุณ ผลลัพธ์คือเมื่อคุณเริ่มเลื่อนลง แถวถัดไปของเค้าโครงของคุณจะปรากฏขึ้น
คอลัมน์ความสูงเท่ากัน
ตัวเลือกคอลัมน์ความสูงเท่ากันช่วยให้คุณสามารถตั้งค่าคอลัมน์ทั้งหมดภายในแถวให้มีความสูงเท่ากัน ความสูงจะถูกคำนวณโดยอัตโนมัติโดยจัดแนวให้อยู่ในคอลัมน์ที่สูงที่สุดในแถว หากต้องการใช้คอลัมน์ที่มีความสูงเท่ากัน ให้เปิดใช้งานการควบคุมสลับคอลัมน์ความสูงเท่ากันในตัวเลือกแถว
คุณสามารถใช้คอลัมน์ที่มีความสูงเท่ากันได้ ตัวอย่างเช่น เพื่อเติมคอลัมน์ด้วยสีพื้นหลัง และตรวจสอบให้แน่ใจว่าคอลัมน์ทั้งหมดมีความสูงเท่ากันเพื่อให้มีการออกแบบเลย์เอาต์ที่สวยงาม
ตำแหน่งเนื้อหาในคอลัมน์
Visual Composer ช่วยให้คุณควบคุมตำแหน่งแนวตั้งของเนื้อหาภายในคอลัมน์ของแถวบางแถวได้โดยตรงจากตัวเลือกแถว มีตำแหน่งเนื้อหาดังต่อไปนี้ :
- ด้านบน (ค่าเริ่มต้น)
- กึ่งกลาง
- ด้านล่าง
หมายเหตุ : ขอแนะนำให้รวมตัวเลือกนี้ร่วมกับการสลับความสูงเท่ากับคอลัมน์ เพื่อให้แน่ใจว่าเนื้อหาทั้งหมดภายในคอลัมน์ทั้งหมดจะถูกจัดแนวในแนวตั้งตามความต้องการของคุณ
Sticky Row
Visual Composer มาพร้อมกับตัวเลือกในการตั้งค่าแถว คอลัมน์ และส่วนต่างๆ. ตัวเลือก sticky หมายความว่าคอนเทนเนอร์ (ที่มีเนื้อหาทั้งหมดอยู่ภายใน) จะคงอยู่ที่ด้านบนสุดของหน้าและผู้เข้าชมจะมองเห็นได้เสมอ
คุณสามารถใช้ตัวเลือกแถวแบบ sticky เพื่อสร้างเมนูแบบ sticky ปุ่ม 'Call to Action' หรือรูปแบบไดนามิก (การนำเสนอ) โดยการเน้นส่วนของเนื้อหา ในการเข้าถึงตัวเลือก sticky :
- เปิดแถว , คอลัมน์ หรือหน้าต่างส่วนแก้ไข
- นำทางไปที่ ‘Sticky’
- เปิดใช้งาน stickiness toggle
Visual Composer จะแสดงลักษณะพิเศษที่ควบคุม/ปรับคอนเทนเนอร์ stickiness โดยอัตโนมัติ :
- Margin-top : ควบคุมพื้นที่จากด้านบน (เป็น pixels) ที่เป็นคอนเทนเนอร์ sticky
- Z-index : ควบคุมส่วนลึกของ element เพื่อตั้งค่าให้อยู่ด้านบนหรือด้านล่างของคอนเทนเนอร์ต่อไป
- Relate to parent : ใช้ตัวเลือก sticky ภายใน element หลักเท่านั้น (เช่น หากคุณตั้งค่าแถว sticky ในส่วนและเปิดใช้งานการสลับนี้ แถวที่ sticky จะทำงานเฉพาะภายในส่วน)
- Show on sticky : element จะแสดงก็ต่อเมื่อ sticky (เช่น สร้างปุ่ม 'Call to Action’ ที่ปรากฏเฉพาะเมื่อคุณเลื่อนลงไปยังจุดใดจุดหนึ่งบนไซต์ของคุณ)
ตัวเลือก Sticky Row เป็นเครื่องมือที่สมรรถภาพมากที่สามารถใช้เพื่อวัตถุประสงค์ต่างๆ เช่น ปรับปรุงประสบการณ์ผู้ใช้ สร้างเค้าโครงแบบไดนามิก เพิ่ม เปลี่ยน และสร้างโอกาสในการขาย
ด้วยการใช้ Sticky Row คุณสามารถสร้างการออกแบบประเภทต่างๆ ได้ (เช่น ส่วนหัว Sticky)