ข้ามไปยังเนื้อหาหลัก

วิธีการเพิ่มตัวนับภาพเคลื่อนไหวเพื่อเลื่อนบน Divi

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

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

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

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

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

ตอนที่ 1: การสร้างหัวข้อ

ในส่วนแรกนี้เราจะสร้างชื่อเรื่องง่ายสำหรับเค้าโครง

ขั้นแรกให้เพิ่มแถวหนึ่งคอลัมน์ในส่วน

ลงทะเบียนโมดูลส่วน divi

จากนั้นเพิ่มโมดูลข้อความใหม่ลงในบรรทัด

อัพเดตเนื้อหาของโมดูลข้อความด้วยสิ่งต่อไปนี้:

บันทึกวันที่
บันทึกวันที่ 1

จากนั้นอัปเดตรูปแบบข้อความส่วนหัวดังนี้:

  • หัวเรื่อง 2 แบบอักษร: Prata
  • รายการ 2 ขนาดตัวอักษร: 130px (เดสก์ท็อป), 70px (แท็บเล็ต), 40px (โทรศัพท์)
การปรับเปลี่ยนชื่อ Divi

ส่วนที่ 2: การสร้างตัวนับพร้อมภาพเคลื่อนไหวการเลื่อน

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

นี่คือวิธี

เพิ่มบรรทัดที่สอง

ใต้แถวที่มีอยู่ให้เพิ่มแถวอื่นลงในคอลัมน์

การตั้งค่าสาย

ก่อนเพิ่มโมดูลให้อัปเดตพารามิเตอร์แถวดังนี้:

  • ความกว้างของรางน้ำ: 1
  • ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
การกำหนดค่าเส้นขอบ Divi

พารามิเตอร์คอลัมน์

จากนั้นเปิดการตั้งค่าคอลัมน์และอัปเดตการเติมดังนี้:

  • ช่องว่างภายใน (โต๊ะ): 100px ต่ำ
  • Padding (แท็บเล็ตและโทรศัพท์): 0px ต่ำ
การกำหนดค่าระยะห่างคอลัมน์ Divi

เพิ่มโมดูลข้อความ

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

เพิ่มโมดูลข้อความ Divi

เนื้อหา / ฉลาก

สำหรับเนื้อหาของโมดูลข้อความให้เพิ่มคำว่า "month"

ระบุเดือน Divi

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

หลังจากเพิ่มเนื้อหาให้อัปเดตการตั้งค่าการออกแบบดังนี้:

  • สีพื้นหลัง: #ffffff
  • แบบอักษรของข้อความ: พูดคุย
  • ขนาดตัวอักษร: 40px
  • ความสูงของบรรทัดข้อความ: 2em
  • ความกว้าง: 100%
  • การขยาย: 20 พิกเซลที่ด้านบน, 20 พิกเซลที่ด้านล่าง, 20 พิกเซลทางด้านซ้าย, 20 พิกเซลทางด้านขวา
  • ความกว้างชายแดนด้านล่าง: 5px
  • สีของเส้นขอบด้านล่าง: #eeeeee
ตำแหน่ง

จากนั้นภายใต้แท็บขั้นสูงให้อัปเดตตัวเลือกตำแหน่งดังนี้:

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

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

  • ตำแหน่ง: ญาติ
  • ดัชนี Z 1
โมดูลปราตาเวิร์ดเพรส

เพิ่มโมดูลข้อความสำหรับปัญหาแรก

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

เพิ่มโมดูลข้อความผู้เล่าเรื่อง

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

จากนั้นอัปเดตป้ายโมดูลข้อความให้อ่าน“ num1” เพื่อการอ้างอิงที่ง่ายขึ้น จากนั้นอัปเดตเนื้อหาด้วยหมายเลข“ 01”

เพิ่มโมดูลหมายเลข Divi

การตั้งค่าการออกแบบสำหรับตัวเลข

ภายใต้แท็บออกแบบอัปเดตต่อไปนี้:

  • แบบอักษรของข้อความ: Prata
  • สีข้อความตัวอักษร: # 8ab2d3
  • ขนาดตัวอักษร: 70px
  • การเว้นวรรคตัวอักษรข้อความ: 4px
  • ความสูงบรรทัดข้อความ: 1.5em
  • Padding: เหลือ 20px
การกำหนดค่าสี Divi

หมายเหตุ: ตัวเลขมีขนาดตัวอักษร 70px และความสูงบรรทัด 1.5em ซึ่งหมายความว่าความสูงรวมของโมดูลข้อความจะใกล้เคียงกับ 100px นี่เป็นสิ่งสำคัญที่ต้องจำไว้เมื่อใดก็ตามที่เราเริ่มเพิ่มการชดเชยการเคลื่อนที่ในแนวตั้ง ตัวอย่างเช่นการเพิ่มออฟเซตแนวตั้งของ“ 1” ลงในโมดูลข้อความจะย้ายโมดูลข้อความอย่างแน่นอน 100px ซึ่งเป็นความสูงของโมดูลข้อความ

ผลเลื่อนสำหรับจำนวนแรก

เพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้ลงในโมดูลข้อความ

ภายใต้แท็บเคลื่อนที่ในแนวตั้งอัปเดตสิ่งต่อไปนี้

  • เปิดใช้งานการเคลื่อนที่ในแนวตั้ง: ใช่
  • เริ่มชดเชย: 1 (ที่ 10%)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 20%)
  • ส่วนท้ายชดเชย: -1 (ที่ 30%)

บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:

  • เปิดใช้งานจางหายไป: YES
  • ความทึบเริ่มแรก: 0% (ที่ 10%)
  • ความทึบแสงเฉลี่ย: 100% (ที่ 20%)
  • สิ้นสุดความทึบ: 0% (ถึง 30%)

อย่าลืมตั้งค่าทริกเกอร์สำหรับเอฟเฟกต์การเคลื่อนไหวที่ด้านบนของคลิป:

  • ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: องค์ประกอบด้านบน
การกำหนดค่าข้อความ Divi ของโมดูลภาพเคลื่อนไหว

สร้างโมดูลข้อความสำหรับหมายเลขที่สอง

ทำซ้ำหมายเลขแรก

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

โมดูลข้อความ divi 1 ที่ซ้ำกัน

อัพเดตหมายเลข / เนื้อหา

เปิดพารามิเตอร์ของโมดูลข้อความดิจิตอลตัวที่สองและอัพเดตเนื้อหาด้วยหมายเลข "02"

บันทึกหมายเลข 2 divi

อัปเดตตำแหน่ง

จากนั้นอัปเดตตัวเลือกตำแหน่งดังต่อไปนี้:

  • ตำแหน่ง: สัมบูรณ์
  • ชดเชยแนวตั้ง: 126px
การแก้ไขตำแหน่งของโมดูลข้อความ Divi

อัปเดตเอฟเฟกต์การเลื่อน

จากนั้นอัปเดตเอฟเฟกต์การเลื่อนดังนี้:

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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

  • เริ่มชดเชย: 1 (ที่ 20%)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 30%)
  • ส่วนท้ายชดเชย: -1 (ที่ 40%)

บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:

  • ความทึบเริ่มแรก: 0% (ที่ 20%)
  • ความทึบแสงเฉลี่ย: 100% (ที่ 30%)
  • สิ้นสุดความทึบ: 0% (ถึง 40%)
เอฟเฟกต์เลื่อนภาพเคลื่อนไหว Divi

สร้างโมดูลข้อความสำหรับปัญหาที่สาม

ทำซ้ำหมายเลขที่สอง

ในการสร้างโมดูลข้อความสำหรับหมายเลขที่สามให้ทำซ้ำโมดูลข้อความสำหรับหมายเลขที่สอง

โมดูลข้อความซ้ำหมายเลข 3

อัพเดตหมายเลข / เนื้อหา

อัปเดตเนื้อหาด้วยหมายเลข "03"

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

อัปเดตเอฟเฟกต์การเลื่อน

จากนั้นอัปเดตเอฟเฟกต์การเลื่อน:

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

  • เริ่มชดเชย: 1 (ที่ 30%)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 40%)
  • ส่วนท้ายชดเชย: -1 (ที่ 50%)

บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:

  • ความทึบเริ่มแรก: 0% (ที่ 30%)
  • ความทึบแสงเฉลี่ย: 100% (ที่ 40%)
  • สิ้นสุดความทึบ: 0% (ถึง 50%)
แก้ไขภาพเคลื่อนไหวโมดูลข้อความ

สร้างโมดูลข้อความสำหรับปัญหาที่สี่

ปัญหาที่ซ้ำกันที่สาม

หากต้องการสร้างหมายเลขที่สี่สำหรับตัวเลื่อนการเลื่อนให้ทำซ้ำโมดูลข้อความสำหรับหมายเลขที่สาม

โมดูลข้อความที่ซ้ำกันหมายเลข 4

อัพเดตหมายเลข / เนื้อหา

อัปเดตเนื้อหาด้วยหมายเลข "04"

กำหนดค่าโมดูลข้อความ Divi

อัปเดตเอฟเฟกต์การเลื่อน

จากนั้นอัปเดตเอฟเฟกต์การเลื่อน:

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

  • เริ่มชดเชย: 1 (ที่ 40%)
  • ค่าชดเชยเฉลี่ย: 0 (ที่ 50%)
  • ส่วนท้ายชดเชย: 0 (ที่ 60%)

บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:

  • ความทึบเริ่มแรก: 0% (ที่ 40%)
  • ความทึบแสงเฉลี่ย: 100% (ที่ 50%)
  • สิ้นสุดความทึบ: 100% (ถึง 60%)
โมดูลการกำหนดค่าภาพเคลื่อนไหว 4 Divi

เพิ่มตัวคั่นที่ต่ำกว่า

ภายใต้โมดูลข้อความสุดท้ายให้เพิ่มโมดูลตัวคั่นใหม่ สิ่งนี้จะใช้เพื่อซ่อนส่วนที่ล้นด้านล่างของข้อความเลื่อนในมุมมอง

เพิ่มโมดูลตัวคั่น Divi

จากนั้นเลือกไม่เพื่อแสดงตัวคั่น

อย่าแสดงตัวคั่น Divi

การตั้งค่าสไตล์และตำแหน่ง

อัพเดตการออกแบบตัวคั่นดังนี้:

  • สีพื้นหลัง: #ffffff
  • ความกว้าง: 100%
  • ความสูง: 100px
  • ความกว้างชายแดนด้านบน: 5px

บนแท็บขั้นสูงอัปเดตสิ่งต่อไปนี้:

  • ปิดใช้งาน: โทรศัพท์และแท็บเล็ต
  • ตำแหน่ง: สัมบูรณ์
  • ที่ตั้ง: ด้านล่างซ้าย

สิ่งสำคัญ: พื้นที่ที่ตัวคั่นจะใช้ถูกสร้างขึ้นก่อนหน้านี้โดยการเพิ่มช่องว่างด้านล่าง 100 พิกเซลลงในคอลัมน์ หากคุณไม่เพิ่มช่องว่างนี้ตัวคั่นจะทับตัวเลข

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

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

การสร้างตัวนับและคอลัมน์เพิ่มเติม

ทำซ้ำคอลัมน์ 1 และอัปเดตเนื้อหา

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

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

ทำซ้ำ divi ทั้งคอลัมน์

ทำซ้ำคอลัมน์ 2 และอัปเดตเนื้อหา

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

ผลสุดท้าย

นี่คือผลสุดท้าย

ทรัพยากรอื่น ๆ

คิดสุดท้าย

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

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน