Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

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

ผลลัพธ์ที่เป็นไปได้

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

Divi scroll snapping ตัวอย่างเดสก์ท็อป

1. สร้างหน้าใหม่และเริ่มออกแบบส่วนแรก

เพิ่มหน้าใหม่และเปลี่ยนเป็น Visual Builder

เริ่มต้นด้วยการเพิ่มหน้าใหม่ ป้อนชื่อเพจเผยแพร่เพจและเปลี่ยนเป็น Visual Builder

เพิ่มบทความ Divi
การสร้างบทความ Divi

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

ปรับขนาด

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

  • ความสูงขั้นต่ำ: 100vh
ขนาด Divi

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

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

scroll-snap-align: start; scroll-snap-stop: ปกติ;

เนื้อหา css divi

ความชัดเจน

เพื่อให้แน่ใจว่าไม่มีอะไรเกินคอนเทนเนอร์ส่วนเราจะซ่อนส่วนล้น

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

เพิ่มบรรทัด # 1

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

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

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

ปรับขนาด

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

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

การเว้นวรรค

เรากำลังนำการเพิ่มส่วนบนและด้านล่างเริ่มต้นของส่วนออกเช่นกัน

  • Padding ยอดนิยม: 0px
  • ช่องว่างภายในด้านล่าง: 0px
กำหนดค่าระยะห่าง Divi

ตำแหน่ง

และเราจะจัดตำแหน่งแถวใหม่ตามลำดับ:

  • ตำแหน่ง: สัมบูรณ์
  • สถานที่: Bottom Center
การกำหนดค่าตำแหน่งคอลัมน์ Divi

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

ปล่อยให้กล่องเนื้อหาว่างเปล่า

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

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

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

  • สีพื้นหลัง: # ffee00
การกำหนดค่าข้อความสีพื้นหลัง Divi

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

เราจะลบความสูงของบรรทัดข้อความของโมดูลด้วย

  • ความสูงบรรทัดข้อความ: 1em
การปรับข้อความความสูงของบรรทัด Divi

การกำหนดขนาด

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

  • ความกว้าง: 30%
ระยะห่างโมดูลข้อความ Divi

การเว้นวรรค

เราจะเปลี่ยนโมดูลเป็นสี่เหลี่ยมจัตุรัสโดยเพิ่มการเติมด้านบนบางส่วนเช่นกัน

  • ช่องว่างภายในยอดนิยม: 30%
โมดูล Divi ระยะห่างภายใน

เพิ่มแถว # 2

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

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

เลือกเค้าโครงบรรทัด 2 divi

ปรับขนาด

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

  • ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1
  • ความกว้าง: 60vw
  • ความกว้างสูงสุด: 100%
การกำหนดค่า Divi ของคอลัมน์ 2

การเว้นวรรค

จากนั้นเพิ่มระยะขอบบนที่กำหนดเองบนหน้าจอขนาดต่างๆ

  • ระยะขอบบน: 20vh (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
การกำหนดค่าระยะห่างโมดูลคอลัมน์ Divi

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

จากนั้นเราจะเปิดการตั้งค่าในคอลัมน์ 2 และเพิ่มค่าการเติมที่กำหนดเอง

  • padding บน: 2vh (แท็บเล็ตและโทรศัพท์)
  • การซ้อนด้านซ้าย: 2vw
  • ช่องว่างภายในที่เหมาะสม: 2vw
การกำหนดค่าระยะห่างคอลัมน์ 2 โมดูล Divi

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

ลงรูปตนเอง

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

กำลังอัปโหลดรูปภาพ diiv

ปรับขนาด

จากนั้นเราจะบังคับให้เต็มความกว้างของโมดูล

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

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

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

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

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

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

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

  • หัวเรื่อง 2 แบบอักษร: Anton
  • รายการ 2 ขนาดตัวอักษร: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 9vw (โทรศัพท์)
เปลี่ยนแบบอักษร diiv

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

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

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

เพิ่มเนื้อหาลงในโมดูลข้อความ Divi

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

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

  • แบบอักษรของข้อความ: เปิด Sans
  • ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
  • ความสูงบรรทัดข้อความ: 1,8 em
การกำหนดค่าการจัดตำแหน่ง Divi

การเว้นวรรค

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

  • ขอบบน: 2vw
  • ขอบล่าง: 2vw
การกำหนดค่าระยะห่างโมดูลข้อความ Divi

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

เพิ่มสำเนา

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

เพิ่มปุ่ม Divi

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

จัดสไตล์ปุ่มตาม:

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

การเว้นวรรค

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

  • อัตรากำไรขั้นต้นภายในสูง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
  • มาร์จิ้นภายในต่ำ: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
  • ระยะขอบภายในซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
  • อัตรากำไรอินเทอร์เน็ตขวา: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
การกำหนดค่าระยะห่างของปุ่ม Divi

2. เพิ่มเอฟเฟกต์การเลื่อนให้กับองค์ประกอบต่างๆ

โมดูลข้อความในบรรทัด # 1

ภาพเคลื่อนไหวแนวตั้ง

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

  • เปิดใช้งานการเคลื่อนที่ในแนวตั้ง: ใช่
  • เริ่มออฟเซ็ต: 4
  • กลางออฟเซ็ต: 0
  • การสิ้นสุดออฟเซ็ต: -4
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ
ภาพเคลื่อนไหวโมดูลข้อความ Divi

บรรทัด # 2

คอลัมน์ 1

ภาพเคลื่อนไหวแนวนอน

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

  • เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
  • เริ่มชดเชย: -3
  • การชดเชยเฉลี่ย: 0 (จาก 40% ถึง 60%)
  • ออฟเซ็ตสิ้นสุด: -3
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
ภาพเคลื่อนไหวแนวนอน
จางเข้าและออก

นอกจากนี้เรายังใช้เอฟเฟกต์เฟดเข้าและเฟดเอาต์กับคอลัมน์เดียวกันนั้นด้วย

  • เปิดใช้งานจางหายไป: ใช่
  • ความทึบเริ่มแรก: 0%
  • ความทึบแสงเฉลี่ย: 100%
  • ความทึบสุดท้าย: 100%
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
ภาพเคลื่อนไหวจาง

คอลัมน์ 2

การเคลื่อนไหวในแนวนอน

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

  • เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
  • เริ่มการชดเชย: 3
  • การชดเชยเฉลี่ย: 0 (จาก 40% ถึง 60%)
  • ออฟเซ็ตสิ้นสุด: 3
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
คอลัมน์การเคลื่อนไหวในแนวนอน 2
จางเข้าและออก

พร้อมเอฟเฟกต์จางหายเข้าและออก

  • เปิดใช้งานจางหายไป: ใช่
  • ความทึบเริ่มแรก: 0%
  • ความทึบแสงเฉลี่ย: 100%
  • ความทึบสุดท้าย: 100%
  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ
ฟองดูเอาท์พุต

4. นำส่วนแรกมาใช้ซ้ำ

โคลนส่วนสี่ครั้ง

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

ส่วนโคลน

เปลี่ยนสีพื้นหลังของส่วนอื่น ๆ ทั้งหมด

เราจะเปลี่ยนสีพื้นหลังของส่วนอื่น ๆ ทั้งหมด

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

5. เพิ่มรหัส CSS เพื่อเปิดใช้งานการจับภาพเลื่อนในหน้า HTML

เพิ่มโมดูลรหัสในส่วนสุดท้ายของหน้า

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

การแทรกโมดูลโค้ด

ใส่รหัส HTML CSS

บรรทัดโค้ด CSS เหล่านี้จะช่วยให้เราใช้การจัดตำแหน่งแบบเลื่อนกับโค้ด HTML ของเพจของเรา:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

เพิ่ม Scroll Snapping Start ไปที่ Header and Footer

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

ส่วนหัว, ส่วนท้าย {scroll-snap-align: start;}

จะเสร็จสิ้น

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

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