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

แสดงหมายเลข divi wordpress.png

วิธีการเพิ่มโมดูลหมายเลข Counter ของ Divi

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

divi builder

เมื่อคุณเข้าสู่ Visual Builder แล้วคุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน

divi.png เคาน์เตอร์หมายเลข

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

ตัวอย่างการใช้งาน: การใช้โมดูลตัวนับดิจิทัลเพื่อแสดงผลลัพธ์ของโครงการ

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

อย่างที่คุณเห็นด้านบนของหน้ามีวัตถุประสงค์สามประการของโครงการโดยใช้โมดูล " เคาน์เตอร์บาร์ และด้านล่างของหน้ารวมถึงผลของกรณีศึกษาโดยใช้โมดูลตัวนับดิจิทัล

ตัวอย่าง compteur.gif

ส่วนของหน้าที่แสดงผลของกรณีศึกษาโดยใช้โมดูลดิจิทัลจำเป็นต้องใช้ส่วนเฉพาะ ใช้ Visual Builder เพิ่มส่วนพิเศษลงในเพจและเลือกเค้าโครงต่อไปนี้:

ส่วนที่กำหนดเอง divi.png

เลือกเค้าโครง 1 คอลัมน์สำหรับด้านขวาของส่วนและป้อนชื่อเรื่องและข้อความที่จำเป็นสำหรับผลการศึกษากรณีศึกษา

insertion range divi.png

แทรกเค้าโครงของคอลัมน์ 2 โดยตรงภายใต้เค้าโครงคอลัมน์ 1 ทางด้านขวาของส่วน

divi.png แบ่งคอลัมน์

ตอนนี้เพิ่มโมดูลตัวนับหมายเลขแรกของคุณไปยังคอลัมน์ด้านซ้าย

เพิ่มหมายเลขส่วน divi.png

อัพเดตพารามิเตอร์ของตัวนับหมายเลขดังนี้:

ตัวเลือกเนื้อหา

ชื่อ: ผู้เข้าชมใหม่
หมายเลข: 54210
เปอร์เซ็นต์การเซ็นชื่อ: OFF

ตัวเลือกการออกแบบ

สีของข้อความ: มืด
แบบอักษรของชื่อ: ค่าดีฟอลต์
ขนาดแบบอักษรชื่อเรื่อง: 20px
สีข้อความชื่อ: # 405c60
ความสูงของบรรทัดชื่อ: 1em
จำนวนตัวอักษร: ค่าเริ่มต้นตัวหนา
จำนวนตัวอักษร: 60px
สีของข้อความจำนวน: # e07a5e
ความสูงของบรรทัดของจำนวน: 72px

หมายเลขเนื้อหา divi.png

บันทึกการตั้งค่า

ทำซ้ำโมดูลตัวนับจำนวนมากและลากลงในคอลัมน์ด้านขวาติดกันและอัปเดตตัวเลือกชื่อและหมายเลข

counter number ตัวอย่างการก่อสร้าง

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

การทำสำเนาตัวนับแบบดิจิตอล divi.png

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

อย่าลืมเพิ่มภาพ 667 x 320 ในคอลัมน์ด้านซ้าย / ด้านข้างของส่วนเฉพาะ

จบแล้ว! การรวมกันของตัวนับตัวเลขและตัวนับบาร์ในหน้ากรณีศึกษานี้ทำให้เนื้อหามีส่วนร่วมอย่างแท้จริง

โมดูลการทำให้เข้าใจขั้นสุดท้าย compteur.png

ตัวเลือกเนื้อหาตัวนับดิจิตอล

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

พื้นที่เนื้อหาที่เลือก wordpress divi.png

ชื่อเรื่อง

ป้อนชื่อตัวนับ สิ่งนี้จะแสดงภายใต้ตัวเลขเป็นข้อความขนาดเล็ก

ชื่อ

นี่คือตัวเลขที่เคาน์เตอร์จะนับ เมื่อคุณเลื่อนหน้าลงและไปถึงเคาน์เตอร์ตัวเลขจะนับจาก 0 อย่างรวดเร็วจนกว่าจะถึงหมายเลขที่คุณตั้งไว้ที่นี่ สามารถวางได้เฉพาะค่าตัวเลขที่นี่

เครื่องหมายเปอร์เซ็นต์

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

สีพื้นหลัง

กำหนดสีพื้นหลังแบบกำหนดเองสำหรับโมดูลของคุณหรือเว้นว่างไว้เพื่อใช้สีเริ่มต้น

ภาพพื้นหลัง

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

ป้ายกำกับผู้ดูแลระบบ

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

ตัวเลือกการออกแบบ (สไตล์) ของมิเตอร์ดิจิตอล

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

โซนออกแบบ counter divi.png

สีข้อความ

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

แบบอักษรชื่อเรื่อง

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

ขนาดตัวอักษรชื่อ

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

สีข้อความชื่อเรื่อง

โดยค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือสีเทาเข้ม หากคุณต้องการเปลี่ยนสีข้อความของชื่อเรื่องของคุณให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้

ระยะห่างของตัวอักษรชื่อ

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความชื่อเรื่องของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงของบรรทัดชื่อเรื่อง

ความสูงของเส้นมีผลต่อช่องว่างระหว่างแต่ละบรรทัดของข้อความชื่อเรื่องของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูล ที่อยู่ทางขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

แบบอักษรของจำนวน

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

ขนาดแบบอักษรของหมายเลข

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

สีของข้อความดิจิตอล

โดยค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือสีเทาเข้ม หากคุณต้องการเปลี่ยนสีของข้อความดิจิทัลให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้

การเว้นวรรคของตัวอักษรดิจิทัล

ระยะห่างของตัวอักษรมีผลต่อช่องว่างระหว่างตัวอักษรแต่ละตัว หากคุณต้องการเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัวในข้อความตัวเลขของคุณให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ความสูงบรรทัดของจำนวน

ความสูงของเส้นมีผลต่อช่องว่างระหว่างแต่ละบรรทัดของข้อความตัวเลขของคุณหากคุณต้องการเพิ่มช่องว่างระหว่างแต่ละบรรทัดให้ใช้แถบเลื่อนช่วงเพื่อปรับช่องว่างหรือป้อนขนาดระยะห่างที่ต้องการในช่องป้อนข้อมูล อยู่ทางด้านขวาของเคอร์เซอร์ ช่องป้อนข้อมูลรองรับหน่วยวัดที่แตกต่างกันซึ่งหมายความว่าคุณสามารถป้อน "px" หรือ "em" ขึ้นอยู่กับค่าขนาดของคุณเพื่อเปลี่ยนประเภทหน่วย

ใช้เส้นขอบ

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

สีของเส้นขอบ

ตัวเลือกนี้มีผลต่อสีของเส้นขอบของคุณ เลือกสีที่กำหนดเองจากตัวเลือกสีเพื่อใช้กับเส้นขอบของคุณ

ความกว้างของเส้นขอบ

โดยค่าเริ่มต้นเส้นขอบจะกว้าง 1 พิกเซล คุณสามารถเพิ่มค่านี้ได้โดยการลากแถบเลื่อนช่วงหรือป้อนค่าที่กำหนดเองในช่องป้อนข้อมูลทางด้านขวาของแถบเลื่อน รองรับหน่วยวัดที่กำหนดเองซึ่งหมายความว่าคุณสามารถเปลี่ยนหน่วยเริ่มต้นจาก "px" เป็นอย่างอื่นได้เช่น em, vh, vw เป็นต้น

สไตล์ชายแดน

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

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

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

ตัวเลือกการนับจำนวนขั้นสูง

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

digital counter section design.png

รหัส CSS

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

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ความชัดเจน

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

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 " style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ดาวน์โหลดธีม DIVI [/ vcex_button] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" font_family = "Raleway" font_weight = "700″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ