วิธีขยายโมดูลเพื่อสร้างเค้าโครงคอลัมน์ที่ไม่ซ้ำใน Divi

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

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

มาเริ่มกันเลย.

แอบมอง

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

ก่อน

นี่คือการออกแบบเลย์เอาต์โดยไม่ต้องใช้ระยะขอบแบบกำหนดเองเพื่อขยายโมดูลไปยังคอลัมน์อื่น

หลังจาก

นี่คือเลย์เอาต์หลังจากขยายโมดูลรูปภาพสองโมดูลและโมดูลข้อความสามโมดูลที่มีหมายเลข "01", "03" และ "05"

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

และผลลัพธ์บนแท็บเล็ตก็น่าตื่นเต้นยิ่งขึ้นไปอีก

ทำความเข้าใจแนวคิด

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

นี่คือภาพประกอบว่าแต่ละโมดูลขยายความกว้างเต็มของคอลัมน์ในแถวโดยตั้งค่าความกว้างของรางน้ำเป็น 1 ได้อย่างไร

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

ในภาพประกอบนี้ คุณจะเห็นว่าการเพิ่มระยะขอบซ้าย -100% ให้กับโมดูลในคอลัมน์ 5 จะขยายโมดูลไปทางซ้ายเพื่อครอบครองทั้งคอลัมน์ 5 และคอลัมน์ 4

และข้อดีอย่างหนึ่งของการใช้เลย์เอาต์แบบหกคอลัมน์ก็คือการออกแบบนั้นได้รับการเก็บรักษาไว้อย่างดีบนแท็บเล็ต

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

เหตุใดจึงต้องใช้เค้าโครงหกคอลัมน์

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

การออกแบบนี้ยังใช้ได้กับเลย์เอาต์คอลัมน์ 1/2 1/6 1/6 1/6 และเลย์เอาต์คอลัมน์ 1/6 1/6 1/6 1/2 เนื่องจากทั้งคู่จะคงคอลัมน์ทั้งสามบนแท็บเล็ตไว้ด้วย

การนำการออกแบบไปใช้

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

การตั้งค่าส่วนและแถวของคุณ

ในการเริ่มต้น ให้สร้างหน้าใหม่และปรับใช้ตัวสร้างภาพ จากนั้นเลือก "สร้างตั้งแต่เริ่มต้น" จากนั้นไปข้างหน้าและเพิ่มรูปแบบคอลัมน์ 1/2 1/6 1/6 1/6 ในส่วนแรกของคุณ

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

สีพื้นหลัง: #222831
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
มาร์จิ้นที่กำหนดเอง: 0px บน, 0px ล่าง
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

บันทึกการตั้งค่า.

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

หากต้องการสร้างแถวที่สาม ให้ทำซ้ำแถวที่สอง

การเพิ่มโมดูลในแถว 1

ในคอลัมน์แรกของแถวแรกบนสุด ให้เพิ่มโมดูลข้อความด้วยการตั้งค่าต่อไปนี้:

สีข้อความ: เบา
ขนาดข้อความ: 16px
Custom Padding: 2vw บน, 2vw ล่าง, 2vw ซ้าย, 2vw ขวา

ในคอลัมน์ที่สองของแถวแรก ให้เพิ่มโมดูลการนำเสนอด้วยการตั้งค่าต่อไปนี้:

ชื่อเรื่อง: [ป้อนชื่อ]
เนื้อหา: [ลบ]
ไอคอน: [เลือกไอคอน]
สีไอคอน: #eeeeee
ขนาดตัวอักษรของไอคอน: 50px
สีข้อความ: เบา
การวางแนวข้อความ: ศูนย์
แพ็ดดิ้งที่กำหนดเอง: 3vw บน, 2vw ล่าง

บันทึกการตั้งค่า

ในคอลัมน์ที่สาม เพิ่มรูปภาพ

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

อัปเดตการตั้งค่าตัวแบ่งดังนี้:

แสดงตัวแบ่ง: NO
ปิดการใช้งานเมื่อ: โทรศัพท์

การเพิ่มโมดูลในแถวที่ 2 และ 3

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

จากนั้น เพิ่มโมดูลข้อความในคอลัมน์ที่สองโดยมีดังต่อไปนี้:

เนื้อหา:

<h2>Product</h2>
01

สีข้อความ: #ffffff
ขนาดข้อความ: 50px
ความสูงของบรรทัดข้อความ: 1em
การวางแนวข้อความ: ขวา
การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
หัวเรื่อง 2 สีข้อความ: #ffffff
ส่วนหัว 2 ความสูงของบรรทัด: 3em
Custom Padding: 2vw บน, 2vw ล่าง, 2vw ซ้าย, 2vw ขวา

ถัดไป คัดลอกโมดูลข้อความที่คุณเพิ่งสร้างและวางลงในคอลัมน์ 4 และคอลัมน์ 6

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

ในคอลัมน์ที่ 2 ของแถวที่ 3 ให้เพิ่มรูปภาพอื่น

หลังจากนั้นกรอกข้อมูลในคอลัมน์ว่างทั้งหมดในส่วนของคุณด้วยตัวแบ่งโดยคัดลอกและวางตัวแบ่งที่คุณสร้างในแถวที่ 1

นี่คือสิ่งที่เลย์เอาต์ของคุณควรมีลักษณะ ณ จุดนี้ (ช่องสี่เหลี่ยมว่างแสดงถึงโมดูลตัวแบ่ง):

การเพิ่มระยะขอบเชิงลบเพื่อขยายโมดูลไปยังคอลัมน์อื่น

ณ จุดนี้ เราสามารถเริ่มขยายโมดูลของเราโดยใช้ระยะขอบติดลบ กระบวนการนี้ทำได้ง่ายมาก

เปิดการตั้งค่าโมดูลรูปภาพสำหรับรูปภาพในแถวแรก เนื่องจากเราต้องการขยายภาพไปทางขวา เราจะเพิ่มระยะขอบขวา -100%

ถัดไป เพิ่มระยะขอบซ้าย -100% ให้กับโมดูลข้อความในแถวที่ 2 คอลัมน์ 3

ตอนนี้คัดลอกสไตล์โมดูลและวางลงในโมดูลข้อความในแถวที่ 2 คอลัมน์ 6 และลงในโมดูลข้อความในแถว 3 คอลัมน์ 5

สิ่งที่เหลืออยู่คือการขยายรูปภาพในแถวที่ 3 คอลัมน์ 2 อัปเดตโมดูลรูปภาพด้วยระยะขอบที่กำหนดเองที่ -100% ทางซ้าย

การเพิ่มสีพื้นหลังให้กับคอลัมน์ของคุณ

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

คอลัมน์ 1 สีพื้นหลัง: #393e46

สำหรับแถวที่สอง ให้เพิ่มสิ่งต่อไปนี้:

คอลัมน์ 1 สีพื้นหลัง: #eeeeee
คอลัมน์ 4 สีพื้นหลัง: #7971ea
คอลัมน์ 5 สีพื้นหลัง: #393e46
คอลัมน์ 6 สีพื้นหลัง: #393e46

และสำหรับแถวสุดท้าย ให้เพิ่มสิ่งต่อไปนี้:

คอลัมน์ 3 สีพื้นหลัง: #7971ea
คอลัมน์ 6 สีพื้นหลัง: #7971ea

นั่นคือทั้งหมดสำหรับการออกแบบเดสก์ท็อป ตอนนี้เรามาทำให้แน่ใจว่าสิ่งต่าง ๆ บนมือถือดูดี

การปรับเค้าโครงสำหรับหน้าจอสมาร์ทโฟน

ตอนนี้ เลย์เอาต์ปัจจุบันจะดูดีบนเดสก์ท็อปและแท็บเล็ต แต่ขอบด้านลบที่เราเพิ่มเข้าไปจะต้องได้รับการปรับบนสมาร์ทโฟน

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

ไปที่การตั้งค่าหน้าและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ภายใต้แท็บขั้นสูง:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

สิ่งที่ข้อมูลโค้ด CSS นี้ทำคือตั้งค่าระยะขอบด้านขวาและด้านซ้ายของโมดูลทั้งหมดเป็น 0% เมื่อใดก็ตามที่ขนาดหน้าจอกว้างเท่ากับหรือน้อยกว่า 479px วิธีนี้แก้ไขปัญหาได้อย่างดี!

ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!