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

แต่ก่อนจะจัดการกับหัวข้อหลัก เรามานึกกันก่อนว่าตัวติดตามความคืบหน้าคืออะไร

ตัวติดตามความคืบหน้าเป็นตัวบ่งชี้ความคืบหน้าที่แจ้งให้ผู้ใช้ทราบถึงความคืบหน้าของกระบวนการต่อเนื่อง เช่น การติดตั้งแอปพลิเคชัน การอัปเดต การอ่านบทความ ฯลฯ และมีสองประเภท:

  • le ตัวติดตามความคืบหน้าเชิงเส้น
  • le ตัวติดตามความคืบหน้าแบบวงกลม

คุณยังสามารถอ่าน: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ

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

Elementor วิธีสร้างตัวติดตามความคืบหน้าในแนวตั้ง

สร้างตัวติดตามความคืบหน้า

ในแท็บ องค์ประกอบ จากแผงเครื่องมือElementor, พิมพ์ในแถบค้นหา ติดตามความคืบหน้า. จากนั้นลากวิดเจ็ตไปยังส่วน

Elementor สร้างตัวติดตามความคืบหน้า
Elementor สร้างตัวติดตามความคืบหน้า

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

Elementor สร้างตัวติดตามความคืบหน้า

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

ดูเพิ่มเติม: Elementor: วิธีสร้างการ์ดเอฟเฟกต์จากพอร์ตโฟลิโอ

แก้ไขเนื้อหาตัวติดตามความคืบหน้า

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

Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

การตั้งค่าหลักคือ:

  • ตัวติดตามทั่วไป: ที่นี่ค่าเริ่มต้นคือ ตามแนวนอน. อย่างไรก็ตาม เมื่อเลื่อนลงมาในรายการ ประเภท กลม ยังเสนอให้คุณ รักษาค่าเริ่มต้นไว้
  • ความคืบหน้าสัมพันธ์กับ: ในการตั้งค่าที่สองนี้ ให้เลือกค่า selecteur. ตัวเลือกนี้จะแสดงการตั้งค่าเพิ่มเติม: Selecteur.
  • Selecteur: ฟิลด์นี้มีวัตถุประสงค์เพื่อรับตัวระบุของวัตถุที่จะแนบตัวติดตาม
Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า
Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

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

Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

ในแผงการตั้งค่า ไปที่แท็บขั้นสูง จากนั้นกรอกค่าในฟิลด์ CSS ID.

Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

จากนั้น กลับไปที่แผงตัวติดตามและกรอกข้อมูลในช่องตัวเลือกในเมนู เนื้อหา.

Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

สุดท้าย กำหนดทิศทางของตัวบ่งชี้ความคืบหน้าไปทางขวา

Elementor แก้ไขเนื้อหาตัวติดตามความคืบหน้า

เปลี่ยนรูปแบบของตัวติดตามความคืบหน้า

ในขั้นตอนนี้ เราจะกำหนดค่าพารามิเตอร์ของตัวบ่งชี้ความคืบหน้ารวมถึงพื้นหลังของส่วนหลัง

Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า

เริ่มต้นด้วยการตั้งค่าตัวบ่งชี้ความคืบหน้า

อ่าน: Elementor: วิธีสร้างแกลเลอรีรูปภาพ

  • การปรับ ความคืบหน้าสี ให้คุณเลือกระหว่างความก้าวหน้าแบบคลาสสิกและความก้าวหน้าแบบไล่ระดับสี ในตัวอย่างของเรา ให้เลือกตัวเลือกแรก ไม่ว่าจะเลือกอะไร ก็ปรากฏการตั้งค่า Couleur.
Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า
  • ตั้งค่ามีสี โดยใช้จานสีร่วมหรือตัวเลือกสี
Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า
Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า
  • ประเภทของเส้นขอบ: คุณมีข้อเสนอหกข้อที่นี่ (ไม่มี, เต็ม, สอง, ประ, ประ, ร่อง). เลือกใช้เส้นขอบแบบเต็ม
  • ความกว้าง: นี่คือการเพิ่มความหนาให้กับเส้นขอบของตัวบ่งชี้ความคืบหน้าของคุณ
  • รัศมีชายแดน: ตามค่าเริ่มต้น ตัวบ่งชี้ความคืบหน้าจะดูเหมือนสี่เหลี่ยมผืนผ้า โดยการปรับเปลี่ยนรัศมี ปลายของมันจะกลายเป็นมน
Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า

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

Elementor เปลี่ยนรูปแบบตัวติดตามความคืบหน้า

เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

เพื่อให้งานของเราเสร็จสมบูรณ์ เราจะตั้งค่าแท็บต่อไปนี้: เอฟเฟกต์การเคลื่อนไหว การแปลง และ CSS แบบกำหนดเอง.

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

มาเริ่มกันที่แท็บกันก่อน CSS ที่กำหนดเอง. เลือกจากนั้นใส่รหัสต่อไปนี้ลงในฟิลด์ที่เหมาะสม อนุญาตให้กำหนดความกว้างของตัวติดตาม ดังนั้นจึงกำหนดความกว้างเป็น 50% ของความสูงของหน้าต่าง

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

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

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

หากต้องการจัดแนววิดเจ็ตของเราให้อยู่ในระดับเดียวกับโพสต์แรก ให้ใช้ค่าชดเชย 145

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า4

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

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

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

Elementor เปลี่ยนตัวเลือกขั้นสูงของตัวติดตามความคืบหน้า

คราวนี้เมื่อเลื่อนลงมา เราจะเห็นตัวติดตามความคืบหน้าค่อยๆ ปรากฏขึ้นเมื่อเราเลื่อนดูที่เก็บถาวรของโพสต์

รับ Elementor Pro ทันที!

สรุป

ดังนั้น ! บทความนี้จะแสดงวิธีสร้างเครื่องมือติดตามความคืบหน้าในแนวตั้งสำหรับบทความนี้.

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...