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

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

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

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

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

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

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

อัพเดต เนื้อหา ของโมดูลข้อความที่มีองค์ประกอบดังต่อไปนี้:

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

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

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

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

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

นี่คือวิธี

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

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

เพิ่มโมดูล Divi ใหม่

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

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

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

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

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

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

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

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

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

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

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

ระบุเดือน Divi

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

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

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

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

  • ตำแหน่ง: ญาติ
  • ดัชนี 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

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

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

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

  • เริ่มชดเชย: 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 พิกเซลลงในคอลัมน์ หากคุณไม่เพิ่มช่องว่างนี้ตัวคั่นจะทับตัวเลข

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

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

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

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

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

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

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

ผลสุดท้าย

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

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

คิดสุดท้าย

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