วิธีการย้ายคอลัมน์และโมดูล Divi สำหรับการออกแบบกริดที่ไม่ซ้ำแบบใคร

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

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

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

แอบมอง

ต่อไปนี้คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงคอลัมน์และโมดูล Stagger Divi ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

อธิบายแนวคิดพื้นฐาน

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

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

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

เมื่อคุณมีแนวคิดพื้นฐานแล้ว มาสร้างการออกแบบตั้งแต่เริ่มต้นกัน

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพสองสามรูปที่จะใช้สำหรับเนื้อหาจำลอง

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

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

ขั้นแรก สร้างส่วนปกติใหม่ด้วยแถวสองคอลัมน์

จากนั้นเพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1

เปลี่ยนข้อความชื่อเป็น "Divi Module" หรือชื่อสั้นอื่น ๆ ที่คุณเลือก

จากนั้นอัปเดตโมดูลด้วยสีพื้นหลังสีเข้มแล้วเปลี่ยนข้อความชื่อดังนี้:

สีพื้นหลัง: #333333
การจัดตำแหน่งข้อความ: ซ้าย
แบบอักษรของชื่อ: ขม
ชื่อเรื่อง ขนาดข้อความ: 50px
ระยะห่างของตัวอักษรชื่อเรื่อง: 2px

จากนั้นอัปเดตปุ่มโมดูลการเรียกร้องให้ดำเนินการดังนี้:

ขนาดข้อความของปุ่ม: 16px
สีข้อความของปุ่ม: #333333
สีพื้นหลังของปุ่ม:
สีเส้นขอบของปุ่ม: #ffffff
รัศมีเส้นขอบของปุ่ม: 25px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
แบบอักษรของปุ่ม: Raleway
น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
รูปแบบตัวอักษรของปุ่ม: TT

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

อัปเดตระยะห่างแถว

ตอนนี้ มาเพิ่มระยะขอบบนและล่างบางแถวเพื่อให้มีที่ว่างสำหรับการออกแบบ

มาร์จิ้น: บน 20% ล่าง 20%

เพิ่มภาพพื้นหลังของคอลัมน์

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

ไปข้างหน้าและเปิดการตั้งค่าสำหรับคอลัมน์ 1 และเพิ่มภาพพื้นหลัง

จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 2 และเพิ่มรูปภาพพื้นหลัง

เพิ่ม Box Shadow ให้กับแต่ละคอลัมน์

เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มเงาของกล่องต่อไปนี้:

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 100px
เงาสี: rgba(151,178,193,0.21)

จากนั้นเพิ่มสไตล์เงาของกล่องแบบเดียวกันในคอลัมน์ 2 เพื่อเพิ่มความเร็ว คุณสามารถใช้ตัวเลือกคลิกขวาเพื่อคัดลอกสไตล์เงาของกล่องในคอลัมน์ 1 แล้ววางลงในสไตล์เงาของกล่องในคอลัมน์ 2

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

ย้ายคอลัมน์ Divi โดยใช้ Transform Translate

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

ซวนเซคอลัมน์ 1

เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มคุณสมบัติการแปลการแปลงต่อไปนี้

แปลงแกน X แปล: 25%
แปลงแกนแปล Y: -25% (เดสก์ท็อป), -5% (แท็บเล็ต)

ซวนเซคอลัมน์2

สำหรับคอลัมน์ 2 ให้เพิ่มคุณสมบัติการแปลการแปลงต่อไปนี้

แปลงแกน X แปล: -25%
แปลงแกนแปล Y: 25% (เดสก์ท็อป), 5% (แท็บเล็ต)

ย้ายโมดูลโดยใช้ Transform Translate

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

โมดูลเดินโซเซ 1

เปิดการตั้งค่าสำหรับโมดูลคำกระตุ้นการตัดสินใจในคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

แปลงแกน X แปล: -60%
แปลงแกนแปล Y: 50% (เดสก์ท็อป), 10% (แท็บเล็ต)

เพิ่มเงากล่องให้กับโมดูล 1

จากนั้นเพิ่มเงาของกล่องต่อไปนี้ให้กับโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1:

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 100px
เงาสี: rgba(151,178,193,0.21)

ซวนเซโมดูล2

หากต้องการย้ายโมดูลในคอลัมน์ 2 ให้อัปเดตสิ่งต่อไปนี้:

แปลงแกน X แปล: 60%
แปลงแกนแปล Y: -50% (เดสก์ท็อป), -10% (แท็บเล็ต)

เพิ่มเงากล่องให้กับโมดูล 2

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

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 100px
เงาสี: rgba(151,178,193,0.09)

เพิ่มกรอบเงาของกล่องแถว

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
สีเงา: #97b2c1

การออกแบบขั้นสุดท้าย

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

เดสก์ทอป

ยาเม็ด

โทรศัพท์

ทดลองกับดีไซน์ต่างๆ

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

การเพิ่มระยะห่างให้กับโมดูลเพื่อสร้างภาพพื้นหลังของคอลัมน์ที่มีขนาดเท่ากับโมดูล

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

ตัวอย่างเช่น เปิดการตั้งค่าสำหรับโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์ 1 และอัปเดตการเติมดังนี้:

บุนวม: บน 20%, ล่าง 15%

และสังเกตว่าภาพพื้นหลังของคอลัมน์ 1 มีขนาดตามขนาดของโมดูลอย่างไร

การเพิ่มโมดูลเพิ่มเติม

ในทำนองเดียวกัน การเพิ่ม padding ให้กับโมดูลจะเพิ่มขนาดของพื้นหลังของคอลัมน์ การเพิ่มโมดูลในคอลัมน์จะเพิ่มขนาดของพื้นหลังของคอลัมน์ด้วย

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

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

นี่คือผลลัพธ์

การเปลี่ยนสี

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

ต่อไปนี้คือตัวอย่างลักษณะเมื่ออัปเดตกล่องเงากึ่งโปร่งใสสำหรับคอลัมน์ 1 โมดูล 1 และโมดูล 2

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

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

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

ไชโย!