วิธีรวมการทับซ้อนกับตัวเลือก Sticky ของ Divi เพื่อสร้างการเปลี่ยนที่ง่ายดาย

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างโครงสร้างการออกแบบใหม่

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

ขนาด

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

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

ดัชนี Z

กำหนดดัชนี az ให้กับแถวนี้ด้วย

• ดัชนี Z: 1

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

ปล่อยให้กล่องรูปภาพว่าง

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลรูปภาพ ปล่อยให้กล่องเนื้อหาว่างเปล่า

ใช้ภาพพื้นหลังแทน

และใช้ภาพพื้นหลังที่คุณเลือกแทน

• ขนาดภาพพื้นหลัง: ปก

ขนาด

เปลี่ยนความกว้างของโมดูลต่อไป

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

ระยะห่าง

จากนั้น ใช้ช่องว่างด้านบนและด้านล่างแบบกำหนดเองกับการตั้งค่าระยะห่าง

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

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความที่มีเนื้อหา H2 บางส่วนที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 10vw
  • แท็บเล็ต: 14vw
  • โทรศัพท์: 15vw
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -0.5vw

ขนาด

ตรวจสอบให้แน่ใจว่าโมดูลนั้นเป็น "100%" ด้วย

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

ตำแหน่ง

และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center

เพิ่มแถว #2

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

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

ขนาด

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

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

ดัชนี Z

กำหนดดัชนี az ให้กับแถวนี้ด้วย

• ดัชนี Z: 2

ระยะห่างคอลัมน์ 1

ตั้งค่าแถวให้เสร็จสมบูรณ์โดยเปิดการตั้งค่าคอลัมน์แรกและกำหนดช่องว่างภายในด้านซ้ายและขวา

• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

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

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

เมื่อตั้งค่าแถวเรียบร้อยแล้ว ก็ถึงเวลาเพิ่มโมดูล เพิ่มโมดูลข้อความลงในคอลัมน์ 1 พร้อมเนื้อหา H3 ที่คุณเลือก

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

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

• หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของหัวเรื่อง 3: ขีดเส้นใต้
• หัวเรื่อง 3 ขีดเส้นใต้สี: #ffffff
• หัวเรื่อง 3 รูปแบบการขีดเส้นใต้: ทึบ
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 4vw
  • แท็บเล็ตและโทรศัพท์: 10vw
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -3px

ระยะห่าง

เพิ่มช่องว่างภายในที่เหมาะสมกับขนาดหน้าจอที่เล็กลง

• ช่องว่างภายในด้านขวา: 20% (แท็บเล็ตและโทรศัพท์เท่านั้น)

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

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

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

สีพื้นหลัง

เปลี่ยนสีพื้นหลังต่อไป

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

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

จากนั้น แก้ไขการตั้งค่าข้อความดังนี้:

• แบบอักษรข้อความ: Playfair Display
• รูปแบบตัวอักษรของข้อความ: ตัวเอียง
• ขนาดข้อความ:
  • เดสก์ท็อป: 1.6vw
  • แท็บเล็ต: 3vw
  • โทรศัพท์: 4vw
• ความสูงของบรรทัดข้อความ: 1.5em

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 10vh
• ช่องว่างภายใน: 10vh
• ช่องว่างภายในด้านซ้าย: 10%
• ช่องว่างภายในด้านขวา: 10%

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

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3.5vw
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต

• รูปแบบตัวอักษรของปุ่ม: ขีดเส้นใต้
• ปุ่มขีดเส้นใต้สี: #000000
• สไตล์การขีดเส้นใต้ปุ่ม: ของแข็ง

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ตำแหน่ง

และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา

2. ใช้เอฟเฟกต์ติดหนึบ

โมดูลรูปภาพในแถว #1

การตั้งค่าติดหนึบ

เมื่อเราได้สร้างรากฐานของการออกแบบแล้ว ก็ถึงเวลาเริ่มใช้เอฟเฟกต์ Sticky แบบกำหนดเอง เปิด Image Module ในแถว #1 และหมุนโมดูล Sticky ดังนี้:

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

ขนาดเหนียว

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

• ความกว้างเหนียว: 80%

ระยะห่างเหนียว

ต่อไป เราจะปรับเปลี่ยน padding ด้านบนและด้านล่างแบบเหนียว

• Sticky Top Padding: 50vh
• แผ่นรองด้านล่างเหนียว: 50vh

พื้นหลังไล่ระดับเหนียว

เราจะใช้พื้นหลังการไล่ระดับสีแบบเหนียวกับโมดูลของเราด้วย

• สี 1: #00336b
• สี 2: rgba(41,196,169,0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

และเพื่อให้การเปลี่ยนแปลงเป็นไปอย่างราบรื่น เราจะเพิ่มระยะเวลาการเปลี่ยนผ่านของโมดูล

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

คอลัมน์ 2 ในแถว #2

คอลัมน์ 2 การตั้งค่าติดหนึบ

ต่อไป เราจะเปลี่ยนคอลัมน์ที่สองของ Sticky แถวที่สองของเราด้วย

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

โมดูลข้อความในคอลัมน์ปักหมุด

สีพื้นหลังเหนียว

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

• สีพื้นหลังเหนียว: #333333

สีข้อความเหนียว

ถัดไป แก้ไขสีข้อความในสถานะติดหนึบ

• สีข้อความติดหนึบ: #ffffff

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

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มระยะเวลาการเปลี่ยนแปลงในแท็บขั้นสูง แค่นั้นแหละ!

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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