แถวซ้อนกันกับส่วนพิเศษใน Divi 5 (และทำไมเราถึงเลิกพวกเขา)

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

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่วันนี้

ย้อนหลังของส่วนพิเศษ

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

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

อย่างไรก็ตามพวกเขาแนะนำความซับซ้อนเพิ่มเติมเนื่องจากส่วนพิเศษเป็นสิ่งที่เป็นของตัวเอง (สังเกตคอลัมน์พิเศษผ่านและตัวเลือก CSS สำหรับส่วนเหล่านี้) สิ่งเหล่านี้ไม่เลว แต่พวกเขา มีพฤติกรรม แตกต่างจากส่วนปกติแถวและคอลัมน์ปกติ

ส่วนพิเศษเพิ่มช่องว่างพิเศษและฟิลด์ CSS คลาส/ID ที่จำเป็น แต่ไม่สอดคล้องกับตัวเลือกที่เหลือของตัวเลือก

ส่วนพิเศษเปิดใช้งานโครงสร้างคอลัมน์หลอกหลอกโดยการดัดกฎรหัสย่อสร้างสิ่งที่ไม่สามารถทำได้ในส่วนปกติ

มันจะดีหรือไม่ถ้าส่วนปกติมีพลังมากพอที่จะทำสิ่งที่คุณต้องการ?

แถวซ้อนกันและวิธีที่ดีกว่าในการสร้างหน้า

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

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

วิธีสร้างส่วนพิเศษใหม่ด้วยแถวซ้อนกันได้อย่างง่ายดาย

ชุดเค้าโครงเช่าสกู๊ตเตอร์ (โดยเฉพาะส่วนฮีโร่ของหน้าแรก) ใช้ส่วนพิเศษในการวางองค์ประกอบสำคัญ อย่างไรก็ตามแทนที่จะใช้ส่วนพิเศษที่มีการตั้งค่าที่ไม่ซ้ำกันเราจะใช้แถวซ้อนกันเพื่อให้ได้เอฟเฟกต์ที่คล้ายกัน

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

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

ตั้งค่าความกว้างและความกว้างสูงสุดของส่วนเป็น 100%

ตรวจสอบให้แน่ใจว่าแถวภายในส่วนมีโครงสร้างสองคอลัมน์และแยก 3/5 + 2/5 นอกจากนี้ตั้งค่าความกว้างของแถวและความกว้างสูงสุดเป็น 100%

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

คอลัมน์ด้านซ้ายจะเป็นที่ตั้งของด้านที่ซับซ้อนมากขึ้น (ในแง่ของโมดูล) และคอลัมน์ด้านขวาจะเป็นที่ตั้งของภาพที่โดดเด่นขนาดใหญ่

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

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

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

ตอนนี้เปิดการตั้งค่าของคอลัมน์ขวาโดยตรงใต้แถวหลัก ใช้ภาพพื้นหลังคอลัมน์

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

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

แต่อย่างน้อย ณ จุดนี้คุณรู้ว่าเป็นไปได้ที่จะทำรังและสร้างส่วนพิเศษใหม่

ก้าวเข้าสู่อนาคตใหม่

Divi 5 อยู่ใกล้กับการเปิดตัวเบต้า แต่เราได้พยายามอย่างมีนัยสำคัญในการยกเครื่องระบบการออกแบบของ Divi แล้ว

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่วันนี้

ดาวน์โหลด Divi 5Learn เพิ่มเติมเกี่ยวกับ Divi 5