วิธีการจัดแนวแนวตั้งกับระบบเลย์เอาต์ FlexBox ของ Divi 5

การสร้างเลย์เอาต์ที่สมดุลและตอบสนองเป็นสิ่งจำเป็นในการออกแบบเว็บที่ทันสมัยและระบบเค้าโครง FlexBox ใหม่ของ Divi 5 ทำให้ง่ายขึ้นกว่าเดิมเพื่อให้ได้การจัดแนวแนวตั้ง คุณลักษณะใหม่ที่ทรงพลังนี้ช่วยให้ผู้ใช้ Divi สามารถออกแบบเลย์เอาต์แบบไดนามิกที่ยืดหยุ่นได้ซึ่งให้การควบคุมการวางตำแหน่งแนวตั้งที่สมบูรณ์ ไม่ว่าจะจัดเรียงข้อความภายในส่วนการปรับสมดุลเนื้อหาในแถวหลายคอลัมน์หรือการสร้างการออกแบบที่ตอบสนอง Divi 5 ทำให้กระบวนการง่ายขึ้นด้วยการควบคุมที่ใช้งานง่ายสร้างขึ้นโดยตรงในตัวสร้างภาพ

ในโพสต์นี้เราจะแนะนำคุณผ่านขั้นตอนเพื่อหลักการจัดแนวแนวตั้งให้ตัวอย่างในโลกแห่งความเป็นจริงและเสนอเคล็ดลับในการสร้างเค้าโครงที่ตอบสนองและขัดเงา ลองสำรวจว่าระบบเค้าโครง FlexBox ของ Divi 5 สามารถเปลี่ยนวิธีการของคุณเป็นแนวตั้งได้อย่างไร

ทำความเข้าใจระบบเค้าโครง FlexBox ของ Divi 5

FlexBox หรือเค้าโครงกล่องที่ยืดหยุ่นเป็นรูปแบบเค้าโครง CSS ที่ออกแบบมาเพื่อลดความซับซ้อนของการจัดเรียงขององค์ประกอบภายในคอนเทนเนอร์ทำให้เหมาะสำหรับการจัดแนวแนวนอนและแนวตั้ง ซึ่งแตกต่างจากวิธีการดั้งเดิมเช่นลอยหรือระยะขอบ FlexBox ให้วิธีการที่ตรงไปตรงมาในการจัดระเบียบเนื้อหา ช่วยให้องค์ประกอบสามารถปรับขนาดลำดับและการจัดตำแหน่งแบบไดนามิกตามขนาดของคอนเทนเนอร์และวิวพอร์ตเพื่อให้แน่ใจว่าเลย์เอาต์นั้นสอดคล้องและตอบสนองได้ตลอดขนาดหน้าจอทั้งหมด

ด้วย FlexBox คุณสามารถตั้งศูนย์เนื้อหาได้อย่างง่ายดายแจกจ่ายพื้นที่อย่างสม่ำเสมอหรือสแต็กองค์ประกอบในลำดับที่เฉพาะเจาะจง ความยืดหยุ่นนี้ทำให้เป็นสิ่งจำเป็นสำหรับนักออกแบบเว็บไซต์และ Divi 5 ควบคุมพลังเพื่อให้ผู้ใช้สามารถสร้างเลย์เอาต์ที่ซับซ้อนโดยไม่จำเป็นต้องมีความรู้ขั้นสูงเกี่ยวกับ CSS

Divi 5 รวม flexbox อย่างไร

Divi 5 เพิ่งเปิดตัวระบบเค้าโครง FlexBox ระบบนี้รวม FlexBox เข้ากับ Visual Builder โดยตรงช่วยให้ผู้ใช้สามารถควบคุมส่วนแถวคอลัมน์และการจัดเรียงโมดูลด้วยการตั้งค่าที่ใช้งานง่าย

คุณสมบัติที่สำคัญรวมถึงเทมเพลตแถวใหม่ที่หลากหลายตั้งแต่คอลัมน์เดี่ยวไปจนถึงส่วนหลายแถวทำให้ง่ายขึ้นกว่าเดิมในการสร้างเลย์เอาต์ใน Divi

การควบคุม FlexBox ของ Divi 5 ช่วยให้คุณสามารถควบคุมทิศทางของเลย์เอาต์ของคุณปรับช่องว่างในแนวนอนและแนวตั้งปรับเนื้อหาไปยังจุดเริ่มต้นกลางหรือสิ้นสุดเปิดใช้งานการห่อและอื่น ๆ

คุณลักษณะโครงสร้างคอลัมน์การเปลี่ยนแปลงใหม่ของ Divi 5 ช่วยให้คุณสามารถควบคุมได้มากขึ้นว่าคอลัมน์ทำงานบนอุปกรณ์ขนาดเล็กได้อย่างไร คุณสามารถเปลี่ยนจำนวนคอลัมน์หรือจัดเรียงใหม่ได้อย่างง่ายดายทำให้การออกแบบดูดีในทุกขนาดหน้าจอ

Divi 5 ย้ายออกจากส่วนพิเศษและส่วนเต็มไปด้วยขณะนี้แถวสามารถซ้อนกันได้ภายในอีกกลุ่มหนึ่งเพื่อสร้างการออกแบบที่ซับซ้อนตอบสนองโดยไม่ต้องพึ่งพาประเภทส่วนที่ล้าสมัย ความก้าวหน้าเหล่านี้ทำให้ระบบเลย์เอาต์ FlexBox ของ Divi 5 เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ทันสมัยและปรับได้โดยตรงภายในตัวสร้าง

การตั้งค่าการจัดตำแหน่งแนวตั้งใน Divi 5

ระบบเลย์เอาต์ FlexBox ของ Divi 5 ได้รับการรวมเข้ากับตัวสร้างภาพอย่างราบรื่นทำให้ผู้ใช้สามารถสร้างการออกแบบที่ยืดหยุ่นและตอบสนองได้ ในการเริ่มต้นให้เปิดตัวสร้างภาพบนหน้าใหม่หรือที่มีอยู่และเพิ่มส่วนและแถว เราได้สร้างเลย์เอาต์ทั้งหมดเพื่อให้เราสามารถเดินผ่านขั้นตอนเพื่อจัดเรียงรายการในแนวตั้งในสถานการณ์ต่าง ๆ

การจัดแนวแนวตั้งในส่วน

ในการตั้งค่าของส่วนนำทางไปยัง แท็บการออกแบบ และค้นหาตัวเลือก เลย์เอาต์ ซึ่งคุณจะพบตัวควบคุม FlexBox

ตรวจสอบให้แน่ใจว่า Flex ถูกเลือกภายใต้ สไตล์เลย์เอาต์ สิ่งนี้ทำให้มั่นใจได้ว่า FlexBox เปิดใช้งานสำหรับส่วน

โดยค่า เริ่มต้นเริ่มต้น (Flex-Start) ถูกเลือกภายใต้ เนื้อหาที่เหมาะสม สิ่งนี้จัดเรียงรายการทั้งหมดในช่วงเริ่มต้นของคอนเทนเนอร์ ในตัวอย่างนี้เมื่อต้องการที่จะอยู่ตรงกลางรายการในแนวตั้งคุณสามารถเลือกที่จะจัดตำแหน่งให้เข้ากับ ศูนย์กลาง พื้นที่รอบ ๆ หรือ พื้นที่อย่างสม่ำเสมอ เนื่องจากเรามีแถวเดียวที่มีแถวซ้อนกันรวมองค์ประกอบการออกแบบทั้งหมดในส่วนของเราจะอยู่ตรงกลางในแนวตั้งด้วยตัวเลือกใด ๆ ที่กล่าวถึงข้างต้น

การจัดแนวแนวตั้งในแถว

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

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

การจัดแนวแนวตั้งในส่วนหลายแถว

ในสถานการณ์นี้เรามีสามแถวในส่วนต่างๆรวมถึงแถวคอลัมน์เดียวและสองแถวสามคอลัมน์ เราจะใช้การตั้งค่า เนื้อหา Justify เพื่อจัดเรียงเนื้อหาทั้งหมดในแนวตั้งภายในแถว

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

ช่องว่างระหว่าง การกระจายแถวอย่างสม่ำเสมอตามแนวแกนหลัก (แนวตั้ง) แถวแรกจะถูกล้างออกกับด้านบนของส่วนแถวสุดท้ายที่อยู่ด้านล่างและแถวใด ๆ ในระหว่างนั้นจะมีจำนวนพื้นที่เท่ากันแยกออก พื้นที่รอบ ๆ กระจายแถวที่มีพื้นที่เท่ากันรอบ ๆ แต่ละรายการ

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

การจัดแนวแนวตั้งในกลุ่มโมดูล

ระบบ FlexBox ของ Divi 5 ยังช่วยลดความซับซ้อนของการจัดตำแหน่งแนวตั้งภายในกลุ่มโมดูลโดยเฉพาะอย่างยิ่งเมื่อใช้คุณสมบัติเช่นตัวสร้างลูปสำหรับเนื้อหาแบบไดนามิก พิจารณากลุ่มโมดูลที่แสดงโพสต์บล็อกด้วยรูปภาพชื่อโพสต์โพสต์ข้อความที่ตัดตอนมาและปุ่ม หากไม่มีการจัดตำแหน่งที่เหมาะสมองค์ประกอบเช่นปุ่มอาจปรากฏขึ้นตรงข้ามข้ามคอลัมน์ ในเวอร์ชัน Divi ก่อนหน้านี้ต้องใช้ความสูงของคอลัมน์เท่ากันและ CSS ที่กำหนดเอง Divi 5 ปรับปรุงกระบวนการนี้ด้วย FlexBox

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi และเราจะส่งสำเนาแพ็คเค้าโครงหน้า Landing Page ของ Divi Landing ให้คุณรวมถึงแหล่งข้อมูล Divi Tips และกลอุบายอื่น ๆ อีกมากมาย ติดตามและคุณจะเป็นอาจารย์ Divi ในเวลาไม่นาน หากคุณสมัครเป็นสมาชิกเพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างและคลิกดาวน์โหลดเพื่อเข้าถึง Layout Pack

การดาวน์โหลด

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

เคล็ดลับสำหรับการจัดตำแหน่งแนวตั้งที่ตอบสนองได้

ระบบเค้าโครง FlexBox ของ Divi 5 ทำให้การจัดแนวเนื้อหาในแนวตั้งง่าย แต่มีเคล็ดลับที่ต้องพิจารณา Divi 5 นำเสนอเครื่องมือที่มีประสิทธิภาพสำหรับการออกแบบที่ตอบสนองได้ช่วยให้คุณปรับแต่งแนวตั้งได้อย่างละเอียดบนอุปกรณ์ทั้งหมด ไม่ว่าคุณจะเป็นศูนย์กลางเนื้อหาในส่วนของฮีโร่หรือการจัดเรียงปุ่มในรูปแบบหลายคอลัมน์เคล็ดลับต่อไปนี้จะช่วยให้คุณใช้ประโยชน์จากคุณสมบัติของ Divi 5 เพื่อรักษาเลย์เอาต์มืออาชีพที่สอดคล้องกัน

ใช้จุดพักที่ตอบสนองได้ของ Divi 5

ระบบ FlexBox ของ Divi 5 ช่วยให้คุณปรับแต่งการสั่งซื้อโมดูลและการจัดตำแหน่งสำหรับขนาดหน้าจอที่แตกต่างกันเพื่อให้มั่นใจว่าเลย์เอาต์ของคุณปรับให้เข้ากับขนาดหน้าจอทั้งหมด ใน Visual Builder คุณสามารถใช้จุดพักที่ตอบสนองได้เจ็ดแบบ เพื่อควบคุมว่าเลย์เอาต์ปรากฏอย่างไรในอุปกรณ์

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

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

ใช้ตัวแปรการออกแบบของ Divi 5

คุณสมบัติตัวแปรการออกแบบของ Divi 5 เหมาะสำหรับการรักษาระยะห่างที่สอดคล้องกันและการจัดตำแหน่งในมุมมองที่ตอบสนอง ตัวแปรการออกแบบช่วยให้คุณสามารถกำหนดค่าที่นำกลับมาใช้ใหม่ได้สำหรับคุณสมบัติเช่นการขยายระยะขอบและขนาดตัวอักษรเพื่อให้มั่นใจถึงความสม่ำเสมอในเลย์เอาต์ของคุณ สำหรับการจัดแนวแนวตั้งคุณสามารถสร้างตัวแปรสำหรับการขยายแนวตั้งเพื่อสร้างระยะห่างภายในแถวหรือส่วนต่างๆ ตัวอย่างเช่นตั้งค่าตัวแปรการออกแบบที่มีชื่อว่าการขยายแนวตั้งเป็น 30px ในตัวจัดการตัวแปรของ Divi

ในการใช้ตัวแปรกับแถวให้ไปที่แท็บการออกแบบให้คลิกเมนูแบบเลื่อนลงระยะห่างและคลิกไอคอนเนื้อหาแบบไดนามิกเพื่อใช้งาน

FlexBox ทำให้การจัดแนวแนวตั้งง่าย

ระบบเลย์เอาต์ FlexBox ของ Divi 5 ทำให้การจัดแนวแนวตั้งง่ายขึ้นโดยนำเสนอโซลูชันที่ยืดหยุ่นและตอบสนองได้สำหรับการสร้างเลย์เอาต์ขัดเงา ด้วยการรวม FlexBox เข้ากับ Visual Builder Divi 5 ช่วยให้ผู้ใช้สามารถควบคุมการจัดตำแหน่งของส่วนแถวคอลัมน์และกลุ่มโมดูลที่มีความแม่นยำทั้งหมดโดยไม่จำเป็นต้องมีความรู้ขั้นสูงเกี่ยวกับ CSS คุณสมบัติของมันให้ความมั่นใจในการออกแบบที่สอดคล้องและเป็นมืออาชีพในทุกอุปกรณ์ ไม่ว่าคุณจะเป็นศูนย์กลางเนื้อหาการจัดกลุ่มโมดูลแบบไดนามิกหรือการสร้างเลย์เอาต์หลายแถว Divi 5 ทำให้กระบวนการง่ายขึ้นในขณะที่ให้ผลลัพธ์

ดาวน์โหลด Divi 5 Alpha และทดลองกับระบบเค้าโครง FlexBox ในโครงการใหม่