การออกแบบเว็บสมัยใหม่มักจะเกี่ยวกับการทำลายกริด ทำได้โดยการจัดองค์ประกอบที่ส่ายและเน้นเสียงในตำแหน่งที่ทำลายโครงสร้างปกติของตาราง คุณสามารถเห็นพวกมันถูกนำไปใช้ในการออกแบบกริดที่พังบนเลย์เอาต์ที่ยอดเยี่ยม Divi. ซึ่งมักจะเกี่ยวข้องกับการย้ายโมดูลนอกคอลัมน์หรือแถวเพื่อให้ขยายออกไปนอกคอนเทนเนอร์หรือทับซ้อนองค์ประกอบอื่นๆ บนหน้า แต่คุณอาจไม่ได้คิดที่จะย้ายคอลัมน์
ในบทช่วยสอนนี้ ฉันจะแสดงวิธีโซเซคอลัมน์และโมดูล Divi สำหรับการออกแบบกริดที่แตกหักไม่เหมือนใคร กับข่าว ตัวเลือกคอลัมน์ของ Divi คุณสามารถย้ายคอลัมน์และโมดูลที่มีอยู่ได้อย่างง่ายดาย สิ่งนี้ช่วยให้คุณสามารถออกแบบทั้งโมดูลและคอลัมน์ด้วยสไตล์ที่เป็นเอกลักษณ์สำหรับการออกแบบกริดที่เสียหายอย่างสร้างสรรค์
เริ่มกันเลย!
การสำรวจ
นี่คือภาพรวมของตัวอย่างการออกแบบที่เราจะสร้างในบทช่วยสอนนี้
สิ่งที่คุณต้องเริ่มต้น
ในการเริ่มต้นคุณต้องมีสิ่งต่อไปนี้:
- Le ธีม Divi ติดตั้งและใช้งานอยู่
- หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นบน front-end (ตัวสร้างภาพ)
- ภาพบางส่วนเพื่อใช้ประกอบ เนื้อหา สมมติ
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
ความซบเซาของคอลัมน์และโมดูลเพื่อสร้างการออกแบบตารางที่ไม่ซ้ำกันใน Divi
เริ่มต้นด้วยการสร้างส่วนปกติใหม่ที่มีแถวสองคอลัมน์
จากนั้นเพิ่มคำเรียกไปยังโมดูลการดำเนินการในคอลัมน์ 1
เปลี่ยนข้อความชื่อเรื่องเป็น "โมดูล Divi" หรืออีกชื่อสั้น ๆ ที่คุณเลือก
จากนั้นอัพเดตโมดูลด้วยสีพื้นหลังสีเข้มจากนั้นแก้ไขข้อความชื่อเรื่องดังนี้:
สีพื้นหลัง: #333333
การจัดแนวข้อความ: ซ้าย
ชื่อตัวอักษร: ขม
ขนาดตัวอักษรหัวเรื่อง: 50px
ระยะห่างของตัวอักษรชื่อเรื่อง: 2px
จากนั้นอัปเดตปุ่มเรียกโมดูลการดำเนินการดังต่อไปนี้:
ขนาดข้อความของปุ่ม: 16px
สีข้อความของปุ่ม: #333333
สีพื้นหลังของปุ่ม: สีของ
เส้นขอบของปุ่ม: #ffffff
รัศมีของเส้นขอบของปุ่ม: 25px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
ปุ่มตัวอักษร: ขนาด Raleway ของ
แบบอักษรของปุ่ม: ตัวหนา
รูปแบบตัวอักษรสำคัญ: TT
จากนั้นคัดลอกโมดูลและวางซ้ำลงในคอลัมน์ 2 เพื่อให้คุณมีการเรียกไปยังโมดูลการดำเนินการเดียวกันในแต่ละคอลัมน์
อัปเดตระยะห่างระหว่างบรรทัด
ตอนนี้เพิ่มระยะขอบด้านบนและด้านล่างเพื่อให้มีพื้นที่สำหรับการออกแบบ
มาร์จิ้น: 20% ขึ้นไป, 20% ลง
เพิ่มภาพพื้นหลังของคอลัมน์
แม้ว่าเราจะยังมองไม่เห็น แต่เราจะเพิ่มภาพพื้นหลังให้กับแต่ละคอลัมน์ พวกเขาจะปรากฏให้เห็นเมื่อเราย้ายโมดูลของเราออกจากคอนเทนเนอร์ของคอลัมน์ด้วยการแปลงการแปล
เอาเลยเปิดการตั้งค่าในคอลัมน์ 1 และเพิ่มภาพพื้นหลัง
จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 2 และเพิ่มภาพพื้นหลัง
เพิ่มกล่องเงาในแต่ละคอลัมน์
เปิดการตั้งค่าสำหรับคอลัมน์ 1 และเพิ่มเงาของกล่องต่อไปนี้:
Box Shadow: ดูภาพหน้าจอ
ตำแหน่ง Shadow Box แนวนอน: 0px
ตำแหน่ง Shadow Box แนวตั้ง: 0px
Box Shadow Spreading: 100px
สีเงา: rgba (151, 178, 193, 0.21)
จากนั้นเพิ่มสไตล์เงาของกล่องแบบเดียวกันลงในคอลัมน์ 2 เพื่อเพิ่มความเร็วให้กับสิ่งต่างๆคุณสามารถใช้ตัวเลือกคลิกขวาเพื่อคัดลอกลักษณะเงาของกล่องไปยังคอลัมน์ 1 แล้ววางลงในลักษณะเงาของกล่องของคอลัมน์ 2
คุณจะสังเกตเห็นว่าเงาในกล่องจะซ้อนทับกัน การใช้สีกึ่งเงาจะช่วยสร้างเอฟเฟกต์ชั้นสูง นี่คือข้อได้เปรียบที่สำคัญของการใช้เงากล่องในการออกแบบ แตกต่างจากเส้นขอบคุณสามารถเพิ่มเงาขนาดใหญ่ที่ดูเหมือนเส้นขอบได้ แต่จะไม่ส่งผลต่อระยะห่างของโครงร่างจริง
วางซ้อนคอลัมน์โดยใช้การแปลงแปล
ณ จุดนี้เราพร้อมที่จะเปลี่ยนคอลัมน์และโมดูลเพื่อออกแบบกริดที่ถูกขัดจังหวะให้เสร็จสมบูรณ์ ขั้นแรกเราต้องย้ายคอลัมน์ไปที่ขอบด้านนอกของหน้า จากนั้นเราสามารถย้ายโมดูลไปที่ตรงกลางได้ในภายหลัง
คอลัมน์ซวนเซ 1
เปิดพารามิเตอร์คอลัมน์ 1 และเพิ่มคุณสมบัติการแปลงการแปลต่อไปนี้
แปลงแกน X แปล: 25%
แปลงแกน Y แปล: -25% (เดสก์ท็อป), -5% (แท็บเล็ต)
คอลัมน์ซวนเซ 2
สำหรับคอลัมน์ 2 ให้เพิ่มคุณสมบัติการแปลงการแปลงต่อไปนี้
แปลงแกน X แปล: -25%
แปลงแกน Y แปล: 25% (เดสก์ท็อป), 5% (แท็บเล็ต)
โมดูลออฟเซ็ตโดยใช้ Transform Translate
ตอนนี้เราพร้อมที่จะกระจายโมดูลของเราโดยการย้ายออกจากคอนเทนเนอร์คอลัมน์ สิ่งนี้จะแสดงภาพพื้นหลังของคอลัมน์และช่วยให้เราสามารถเพิ่มเงาพื้นที่อื่นในโมดูลสำหรับองค์ประกอบการออกแบบที่ทับซ้อนกันเพิ่มเติม
ชดเชยโมดูล 1
เปิดการตั้งค่าคำกระตุ้นการตัดสินใจคอลัมน์ 1 และอัปเดตข้อมูลต่อไปนี้:
แปลงแกน X แปล: -60%
แปลงแกน Y แปล: 50% (เดสก์ท็อป), 10% (แท็บเล็ต)
เพิ่ม shadow box ในโมดูล 1
จากนั้นเพิ่มเงาของกล่องต่อไปนี้ในโมดูลการเรียกการดำเนินการในคอลัมน์ 1:
Box Shadow: ดูภาพหน้าจอ
ตำแหน่ง Shadow Box แนวนอน: 0px
ตำแหน่ง Shadow Box แนวตั้ง: 0px
Box Shadow Spreading: 100px
สีเงา: rgba (151,178,193,0.21)
2 ระยะห่างโมดูล
หากต้องการย้ายโมดูลในคอลัมน์ 2 ให้อัพเดตดังต่อไปนี้:
แปลงแกน X แปล: 60%
เปลี่ยนแกนแปล Y: -50% (เดสก์ท็อป), -10% (แท็บเล็ต)
เพิ่ม shadow box ในโมดูล 2
ต่อไป เราสามารถเพิ่มเงาของกล่องให้กับโมดูลคำกระตุ้นการตัดสินใจในคอลัมน์ 2 ได้ เราต้องทำให้เงาของกล่องนี้โปร่งใสเกือบทั้งหมดเพราะจะทับซ้อนโมดูล 1 และเราไม่ต้องการทำให้อ่านยากขึ้น เนื้อหา.
Box Shadow: ดูภาพหน้าจอ
ตำแหน่ง Shadow Box แนวนอน: 0px
ตำแหน่ง Shadow Box แนวตั้ง: 0px
Box Shadow Spreading: 100px
สีเงา: rgba (151,178,193,0.09)
เพิ่มกรอบกล่องเงา
ในการออกแบบให้เสร็จสมบูรณ์ให้เพิ่มเงาของโซนในบรรทัดที่ทำหน้าที่เป็นองค์ประกอบการออกแบบเฟรมในพื้นหลัง
Box Shadow: ดูภาพหน้าจอ
ตำแหน่ง Shadow Box แนวตั้ง: 0px
สีเงา: #97b2c1
คิดสุดท้าย
หวังว่าบทช่วยสอนนี้จะช่วยให้คุณทราบถึงวิธีที่คุณสามารถชดเชยคอลัมน์และโมดูล Divi เพื่อสร้างการออกแบบกริดของคุณเองได้ เทคนิคง่ายมาก ส่วนใหญ่เกี่ยวข้องกับคุณสมบัติการแปลการแปลงบางส่วนเพื่อชดเชยคอลัมน์และโมดูลรวมถึงเงาของกล่องเพื่อสร้างรูปแบบที่ขาดเพียงครั้งเดียว อย่าลังเลที่จะสำรวจตัวเลือกสีเพิ่มเติมและแนะนำโมดูลเพิ่มเติมเพื่อดูว่าการออกแบบจะนำคุณไปที่ใด
หวังว่าจะได้ยินจากคุณในความคิดเห็น
