วิธีการใช้โมดูลมิเตอร์แบบวงกลมบนเครื่องสร้าง Divi

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

วิธีการเพิ่มโมดูลมิเตอร์แบบวงกลมในหน้าของคุณ

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

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

คุณสามารถคลิกที่ปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณหากคุณลงชื่อเข้าใช้แดชบอร์ด WordPress ของคุณ

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

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

เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับด้วยรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .

ใช้กรณีเพื่อแสดงเป้าหมายโครงการในกรณีศึกษา

วิธีที่ดีที่สุดวิธีหนึ่งในการใช้โมดูลตัวนับวงกลมคือการอธิบาย สถิติ สำหรับกรณีศึกษาหรือแฟ้มผลงาน

เพียงระบุมิเตอร์แบบวงกลมแต่ละตัวพร้อมฟังก์ชันหรือเป้าหมายของโครงการเพื่อให้ผู้ใช้ทราบว่ามีบริการใดบ้างที่รวมอยู่ในโครงการ ในตัวอย่างนี้ฉันจะใช้โมดูล "ตัวนับวงกลม" เพื่อแสดงเป้าหมายของโครงการสามประการ

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

ขอเริ่มต้น

ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนมาตรฐานที่มีเค้าโครงความกว้างเต็ม (1 คอลัมน์) จากนั้นเพิ่มโมดูลตัวนับวงกลมลงในแถว

อัปเดตการตั้งค่าตัวนับวงกลมดังนี้:

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

ชื่อ: Animation
จำนวน: 80
ลงชื่อ: ใช่
สีพื้นหลังของแถบ: #e07a5e

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

สีของวงกลม: #e07a5e
สีของข้อความ: มืด
แบบอักษรของชื่อ: ค่าเริ่มต้น
ขนาดแบบอักษรชื่อเรื่อง: 26px
สีข้อความชื่อเรื่อง: #405c60
หมายเลขแบบอักษร: ค่าเริ่มต้น
ขนาดตัวอักษรขนาด: 46px
หมายเลขข้อความสี: #405c60

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

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

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

ว่ามัน!

ไปที่หน้าเว็บ

ตัวเลือกเนื้อหาตัวนับแบบวงกลม

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

ชื่อเรื่อง

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

ชื่อ

กำหนดตัวเลขสำหรับตัวนับวงกลม เมื่อเลือกตัวเลขที่น้อยกว่า 100 กราฟวงกลมจะเติมเป็นเปอร์เซ็นต์เท่ากับตัวเลขที่คุณป้อน ตัวอย่างเช่นการป้อนหมายเลข 20 จะทำให้วงกลมเต็ม 20% ด้วยสีที่เน้นของคุณ

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

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

สีพื้นหลังของแถบ

สิ่งนี้จะเปลี่ยนสีเติมของแถบ ปริมาณของสีเติมจะถูกควบคุมโดย "ตัวเลข" ที่เลือกไว้ด้านบน หากคุณเลือกหมายเลข 50 และสีน้ำเงินวงกลมของคุณจะเติมสีฟ้า 50%

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

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

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

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

สีของวงกลม

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

ความทึบของสีของวงกลม

คุณสามารถลดความทึบของส่วนที่เติมเต็มของวงกลมได้โดยใช้การตั้งค่านี้

สีข้อความ

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

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

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

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

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

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

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

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

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

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

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

หมายเลขตำรวจ

ขนาดตัวอักษรตัวเลข

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

สีของข้อความตัวเลข

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

ระยะห่างของตัวอักษรที่มีหมายเลข

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

ความสูงของเส้นจำนวน

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

ตัวเลือกตัวนับขั้นสูงแบบวงกลม

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

รหัส CSS

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

ชั้น CSS

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

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

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

ความชัดเจน

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

สำหรับบทช่วยสอนนี้

วิธีการใช้โมดูลมิเตอร์แบบวงกลมบนเครื่องสร้าง Divi

วิธีการเพิ่มโมดูลมิเตอร์แบบวงกลมในหน้าของคุณ