ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับระบบเค้าโครง FlexBox ของ Divi 5

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

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

เริ่มต้นกันเถอะ

FlexBox คืออะไร?

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

สมัครสมาชิกช่อง YouTube ของเรา

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

การรวม FlexBox ของ Divi 5

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

Divi 4 vs Divi 5

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

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

คุณสมบัติที่สำคัญของระบบเค้าโครง FlexBox ของ Divi 5

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

เลย์เอาต์ใด ๆ ไม่มีขีด จำกัด

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

นักออกแบบสามารถปรับแต่งตำแหน่งโมดูลและสไตล์เพื่อให้เหมาะกับขนาดหน้าจอเฉพาะ

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

การวางตำแหน่งและการจัดตำแหน่งขั้นสูง

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

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

ปรับปรุงการควบคุมระยะห่างและการห่อ

แท็บปรับขนาดของ Divi 5 เสนอตัวเลือกเช่น Grow to Fill ลดลงเพื่อให้พอดีและกำหนดเองทำให้นักออกแบบควบคุมการปรับขนาดและระยะห่างอย่างชาญฉลาด

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

การรวมเข้ากับคุณสมบัติ Divi 5 อื่น ๆ

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

จากบล็อกถึง Flex

ระบบเค้าโครง FlexBox ใน Divi 5 เป็นการอัพเกรดที่ชัดเจนจากรูปแบบเค้าโครงที่ใช้บล็อกใน Divi 4. การจัดวางบล็อกองค์ประกอบสแต็กในลำดับที่แน่นอนซึ่งทำให้การปรับเปลี่ยนง่ายกว่าที่ควรจะเป็น

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

วิธีใช้ระบบเลย์เอาต์ FlexBox ของ Divi 5

Divi 5 ทำให้ Flexbox ใช้สายง่าย มันทำงานได้อย่างตรงไปตรงมาใน Divi 4 มีตัวเลือกเพิ่มเติม คุณสามารถเลือกแถวที่มีคอลัมน์ที่เท่าเทียมกันคอลัมน์ออฟเซ็ตกริดหลายแถวหรือกริดหลายคอลัมน์

เช่นเดียวกับใน Divi 4 ให้เลือกโมดูลที่จะวางในคอลัมน์แรก

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

คุณสามารถควบคุมระยะห่างระหว่างคอลัมน์โดยการปรับช่องว่าง แนวนอน และ แนวตั้ง

ในฟิลด์ ทิศทางเลย์เอาต์ คุณสามารถเลือกที่จะแสดงเนื้อหาของแถวจากซ้ายไปขวา (แถว), ขวาไปซ้าย (แถว), คอลัมน์ (การตั้งค่าเริ่มต้น) และคอลัมน์ย้อนกลับ

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

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

สุดท้าย การห่อเลย์เอาต์ (Flex-wrap ใน CSS) ช่วยให้คุณสามารถควบคุมโดยตรงว่าส่วนแถวและคอลัมน์ของคุณทำงานอย่างไร Wrap บอกให้เบราว์เซอร์อนุญาตให้รายการในคอนเทนเนอร์ย้ายไปยังบรรทัดใหม่หากมีพื้นที่แนวนอนไม่เพียงพอที่จะพอดีกับพวกเขาในบรรทัดเดียว การห่อย้อนกลับทำสิ่งเดียวกัน แต่กลับลำดับของรายการ

ระบบเค้าโครง FlexBox ของ Divi 5 ให้เครื่องมือในการจัดเรียงองค์ประกอบที่คุณต้องการโดยไม่ต้องต่อสู้กับรหัส

ประโยชน์สำหรับนักออกแบบเว็บไซต์และนักพัฒนา

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

1. การสร้างเลย์เอาต์ที่ซับซ้อนได้อย่างง่ายดาย

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

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

2. การตอบสนองที่เพิ่มขึ้น

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

ฟีเจอร์นี้ช่วยให้คุณสามารถจัดเรียงคอลัมน์ใหม่สำหรับมุมมองมือถือโดยไม่ต้องมีส่วนร่วมในส่วนหรือใช้ CSS ที่กำหนดเอง

3. เสรีภาพในการสร้างสรรค์

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

อินเทอร์เฟซของระบบทำให้ทุกคนสามารถออกแบบการออกแบบระดับมืออาชีพได้ในขณะที่การควบคุมขั้นสูงให้ความแม่นยำสำหรับผู้ใช้ขั้นสูงมากขึ้น

4. ประสิทธิภาพและความยืดหยุ่น

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

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

ระบบเลย์เอาต์ FlexBox กำหนดสิ่งที่เป็นไปได้ด้วย Divi

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

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