การใช้เส้นขอบโมดูลดัชนี Z ต่ำเป็นพื้นหลังด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดโครงร่างเส้นขอบโมดูลดัชนี Low Z ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ล้น

ไปที่แท็บขั้นสูงและเปลี่ยนโอเวอร์โฟลว์

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถวใหม่

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

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

สีพื้นหลัง

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

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

ขนาด

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าการปรับขนาดตามนั้น:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

คอลัมน์ 1 การตั้งค่า

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

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

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

• สี 1: rgba(0,0,0,0)
• สี 2: #2e2d3c
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 54%
• ตำแหน่งสุดท้าย: 54%

กล่องเงา

เพิ่มเงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

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

เว้นช่องเนื้อหาว่างไว้

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

ขนาด

ย้ายบนแท็บการออกแบบและเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 24vw (เดสก์ท็อป), 50vw (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

ไปที่การตั้งค่าระยะห่างถัดไปและเปลี่ยนค่าดังต่อไปนี้:

• ขอบบน: 15vw
• ระยะขอบซ้าย: 12vw (เดสก์ท็อป), 30vw (แท็บเล็ตและโทรศัพท์)
• ด้านบน: 32vw (เดสก์ท็อป), 67vw (แท็บเล็ต), 60vw (โทรศัพท์)

ชายแดน

เสร็จสิ้นการออกแบบโมดูลโดยการเพิ่มเส้นขอบ

• ความกว้างของเส้นขอบ: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• สีเส้นขอบ: #00ffb2

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

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

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

สีพื้นหลัง

จับคู่สีพื้นหลังกับสีไล่ระดับสีที่สองของคอลัมน์

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #f3f3e6
• ขนาดตัวอักษร: 4vw
• ระยะห่างของตัวอักษรข้อความ: -0.2vw

ขนาด

เปลี่ยนความกว้างด้วย

• ความกว้าง: 27vw

ระยะห่าง

จากนั้นไปที่การตั้งค่าการเว้นวรรคและลองเล่นกับค่าต่างๆ ในหน้าจอขนาดต่างๆ

• ขอบบน: -23.2vw (เดสก์ท็อป), -46vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 21.5vw (เดสก์ท็อป), 64.5vw (แท็บเล็ต), 64vw (โทรศัพท์)
• แผ่นรองด้านบน: 4vw
• แผ่นรองด้านล่าง: 4vw
• ช่องว่างภายในด้านซ้าย: 2vw
• ช่องว่างภายในด้านขวา: 2vw

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

ตั้งค่าโมดูลให้เสร็จสมบูรณ์โดยหมุนโมดูลในการตั้งค่าการแปลง

• ซ้าย: 270deg

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพ

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลรูปภาพ อัปโหลดภาพกึ่งโปร่งใสที่คุณเลือก

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

เปิดการตั้งค่าระยะห่างถัดไปและเปลี่ยนค่าดังนี้:

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

ตัวกรอง

เรายังลดความอิ่มตัวของภาพในการตั้งค่าตัวกรองอีกด้วย

• ความอิ่มตัว: 43%

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

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

ไปยังคอลัมน์ถัดไป! ป้อนเนื้อหาที่คุณเลือก

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความ: Justify
• สีข้อความ: #2e2d3c
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 2.2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.5em

ระยะห่าง

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

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

โมดูลข้อความโคลน

เมื่อคุณสร้างโมดูลข้อความเสร็จแล้ว ให้ทำการโคลน 1 ครั้ง

ลบขอบด้านบน

ลบระยะขอบด้านบนของที่ซ้ำกัน

วางโมดูลข้อความใหม่ระหว่างโมดูลข้อความทั้งสองในคอลัมน์ 2

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

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

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

เปลี่ยนการตั้งค่าข้อความดังนี้:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #2e2d3c
• ขนาดตัวอักษร: 2vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.4em

ระยะห่าง

เปลี่ยนค่า padding ด้วย

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

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

เพิ่มสำเนา

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

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

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

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

ระยะห่าง

เสร็จสิ้นการออกแบบโมดูลปุ่มโดยเพิ่มค่าระยะห่างที่กำหนดเอง เท่านี้ก็เรียบร้อย!

• ขอบบน: 2vw (เดสก์ท็อป), 8vw (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 10vw (เดสก์ท็อป), 15vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 8vw
• ด้านบน: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1.5vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 4vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 10vw (โทรศัพท์)
• Padding ขวา: 4vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 10vw (โทรศัพท์)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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