วิธีใช้เส้นขอบแถวของ Divi อย่างสร้างสรรค์เพื่อสร้างการออกแบบส่วนฮีโร่ที่น่าทึ่ง

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

ไปกันเถอะ

ดูตัวอย่าง

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

ดาวน์โหลดเค้าโครงมาตราฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

• สี 1: #7e2dff
• สี 2: #ffffff
• ตำแหน่งเริ่มต้น: 63%
• ตำแหน่งสุดท้าย: 63%

ระยะห่าง

ไปที่แท็บการออกแบบ และเพิ่มการเติมด้านบนและด้านล่างแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ด้านบน: 6vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 32vw (โทรศัพท์)
• ช่วงล่าง: 6vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 20vw (โทรศัพท์)

เพิ่มแถว #1

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

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

ขนาด

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

• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

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

อัพโหลดภาพ

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

ขนาด

ไปที่แท็บการออกแบบของ Image Module และเปิดใช้งานตัวเลือก 'Force Fullwidth'

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

ระยะห่าง

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

• แสดงช่องว่างด้านล่างภาพ: ไม่
• ช่องว่างภายในด้านซ้าย: 17vw

ชายแดน

และเพิ่ม '50vw' ที่มุมบนขวาของ Image Module

ตัวกรอง

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

• ฮิว: 211deg
• ความอิ่มตัว: 600%
• ความสว่าง: 67%
• ความคมชัด: 112%
• กลับด้าน: 18%

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

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

โมดูลที่สองที่เราต้องการในแถวนี้คือโมดูลข้อความที่มีเนื้อหา H1 บางส่วน

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

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของหัวเรื่อง: กึ่งหนา
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 5vw
• ระยะห่างของตัวอักษรหัวเรื่อง: -2px

ขนาด

แก้ไขความกว้างของโมดูลต่อไป

• ความกว้าง: 70%

ระยะห่าง

และสร้างการทับซ้อนกันระหว่างโมดูลนี้กับโมดูลก่อนหน้าโดยใช้ระยะขอบบนที่เป็นลบ

• ขอบบน: -57vw (เดสก์ท็อป), -75vw (แท็บเล็ต), -91vw (โทรศัพท์)

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นต่อไป

• สีของเส้น: #00dcff

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 0.8vw
• ความกว้าง: 27%

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

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em

ขนาด

แก้ไขความกว้างของโมดูลด้วย

• ความกว้าง: 53% (เดสก์ท็อป), 65% (แท็บเล็ต), 100% (โทรศัพท์)

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

เพิ่มสำเนา

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

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

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

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

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw
• ช่องว่างภายในด้านซ้าย: 4vw
• ช่องว่างภายในด้านขวา: 4vw

เพิ่มแถว #2

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

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

สีพื้นหลัง

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

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

ขนาด

ไปที่แท็บออกแบบและเพิ่มความกว้างสูงสุด

• ความกว้างสูงสุด: 100%

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 3vw
• แผ่นรองด้านล่าง: 8vw
• ช่องว่างภายในด้านซ้าย: 7vw
• ช่องว่างภายในด้านขวา: 7vw

ชายแดน

เราจะดำเนินการต่อโดยเพิ่ม '20vw' ที่มุมล่างซ้ายและมุมขวาบนของแถว เราจะเพิ่มเส้นขอบบนโดยใช้การตั้งค่าต่อไปนี้ด้วย:

• ความกว้างขอบบน: 1.2vw
• สีขอบบน: #00dcff

กล่องเงา

นอกจากนี้เรายังเพิ่มเงาของกล่องเพื่อสร้างความลึกให้กับหน้า

• ความชัดเจนของเงากล่อง: 120px

ดัชนี Z

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

• ดัชนี Z: 10

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

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

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

เลือกไอคอน

เลือกไอคอนที่คุณต้องการถัดไป

การตั้งค่าไอคอน

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

• ไอคอนสี: #000000
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 5vw

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

แก้ไขการตั้งค่าชื่อเรื่องด้วย

• แบบอักษรของชื่อเรื่อง: Montserrat
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง: 1.1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px

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

พร้อมกับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: เปิด Sans
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)

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

เมื่อคุณสร้าง Blurb Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนได้สองครั้งแล้ววางสำเนาที่ซ้ำกันในสองคอลัมน์ที่เหลือของแถว

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนเนื้อหาของทั้งสองรายการที่ซ้ำกันและคุณทำเสร็จแล้ว!

ดูตัวอย่าง

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

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

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

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