วิธีเปิดเผยตารางรูปภาพพื้นฐานในฮีโร่ของคุณด้วยตัวเลือกติดหนึบของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างการออกแบบฮีโร่

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

สีพื้นหลัง

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

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

ระยะห่าง

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

• แผ่นรองด้านล่าง: 120vh

เพิ่มแถว #1

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

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

ขนาด

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

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

ระยะห่าง

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

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: 10vh
  • แท็บเล็ตและโทรศัพท์: 5vh

ดัชนี Z

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

• ดัชนี Z: 10

การตั้งค่าคอลัมน์ทั้งหมด

เมื่อตั้งค่าแถวทั่วไปเสร็จแล้ว ให้เปิดแต่ละคอลัมน์แยกกัน

องค์ประกอบหลัก CSS

ในแต่ละคอลัมน์ ใช้โค้ด CSS ต่อไปนี้กับองค์ประกอบหลักบนโทรศัพท์:

โทรศัพท์เท่านั้น:

width: 50% !important;
margin: 0 !important;

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

จากนั้นเปิดการตั้งค่าคอลัมน์ 2

ดัชนี Z

และเพิ่มดัชนี Z เป็น 12 ซึ่งจะทำให้คอลัมน์นี้อยู่เหนือคอลัมน์ที่สาม

• ดัชนี Z: 12

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

อัพโหลดภาพ

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลรูปภาพในคอลัมน์ 1 อัปโหลดรูปภาพที่คุณเลือก

ระยะห่าง

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

• ขอบล่าง:
  • แท็บเล็ตและโทรศัพท์: 10px
• ระยะขอบขวา:
  • แท็บเล็ตและโทรศัพท์: 2%

Clone Image Module สามครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนรูปภาพ

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

เปลี่ยน Image Module #2 & #4 Spacing

จากนั้น เปิดการตั้งค่าของ Image Modules ในคอลัมน์ 2 และ 4 และใช้ค่าระยะห่างต่อไปนี้กับพวกเขา:

• ขอบล่าง:
  • แท็บเล็ตและโทรศัพท์: 10px
• ระยะขอบซ้าย:
  • แท็บเล็ตและโทรศัพท์: 2%
• ระยะขอบขวา: /

เพิ่มแถว #2

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

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

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

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

• สี 1: #111111
• สี 2: rgba (255,255,255,0)

ขนาด

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

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

ระยะห่าง

จากนั้นใช้แผ่นรองด้านบนและด้านล่าง

• ช่องว่างภายในด้านบน: 20vh
• แผ่นรองด้านล่าง: 20vh

ตำแหน่ง

ในการวางแถวนี้บนตารางรูปภาพ เราจะใช้การตั้งค่าตำแหน่งตามลำดับ:

• ตำแหน่ง: Absolute
• ที่ตั้ง: ท็อปเซ็นเตอร์
• ดัชนี Z: 12

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

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

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

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

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

• แบบอักษรของหัวเรื่อง: Kumbh Sans
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของหัวเรื่อง: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องสีข้อความ: #ffdbaa
• ขนาดข้อความหัวเรื่อง:
  • เดสก์ท็อป: 120px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 40px
• การเว้นวรรคหัวเรื่อง
  • เดสก์ท็อป: -3px
  • แท็บเล็ตและโทรศัพท์: 0px
• หัวเรื่องข้อความเงา:
  • เลือก: ตัวเลือกที่สาม
  • หัวเรื่องสีเงาข้อความ: rgba(0,0,0,0.4)

ขนาด

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

• ความกว้างสูงสุด: 900px
• การจัดตำแหน่งโมดูล: ศูนย์

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

เพิ่มสำเนา

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

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

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

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

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

จากนั้นจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 20px
  • แท็บเล็ต: 16px
  • โทรศัพท์: 14px
• ขนาดข้อความของปุ่ม: #111111
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

• แบบอักษรของปุ่ม: Kumbh Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

และใช้ค่าช่องว่างภายในที่ตอบสนองในการตั้งค่าการเว้นวรรค

• แผ่นรองด้านบน:
  • เดสก์ท็อปและแท็บเล็ต: 20px
  • โทรศัพท์: 15px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อปและแท็บเล็ต: 20px
  • โทรศัพท์: 15px
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อปและแท็บเล็ต: 50px
  • โทรศัพท์: 40px
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อปและแท็บเล็ต: 50px
  • โทรศัพท์: 40px

2. ใช้การตั้งค่าติดหนึบ

เลี้ยวแถว #1 Sticky

ตอนนี้เรามีองค์ประกอบทั้งหมดแล้ว เราก็สามารถมุ่งเน้นไปที่การตั้งค่าที่ติดหนึบ เปิดการตั้งค่าของแถวแรกและใช้การตั้งค่าแบบติดหนึบต่อไปนี้:

• ตำแหน่งติดหนึบ: Stick to Top
• ขีด จำกัด ติดหนึบด้านล่าง: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

ความทึบเหนียว

จากนั้น เปลี่ยนความทึบในการตั้งค่าตัวกรอง

• ค่าเริ่มต้น: 20%
• เหนียว: 100%

โมดูลรูปภาพ #1 การตั้งค่าติดหนึบ

ระยะห่าง

ถัดไป เปิดการตั้งค่าของ Image Module ในคอลัมน์ 1 ไปที่แท็บการออกแบบ และเพิ่มขอบด้านบนและด้านขวาที่ติดหนึบ

• ขอบบนเหนียว: -20%
• ขอบขวาเหนียว: -20%

การเปลี่ยนแปลง

เพิ่มระยะเวลาการเปลี่ยนภาพด้วย

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

โมดูลรูปภาพ #2 Sticky Spacing

ระยะห่าง

ไปที่ Image Module ในคอลัมน์ 2 และใช้การตั้งค่าการเว้นวรรคแบบติดหนึบต่อไปนี้:

• มาร์จิ้นติดหนึบ: 20%
• ระยะขอบซ้ายเหนียว: -30%

การเปลี่ยนแปลง

เพิ่มระยะเวลาการเปลี่ยนแปลงที่นี่ด้วย

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

โมดูลรูปภาพ #3 Sticky Spacing

ระยะห่าง

ถัดไป เรามี Image Module ในคอลัมน์ 3 ใช้ค่าการเว้นวรรคแบบติดหนึบต่อไปนี้:

• ขอบบนเหนียว: -10%
• ระยะขอบซ้ายติดหนึบ: -25%
• ขอบขวาติดหนึบ: -25%

การเปลี่ยนแปลง

เปลี่ยนระยะเวลาการเปลี่ยนตาม:

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

โมดูลรูปภาพ #4 Sticky Spacing

ระยะห่าง

และสุดท้าย เปิด Image Module ในคอลัมน์ 4 ใช้ค่าการเว้นวรรคแบบติดหนึบต่อไปนี้:

• ขอบบนเหนียว: -20%
• ระยะขอบซ้ายเหนียว: -30%

การเปลี่ยนแปลง

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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