ซ่อนสำเนาของคุณไว้ด้านล่างตัวแบ่งส่วนอย่างหรูหราด้วยดีไซน์ที่สวยงามด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

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

เพิ่มมาตรา #1

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

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

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 2: Playfair Display
• หัวข้อ 2 น้ำหนักแบบอักษร: ปกติ
• การจัดแนวข้อความหัวเรื่อง 2: Center
• ขนาดข้อความของหัวเรื่อง 2: 70px (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์)

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

ทัศนวิสัย

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

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

เส้น

เรายังเปลี่ยนสีเส้นในแท็บการออกแบบอีกด้วย

• สีของเส้น: #000000

ขนาด

ไปที่การตั้งค่าการปรับขนาดและใช้การตั้งค่าต่อไปนี้:

• น้ำหนักตัวแบ่ง: 5px
• ความกว้าง: 27%
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มส่วน #2

สีพื้นหลัง

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

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

ล้น

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

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

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

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

• ระยะเวลาการเปลี่ยนภาพ: 800ms

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

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

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

ขนาด

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

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

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 3: Playfair Display
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 7vw (โทรศัพท์)

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

ทัศนวิสัย

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

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

เส้น

เปลี่ยนสีของตัวแบ่งด้วย

• สีของเส้น: #000000

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw

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

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #777777
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.2vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองบางส่วนต่อไป

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

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

เพิ่มสำเนา

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

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งปุ่มในแท็บการออกแบบ

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ดำเนินการต่อโดยกำหนดสไตล์การตั้งค่าปุ่ม

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

ระยะห่าง

และเพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

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

การตั้งค่าส่วนเพิ่มเติม

ตัวแบ่งด้านบนเริ่มต้น

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

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #e8e8e8
• ความสูงของตัวแบ่ง: 7000px
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

โฮเวอร์ตัวแบ่งด้านบน

เปลี่ยนความสูงของตัวแบ่งเมื่อโฮเวอร์

• ความสูงของตัวแบ่ง: 0px

ตัวแบ่งด้านล่าง

เพิ่มตัวแบ่งด้านล่างด้วย

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #5c26ff
• ความสูงของตัวแบ่ง: 600px
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

เลื่อนตัวแบ่งด้านล่าง

และลบความสูงของตัวแบ่งเมื่อโฮเวอร์

• ความสูงของตัวแบ่ง: 0px

ระยะห่าง

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

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

ชายแดน

ดำเนินการต่อโดยเพิ่ม '50vw' ในแต่ละมุมเพื่อเปลี่ยนส่วนให้เป็นวงกลม เรายังเพิ่มเส้นขอบโดยใช้การตั้งค่าต่อไปนี้:

• ความกว้างของเส้นขอบ: 1px
• เส้นขอบสี: rgba(255,255,255,0)

โฮเวอร์ชายแดน

เปลี่ยนสีเส้นขอบเมื่อโฮเวอร์

• สีเส้นขอบ: #000000

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

เมื่อคุณตั้งค่าส่วนทั้งหมดเสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนส่วนนั้นสองครั้ง

แก้ไขรายการซ้ำ #1

เปลี่ยนสีตัวแบ่งด้านบน

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

• ตัวแบ่งสี: #5c26ff

เปลี่ยนสีตัวแบ่งด้านล่าง

ปรับเปลี่ยนสีของตัวแบ่งด้านล่างด้วย

• ตัวแบ่งสี: #ff3a5e

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

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

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

แก้ไขรายการซ้ำ #2

เปลี่ยนสีตัวแบ่งด้านบน

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

• ตัวแบ่งสี: #ff3a5e

เปลี่ยนสีตัวแบ่งด้านล่าง

เปลี่ยนสีตัวแบ่งด้านล่างด้วย

• ตัวแบ่งสี: #e8e8e8

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

และแก้ไขค่าการเว้นวรรคที่นี่ด้วย

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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