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

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

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

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

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

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

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

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

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

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

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

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

ขอเริ่มต้น

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

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

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

เปอร์เซ็นต์การใช้งาน: เปิด
สีพื้นหลัง: #dddddd
สีพื้นหลังของแถบ: # e07a5e

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

สีข้อความ: มืด
แบบอักษรของชื่อเรื่อง: ค่าเริ่มต้น
ขนาดแบบอักษรชื่อเรื่อง: 20px
สีข้อความชื่อ: # 405c60
ความสูงของบรรทัดชื่อ: 2em
แบบอักษรเปอร์เซ็นต์: เริ่มต้น
เปอร์เซ็นต์ขนาดตัวอักษร: 16px
เปอร์เซ็นต์สีข้อความ: #ffffff
เปอร์เซ็นต์ความสูงของเส้น: 2.5em

กลับไปที่แท็บเนื้อหาแล้วเลือก + เพิ่มรายการใหม่ เพื่อเพิ่มตัวนับแถบแรกในโมดูล

อัพเดตการตั้งค่าแต่ละโมดูลดังนี้:

แท็บเนื้อหา

ชื่อเรื่อง: ชื่อของฉัน
เปอร์เซ็นต์: 80

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

เพิ่มตัวนับบาร์เพิ่มเติมสองตัวเข้ากับโมดูลและกำหนดชื่อและเปอร์เซ็นต์แต่ละรายการ

ว่ามัน!

ตัวเลือกเนื้อหาของเคาน์เตอร์บาร์

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

เปอร์เซ็นต์การใช้งาน

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

สีพื้นหลัง

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

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

ตัวเลือกนี้ช่วยให้คุณปรับสีพื้นหลังของแถบที่เติม สีพื้นหลังนี้ทับซ้อนกับการตั้งค่าสีพื้นหลังก่อนหน้านี้

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

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

Bar Counter Design ตัวเลือก

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

สีข้อความ

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

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

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

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

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

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

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

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

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

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

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

เปอร์เซ็นต์ของข้อความ

ขนาดตัวอักษรร้อยละ

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

สีข้อความเปอร์เซ็นต์

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

ระยะห่างระหว่างอักษรร้อยละ

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

ความสูงของเส้นเปอร์เซ็นต์

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

รัศมีขอบ

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

ใช้เส้นขอบ

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

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

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

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

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

สไตล์ชายแดน

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

แท่นวางของบาร์

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

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

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

รหัส CSS

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

ชั้น CSS

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

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

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

ความชัดเจน

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

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