ตัวนับจำนวนเคลื่อนไหวเป็นที่นิยมบนเว็บเป็นวิธีการแสดงตัวเลข données เพื่อเน้นคุณค่าของบริการ กรณีศึกษา ฯลฯ Divi มีโมดูลตัวนับจำนวนเฉพาะซึ่งสามารถใช้เพื่อสร้างตัวนับตัวเลขแบบเคลื่อนไหวได้อย่างง่ายดาย
อย่างไรก็ตาม ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างตัวนับตัวเลขที่เคลื่อนไหวบนการเลื่อนโดยใช้ Divi. การใช้ตัวเลือกตำแหน่งและเอฟเฟกต์การเลื่อนของ Diviเราจะออกแบบเลย์เอาต์ที่เรียบง่ายเพื่อแสดงวันที่พร้อมตัวเลขเลื่อน
ตอนที่ 1: การสร้างหัวข้อ
ในส่วนแรกนี้เราจะสร้างชื่อเรื่องง่ายสำหรับเค้าโครง
ขั้นแรกให้เพิ่มแถวหนึ่งคอลัมน์ในส่วน
จากนั้นเพิ่มโมดูลข้อความใหม่ลงในบรรทัด
อัพเดต เนื้อหา ของโมดูลข้อความที่มีองค์ประกอบดังต่อไปนี้:
บันทึกวันที่
จากนั้นอัปเดตรูปแบบข้อความส่วนหัวดังนี้:
- หัวเรื่อง 2 แบบอักษร: Prata
- รายการ 2 ขนาดตัวอักษร: 130px (เดสก์ท็อป), 70px (แท็บเล็ต), 40px (โทรศัพท์)
ส่วนที่ 2: การสร้างตัวนับพร้อมภาพเคลื่อนไหวการเลื่อน
ในส่วนถัดไปเราจะสร้างตัวนับสามตัวที่จะทำให้ตัวเลขการเลื่อนเคลื่อนไหวจนกว่าจะหยุดแสดงวันที่ (เดือนวันและปี) ตัวนับแต่ละตัวจะถูกสร้างขึ้นโดยใช้โมดูลข้อความทั้งหมด 5 โมดูลและโมดูลตัวคั่น โมดูลข้อความแรกจะทำหน้าที่เป็นป้ายกำกับของตัวนับ (เช่นเดือนวันปี) โมดูลข้อความสี่โมดูลถัดไปแต่ละโมดูลจะมีตัวเลขที่แตกต่างกัน (อยู่ระหว่างดำเนินการ) ซึ่งจะเคลื่อนไหวในการเลื่อนโดยใช้การชดเชยการเคลื่อนที่ในแนวตั้งใน Divi โมดูลการแยกส่วนล่างจะช่วยซ่อนการล้นของตัวเลข
นี่คือวิธี
เพิ่มบรรทัดที่สอง
ใต้แถวที่มีอยู่ให้เพิ่มแถวอื่นลงในคอลัมน์
การตั้งค่าสาย
ก่อนเพิ่มโมดูลให้อัปเดตพารามิเตอร์แถวดังนี้:
- ความกว้างของรางน้ำ: 1
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
พารามิเตอร์คอลัมน์
จากนั้นเปิดการตั้งค่าคอลัมน์และอัปเดตการเติมดังนี้:
- ช่องว่างภายใน (โต๊ะ): 100px ต่ำ
- Padding (แท็บเล็ตและโทรศัพท์): 0px ต่ำ
เพิ่มโมดูลข้อความ
จากนั้นเพิ่มโมดูลข้อความลงในคอลัมน์
เนื้อหา / ฉลาก
สำหรับ เนื้อหา จากโมดูลข้อความ ให้เพิ่มคำว่า "เดือน"
การตั้งค่าการออกแบบข้อความ
เมื่อ เนื้อหา เพิ่ม อัพเดตการตั้งค่าการออกแบบดังนี้:
- สีพื้นหลัง: #ffffff
- แบบอักษรของข้อความ: พูดคุย
- ขนาดตัวอักษร: 40px
- ความสูงของบรรทัดข้อความ: 2em
- ความกว้าง: 100%
- การขยาย: 20 พิกเซลที่ด้านบน, 20 พิกเซลที่ด้านล่าง, 20 พิกเซลทางด้านซ้าย, 20 พิกเซลทางด้านขวา
- ความกว้างชายแดนด้านล่าง: 5px
- สีของเส้นขอบด้านล่าง: #eeeeee
ตำแหน่ง
จากนั้นภายใต้แท็บขั้นสูงให้อัปเดตตัวเลือกตำแหน่งดังนี้:
- ตำแหน่ง: ญาติ
- ดัชนี Z 1
เพิ่มโมดูลข้อความสำหรับปัญหาแรก
เมื่อโมดูลข้อความแรกเข้าที่แล้วเราสามารถเริ่มเพิ่มตัวเลขที่จะย้ายไปที่เลื่อนได้ หากต้องการเพิ่มหมายเลขแรกให้เพิ่มโมดูลข้อความใหม่ในโมดูลข้อความ "เดือน" ที่มีอยู่
เพิ่มหมายเลข / เนื้อหา
จากนั้นอัปเดตป้ายโมดูลข้อความให้อ่าน“ num1” เพื่อการอ้างอิงที่ง่ายขึ้น จากนั้นอัปเดตเนื้อหาด้วยหมายเลข“ 01”
การตั้งค่าการออกแบบสำหรับตัวเลข
ภายใต้แท็บออกแบบอัปเดตต่อไปนี้:
- แบบอักษรของข้อความ: Prata
- สีข้อความตัวอักษร: # 8ab2d3
- ขนาดตัวอักษร: 70px
- การเว้นวรรคตัวอักษรข้อความ: 4px
- ความสูงบรรทัดข้อความ: 1.5em
- Padding: เหลือ 20px
หมายเหตุ: ตัวเลขมีขนาดตัวอักษร 70px และความสูงบรรทัด 1.5em ซึ่งหมายความว่าความสูงรวมของโมดูลข้อความจะใกล้เคียงกับ 100px นี่เป็นสิ่งสำคัญที่ต้องจำไว้เมื่อใดก็ตามที่เราเริ่มเพิ่มการชดเชยการเคลื่อนที่ในแนวตั้ง ตัวอย่างเช่นการเพิ่มออฟเซตแนวตั้งของ“ 1” ลงในโมดูลข้อความจะย้ายโมดูลข้อความอย่างแน่นอน 100px ซึ่งเป็นความสูงของโมดูลข้อความ
ผลเลื่อนสำหรับจำนวนแรก
เพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้ลงในโมดูลข้อความ
ภายใต้แท็บเคลื่อนที่ในแนวตั้งอัปเดตสิ่งต่อไปนี้
- เปิดใช้งานการเคลื่อนที่ในแนวตั้ง: ใช่
- เริ่มชดเชย: 1 (ที่ 10%)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 20%)
- ส่วนท้ายชดเชย: -1 (ที่ 30%)
บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:
- เปิดใช้งานจางหายไป: YES
- ความทึบเริ่มแรก: 0% (ที่ 10%)
- ความทึบแสงเฉลี่ย: 100% (ที่ 20%)
- สิ้นสุดความทึบ: 0% (ถึง 30%)
อย่าลืมตั้งค่าทริกเกอร์สำหรับเอฟเฟกต์การเคลื่อนไหวที่ด้านบนของคลิป:
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: องค์ประกอบด้านบน
สร้างโมดูลข้อความสำหรับหมายเลขที่สอง
ทำซ้ำหมายเลขแรก
เมื่อสร้างหมายเลขแรกแล้วให้ทำซ้ำเพื่อสร้างโมดูลข้อความหมายเลขที่สอง จากนั้นอัปเดตป้ายกำกับในมุมมองเลเยอร์เพื่อการอ้างอิงที่ดีขึ้น
อัพเดตหมายเลข / เนื้อหา
เปิดพารามิเตอร์ของโมดูลข้อความดิจิตอลตัวที่สองและอัพเดตเนื้อหาด้วยหมายเลข "02"
อัปเดตตำแหน่ง
จากนั้นอัปเดตตัวเลือกตำแหน่งดังต่อไปนี้:
- ตำแหน่ง: สัมบูรณ์
- ชดเชยแนวตั้ง: 126px
อัปเดตเอฟเฟกต์การเลื่อน
จากนั้นอัปเดตเอฟเฟกต์การเลื่อนดังนี้:
บนแท็บการเคลื่อนไหวแนวตั้งให้อัพเดตสิ่งต่อไปนี้:
- เริ่มชดเชย: 1 (ที่ 20%)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 30%)
- ส่วนท้ายชดเชย: -1 (ที่ 40%)
บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:
- ความทึบเริ่มแรก: 0% (ที่ 20%)
- ความทึบแสงเฉลี่ย: 100% (ที่ 30%)
- สิ้นสุดความทึบ: 0% (ถึง 40%)
สร้างโมดูลข้อความสำหรับปัญหาที่สาม
ทำซ้ำหมายเลขที่สอง
ในการสร้างโมดูลข้อความสำหรับหมายเลขที่สามให้ทำซ้ำโมดูลข้อความสำหรับหมายเลขที่สอง
อัพเดตหมายเลข / เนื้อหา
อัปเดตเนื้อหาด้วยหมายเลข "03"
อัปเดตเอฟเฟกต์การเลื่อน
จากนั้นอัปเดตเอฟเฟกต์การเลื่อน:
บนแท็บการเคลื่อนไหวแนวตั้งให้อัพเดตสิ่งต่อไปนี้:
- เริ่มชดเชย: 1 (ที่ 30%)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 40%)
- ส่วนท้ายชดเชย: -1 (ที่ 50%)
บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:
- ความทึบเริ่มแรก: 0% (ที่ 30%)
- ความทึบแสงเฉลี่ย: 100% (ที่ 40%)
- สิ้นสุดความทึบ: 0% (ถึง 50%)
สร้างโมดูลข้อความสำหรับปัญหาที่สี่
ปัญหาที่ซ้ำกันที่สาม
หากต้องการสร้างหมายเลขที่สี่สำหรับตัวเลื่อนการเลื่อนให้ทำซ้ำโมดูลข้อความสำหรับหมายเลขที่สาม
อัพเดตหมายเลข / เนื้อหา
อัปเดตเนื้อหาด้วยหมายเลข "04"
อัปเดตเอฟเฟกต์การเลื่อน
จากนั้นอัปเดตเอฟเฟกต์การเลื่อน:
บนแท็บการเคลื่อนไหวแนวตั้งให้อัพเดตสิ่งต่อไปนี้:
- เริ่มชดเชย: 1 (ที่ 40%)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 50%)
- ส่วนท้ายชดเชย: 0 (ที่ 60%)
บนแท็บ Fade In และ Fade Out ให้อัปเดตสิ่งต่อไปนี้:
- ความทึบเริ่มแรก: 0% (ที่ 40%)
- ความทึบแสงเฉลี่ย: 100% (ที่ 50%)
- สิ้นสุดความทึบ: 100% (ถึง 60%)
เพิ่มตัวคั่นที่ต่ำกว่า
ภายใต้โมดูลข้อความสุดท้ายให้เพิ่มโมดูลตัวคั่นใหม่ สิ่งนี้จะใช้เพื่อซ่อนส่วนที่ล้นด้านล่างของข้อความเลื่อนในมุมมอง
จากนั้นเลือกไม่เพื่อแสดงตัวคั่น
การตั้งค่าสไตล์และตำแหน่ง
อัพเดตการออกแบบตัวคั่นดังนี้:
- สีพื้นหลัง: #ffffff
- ความกว้าง: 100%
- ความสูง: 100px
- ความกว้างชายแดนด้านบน: 5px
บนแท็บขั้นสูงอัปเดตสิ่งต่อไปนี้:
- ปิดใช้งาน: โทรศัพท์และแท็บเล็ต
- ตำแหน่ง: สัมบูรณ์
- ที่ตั้ง: ด้านล่างซ้าย
สิ่งสำคัญ: พื้นที่ที่ตัวคั่นจะใช้ถูกสร้างขึ้นก่อนหน้านี้โดยการเพิ่มช่องว่างด้านล่าง 100 พิกเซลลงในคอลัมน์ หากคุณไม่เพิ่มช่องว่างนี้ตัวคั่นจะทับตัวเลข
การสร้างตัวนับและคอลัมน์เพิ่มเติม
ทำซ้ำคอลัมน์ 1 และอัปเดตเนื้อหา
ในการสร้างตัวนับใหม่ให้สร้างคอลัมน์ที่ซ้ำกัน 1 ซึ่งจะสร้างคอลัมน์ที่สองที่มีองค์ประกอบทั้งหมดเข้าด้วยกันโดยอัตโนมัติ
สิ่งที่คุณต้องทำคืออัพเดตเนื้อหาของโมดูลข้อความทั้งหมดด้วยข้อความและตัวเลขใหม่
ทำซ้ำคอลัมน์ 2 และอัปเดตเนื้อหา
เมื่อปรับปรุงเนื้อหาของโมดูลข้อความทั้งหมดในคอลัมน์ 2 แล้วให้ทำซ้ำคอลัมน์ 2 เพื่อสร้างตัวนับที่สามสำหรับปี จากนั้นอัปเดตเนื้อหาของโมดูลข้อความแต่ละโมดูลตามต้องการ
ผลสุดท้าย
นี่คือผลสุดท้าย
ทรัพยากรอื่น ๆ
- วิธีใช้โมดูลตัวนับหมายเลขบน Divi
- วิธีใช้โมดูลตัวนับแบบวงกลมบน Divi
- วิธีสร้างเคาน์เตอร์วงกลมที่มีชีวิตชีวาบน Divi
คิดสุดท้าย
เลย์เอาต์ที่เรียบง่ายพร้อมตัวนับตัวเลขแบบเคลื่อนไหวที่เลื่อนได้นี้น่าจะมีประโยชน์สำหรับการแสดง données ดิจิทัลในรูปแบบใหม่ไม่ซ้ำใคร อย่าลังเลที่จะทิ้งแนวคิดการออกเดทและใช้ตัวนับสำหรับทุกสิ่งที่คุณฝันถึง!