การสร้างโครงสร้างการออกแบบแนวทแยงด้วยตัวเลือกการแปลงของ Divi (ดาวน์โหลดฟรี!)

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

พื้นหลังไล่โทนสี

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

• สี 1: #ffd633
• สี 2: #efefef
• ทิศทางการไล่ระดับสี: 217deg
• ตำแหน่งเริ่มต้น: 45%
• ตำแหน่งสุดท้าย: 45%

ระยะห่าง

จากนั้นไปที่แท็บการออกแบบและเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเอง

• แผ่นรองด้านบน: 4vw
• แผ่นรองด้านล่าง: 12vw

ล้น

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

overflow: hidden;

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• Padding ซ้าย: 25vw (เดสก์ท็อป), 16vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 25vw (เดสก์ท็อปและแท็บเล็ต), 27vw (โทรศัพท์)

แสดง

นอกจากนี้ เรายังทำให้แน่ใจว่าคอลัมน์ต่างๆ จะปรากฏติดกันบนหน้าจอขนาดเล็กโดยการเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มหัวข้อ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูล Blurb ในคอลัมน์ 1 และป้อนชื่อที่คุณเลือก

อัพโหลดภาพประกอบ

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

พื้นหลัง

จากนั้น เพิ่มสีพื้นหลังสีขาวทั้งหมดลงในโมดูล Blurb

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความชื่อเรื่อง

ไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความชื่อตามนั้น:

• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: กึ่งหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ขนาดข้อความชื่อเรื่อง: 0.5vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.4vw (โทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: 1px
• ความสูงของบรรทัดชื่อเรื่อง: 1.6em

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

• ด้านบน: 1.3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ด้านล่าง: 1.3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ซ้าย: 1vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 1vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

ดำเนินการต่อโดยเพิ่ม '1vw' ที่มุมซ้ายบนและมุมขวาบนของโมดูล Blurb

กล่องเงา

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

• ตำแหน่งแนวตั้งเงาของกล่อง: 10px
• ความแรงของกล่องเงาเบลอ: 60px
• เงาสี: rgba(39,39,52,0.37)

โคลนโมดูล Blurb สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนรายการซ้ำ #1

เปลี่ยนสำเนาและภาพประกอบ

เปลี่ยนสำเนาและภาพประกอบของสำเนาแรก

เปลี่ยนระยะห่าง

พร้อมกับการตั้งค่าระยะห่าง

• อัตรากำไรขั้นต้น: -3vw
• ด้านบน: 2.7vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 11vw (โทรศัพท์)
• ช่วงล่าง: 2.7vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 11vw (โทรศัพท์)

เปลี่ยนรายการซ้ำ #2

เปลี่ยนสำเนาและภาพประกอบ

แก้ไขสำเนาและภาพประกอบของสำเนาที่สองด้วย

เพิ่มแถว #2

โครงสร้างคอลัมน์

ต่อแถวหน้า! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่โทนสี

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

• สี 1: #fff20a
• สี 2: #ffb200
• ทิศทางการไล่ระดับสี: 165deg

ขนาด

จากนั้นไปที่แท็บการออกแบบและเปิดใช้งานตัวเลือก 'Make This Row Fullwidth'

• ทำให้แถวนี้เต็มความกว้าง: ใช่

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเงาของกล่องในแถว

• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(0,0,0,0.39)

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ไม่

ใช้ตัวเลือกการแปลงกับแถว

แถว #1

แปลงแปล

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

• ด้านล่าง: 30vw
• ขวา: 6vw

แปลงร่างหมุน

จากนั้นเปลี่ยนค่าการหมุนของการแปลงด้านซ้าย

• ซ้าย: 37deg

แถว #2

แปลงมาตราส่วน

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

• ด้านล่าง: 133% (เดสก์ท็อป), 171% (แท็บเล็ต), 176% (โทรศัพท์)
• ขวา: 133% (เดสก์ท็อป), 171% (แท็บเล็ต), 176% (โทรศัพท์)

แปลงแปล

พร้อมกับการแปลงค่าแปล

• ด้านล่าง: 12vw (เดสก์ท็อป), 1vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ขวา: -2vw (เดสก์ท็อป), -6vw (แท็บเล็ต), -4vw (โทรศัพท์)

แปลงร่างหมุน

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

• ซ้าย: 37deg

เพิ่มแถว #3

โครงสร้างคอลัมน์

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

เพิ่มเนื้อหา H1

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เราจะเริ่มต้นด้วยชื่อโมดูลข้อความ ป้อนเนื้อหา H1 ที่คุณเลือก

การตั้งค่าข้อความ H1

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความ H1

• แบบอักษรของหัวเรื่อง: Poppins
• ขนาดข้อความของหัวเรื่อง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ระยะห่างของตัวอักษรหัวเรื่อง: -2px

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ขอบบน: -6vw (เดสก์ท็อปและแท็บเล็ต), 11vw (โทรศัพท์)
• ระยะขอบซ้าย: 10vw

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มเนื้อหา

โมดูลที่สองที่เราต้องการคือโมดูลข้อความอื่น เพิ่มเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.2vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.6em

ระยะห่าง

เปลี่ยนค่าระยะห่างด้วย

• ขอบบน: 3vw (โทรศัพท์), 5vw (โทรศัพท์)
• ระยะขอบซ้าย: 10vw
• ระยะขอบขวา: 28vw (แท็บเล็ต), 20vw (โทรศัพท์)

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

การตั้งค่าปุ่ม

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.9vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 1px
• สีเส้นขอบของปุ่ม: #000000
• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษร: เบา

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด กำหนดรูปแบบโมดูลของคุณโดยใช้ค่าระยะห่างที่กำหนดเอง เท่านี้ก็เรียบร้อย!

• อัตรากำไรขั้นต้น: 2vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 10vw
• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw
• ช่องว่างภายในด้านซ้าย: 3vw
• ช่องว่างภายในด้านขวา: 3vw

ดาวน์โหลดส่วนการออกแบบแนวทแยงฟรี

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

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

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

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

ดาวน์โหลด

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

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

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