วิธีแสดงแถบความคืบหน้าการอ่านใน WordPress ด้วย Elementor
เผยแพร่แล้ว: 2025-05-27แถบความคืบหน้าการอ่านเป็นตัวบ่งชี้ภาพบนเว็บไซต์ที่แสดงให้ผู้อ่านแสดงว่าพวกเขาเลื่อนผ่านหน้าหรือโพสต์บนหน้าจอได้ไกลแค่ไหน โดยทั่วไปจะแสดงแถบบาง ๆ ที่เติมเต็มเมื่อผู้อ่านคืบหน้าเลื่อนผ่านหน้า เป็นเครื่องมือที่เรียบง่าย แต่มีประสิทธิภาพสำหรับบล็อกและเว็บไซต์ที่มีเนื้อหาหนัก
การศึกษาล่าสุดเกี่ยวกับการมีส่วนร่วมของผู้ใช้แสดงให้เห็นว่า ตัวชี้นำภาพสามารถเพิ่มเวลาที่ใช้ในหน้าได้มากถึง 20% โดยการทำให้เนื้อหารู้สึกได้มากขึ้น ในทำนองเดียวกันแถบความคืบหน้าสามารถช่วยให้ผู้ใช้ติดตามการเดินทางของพวกเขาซึ่งสามารถเพิ่มความพึงพอใจและกระตุ้นให้พวกเขาสำรวจเพิ่มเติม
ด้วย Elementor มันง่ายที่จะเพิ่มแถบความคืบหน้าการอ่านให้กับ WordPress ดังนั้นในบทความนี้เราจะครอบคลุมคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการแสดงแถบความคืบหน้าการอ่านใน WordPress ด้วย Elementor
ประโยชน์ของการแสดงแถบความคืบหน้าของผู้อ่านใน WordPress
การเพิ่มแถบความคืบหน้าการอ่านไปยังไซต์ WordPress มีประโยชน์หลายประการ สิ่งนี้ไม่เพียง แต่ช่วยเพิ่มประสบการณ์ผู้ใช้ แต่ยังมีส่วนร่วม ดูประโยชน์ที่สำคัญบางอย่างของการเพิ่มแถบความคืบหน้าการอ่านใน WordPress ด้านล่าง
- ปรับปรุงการมีส่วนร่วมของผู้ใช้
แถบความคืบหน้าการอ่านสามารถทำให้ผู้อ่านมีแรงจูงใจโดยแสดงให้เห็นว่าพวกเขาก้าวหน้าไปไกลแค่ไหนผ่านโพสต์ สิ่งนี้กระตุ้นให้ผู้ใช้อ่านต่อไปโดยเฉพาะอย่างยิ่งสำหรับเนื้อหารูปแบบยาว ลองดูจุดด่วนเกี่ยวกับวิธีการปรับปรุงการมีส่วนร่วมของผู้ใช้ในเว็บไซต์ของคุณ
- เพิ่มความชัดเจนในการนำทาง
สำหรับบทความหรือแบบฝึกหัดที่มีความยาวแถบความคืบหน้าเป็นตัวบ่งชี้ที่ชัดเจนว่ายังมีเนื้อหาเหลืออยู่เท่าใด สิ่งนี้ช่วยให้ผู้ใช้คาดเดาว่าพวกเขามีเวลาที่จะเสร็จสิ้นหรือไม่
- ลดอัตราตีกลับ
ด้วยการนำเสนอคิวภาพที่แบ่งเนื้อหาออกไปในการเดินทางที่สามารถติดตามได้แถบความคืบหน้าสามารถทำให้โพสต์ยาว ๆ ดูเหมือนจะท่วมท้นน้อยลง สิ่งนี้สามารถลดอัตราตีกลับได้อย่างน่าทึ่ง นี่คือคำแนะนำเกี่ยวกับวิธีลดอัตราการตีกลับของ WordPress
- เพิ่มความน่าดึงดูดใจ
แถบความคืบหน้าที่ออกแบบมาอย่างดีเพิ่มความน่าดึงดูดใจให้กับเว็บไซต์ของคุณ คุณสามารถปรับแต่งการปรากฏตัวของแถบการอ่านเพื่อให้ตรงกับการสร้างแบรนด์ของเว็บไซต์ของคุณเพื่อสร้างลุคที่สวยงาม
- รองรับการใช้งานมือถือ
บนอุปกรณ์มือถือที่การเลื่อนสามารถรู้สึกไม่มีที่สิ้นสุดแถบความคืบหน้าให้ความรู้สึกควบคุมและบริบท มันทำให้มั่นใจได้ว่าผู้ใช้กำลังดำเนินการผ่านโพสต์หรือหน้า
วิธีแสดงแถบความคืบหน้าการอ่านใน WordPress ด้วย Elementor
ในการสอนทีละขั้นตอนนี้เราจะแนะนำคุณตลอดกระบวนการเพิ่มและปรับแต่งแถบความคืบหน้าการอ่านบนไซต์ WordPress ของคุณโดยใช้ Elementor และ Happyaddons เวอร์ชันฟรี แต่คุณอาจถาม - ทำไมต้องมีความสุข และ นี่คืออะไร ?
ที่จริงแล้ว Happyaddons เป็นส่วนเสริมที่รู้จักกันดีของปลั๊กอิน Elementor มันมาพร้อมกับคุณสมบัติและวิดเจ็ตที่มีความสามารถมากมายเพื่อเอาชนะข้อ จำกัด ของ Elementor แถบการอ่านความคืบหน้าเป็นหนึ่งใน และข่าวดีก็คือคุณสมบัติการอ่านแถบความคืบหน้านั้นใช้งานได้ฟรี
สิ่งที่จำเป็นสำหรับการเพิ่มแถบความคืบหน้าการอ่าน
- ผู้ประกอบการ
- Happyaddons
ตรวจสอบให้แน่ใจว่าปลั๊กอินได้รับการติดตั้งและเปิดใช้งานบนเว็บไซต์ของคุณ เมื่อพวกเขาพร้อมในเว็บไซต์ของคุณเริ่มทำตามขั้นตอนที่อธิบายไว้ในบทช่วยสอนด้านล่าง
ขั้นตอนที่ 01: เปิดใช้งานคุณสมบัติการอ่านแถบความคืบหน้า
ไปที่ แผงควบคุม WordPress ของคุณและนำทางไปยัง คุณสมบัติ Happyaddons>

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

ขั้นตอนที่ 02: เปิดหน้าด้วย Elementor
ตอนนี้เพื่อกำหนดค่าคุณสมบัติการอ่านแถบความคืบหน้าให้เปิดหน้าด้วย Elementor

ขั้นตอนที่ 03: ไปที่การตั้งค่าไซต์ของ Elementor
คลิก ที่ไอคอนแฮมเบอร์เกอร์ ที่มุมบนซ้ายของแผง Elementor

ไปที่ ตัวเลือก การตั้งค่าไซต์ โดยคลิก

โดยการเลื่อนแผง Elementor ให้ค้นหา แถบความคืบหน้าการอ่าน และ คลิก

สลับ เพื่อ เปิดใช้งาน ตัวเลือก แถบความคืบหน้าการอ่าน

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

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

หากคุณต้องการแสดงทั้งในโพสต์และหน้าให้เลือกในกล่องถัดไปเพื่อแสดงผล


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

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

# เลือกตำแหน่งสำหรับแถบความคืบหน้า
คุณสามารถแสดงแถบความคืบหน้าได้ทั้งที่ด้านบนหรือที่ด้านล่าง ดังนั้น เลือกที่ที่คุณต้องการแสดง จาก ตัวเลือกตำแหน่ง ถัดจากนั้น

เมื่อเราเลื่อนหน้าแล้วคุณสามารถเห็นแถบความคืบหน้าปรากฏขึ้นที่ด้านบนของหน้า

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

ขั้นตอนที่ 05: ดูตัวอย่างแถบความคืบหน้า
เมื่อคุณทำเสร็จแล้วให้ไปที่ส่วนหน้าของเว็บไซต์ของคุณ ตรวจสอบว่าแถบความคืบหน้าทำงานได้ดีหรือไม่โดยการเลื่อนหน้าจอของคุณ
ดังนั้นคุณสามารถเพิ่มแถบความคืบหน้าการอ่านลงใน WordPress ได้อย่างง่ายดายโดยใช้ปลั๊กอิน Elementor และ HappyAddons
แถบความคืบหน้าในแนวตั้งเป็นอย่างไร
ด้านบนเราได้แสดงให้คุณเห็นถึงกระบวนการสร้างแถบความคืบหน้าในแนวนอน ในทำนองเดียวกันคุณสามารถเปิดใช้งานและแสดงแถบความคืบหน้าแนวตั้งบนเว็บไซต์ของคุณ เมื่อคุณเปิดใช้งานแถบความคืบหน้าจะมีลักษณะเหมือนที่แสดงในวิดีโอที่แนบมาด้านล่าง
แถบความคืบหน้าของวงกลมเป็นอย่างไร
ที่นี่อีกครั้งตามกระบวนการเดียวกันคุณสามารถแสดงแถบความคืบหน้าของวงกลมบนไซต์ WordPress ของคุณการกำหนดค่าสไตล์และการตั้งค่า คุณสามารถดูว่ามันมีลักษณะอย่างไรในส่วนหน้าจากวิดีโอที่แนบมาด้านล่าง แถบความคืบหน้าของวงกลมปรากฏขึ้นที่มุมบนขวา
คุณสามารถทำอะไรกับ Happyaddons ได้อีก?
เมื่อคุณมี Happyaddons ไม่เพียง แต่คุณสามารถเอาชนะข้อบกพร่องของ Elementor ได้ แต่ยังเพลิดเพลินไปกับคุณสมบัติและวิดเจ็ตที่น่าตื่นเต้นอีกมากมาย ลองดูว่าคุณสามารถทำอะไรได้อีกกับปลั๊กอิน Happyaddons

. ใช้ตัวสร้างธีม
ตัวสร้างธีมของ Happyaddons ช่วยให้คุณสามารถปรับแต่งทุกแง่มุมของชิ้นส่วนเทมเพลตของไซต์ WordPress ของคุณรวมถึงส่วนหัวส่วนท้ายหน้าเดียวโพสต์เดี่ยวและหน้าเก็บถาวร ข่าวดีก็คือคุณสมบัติการสร้างธีมนั้นใช้งานได้ฟรีซึ่งเป็นคุณสมบัติพรีเมี่ยมใน Elementor ตรวจสอบวิธีการเข้าถึงตัวสร้างธีม Happyaddons
ข. เพิ่มเว็บไซต์ WooCommerce
Happyaddons Pro เสนอชุดวิดเจ็ต WooCommerce ที่ทรงพลังเพื่อปรับปรุงการออกแบบและฟังก์ชั่นของร้านค้าอีคอมเมิร์ซของคุณ WooCommerce Widgets ที่มีความสุขในการเสนอคือกริดผลิตภัณฑ์, ม้าหมุนผลิตภัณฑ์, กริดหมวดหมู่ผลิตภัณฑ์, ประเภทผลิตภัณฑ์ม้าหมุน, ผลิตภัณฑ์เดียว, รถเข็นขนาดเล็ก, รถเข็น, การชำระเงินและแถบการจัดส่ง
ค. เนื้อหาสร้างสรรค์งานสร้าง
Happyaddons ให้บริการวิดเจ็ตมากกว่า 130 ตัวและคุณสมบัติที่น่าตื่นเต้นสองโหลเพื่อสร้างเว็บไซต์ที่น่าตื่นเต้นอย่างมาก การใช้พวกเขาคุณสามารถเน้นข้อมูลที่มีค่าบนเว็บไซต์ของคุณด้วยวิธีที่สร้างสรรค์อย่างมากซึ่งดูดีและน่าดึงดูดสำหรับผู้ใช้
d. สร้างโพสต์อินโฟกราฟิก/หน้า
Happyaddons ช่วยให้สามารถสร้างโพสต์และหน้าสไตล์อินโฟกราฟิกที่ดึงดูดสายตาด้วยสายตาโดยใช้วิดเจ็ตเช่นแผนภูมิแท่งแถบทักษะแผนภูมิแบบโต้ตอบและกริดโพสต์ เป็นผลให้คุณสามารถแสดงการเปรียบเทียบเช่นการขายหรือผลการสำรวจด้วยสีและฉลากที่ปรับแต่งได้ เรียนรู้วิธีสร้างหน้าเว็บอินโฟกราฟิกด้วย Elementor
ก. การวางสำเนาข้ามโดเมน
คุณลักษณะการวางสำเนาข้ามโดเมนใน Happyaddons Pro ช่วยให้คุณคัดลอกวิดเจ็ตส่วนหรือหน้าทั้งหมดจากโดเมนหนึ่งและวางไว้ในที่อื่นรักษารูปแบบและการตั้งค่าทั้งหมด นี่คือการประหยัดเวลาสำหรับนักพัฒนาหรือเอเจนซี่ที่จัดการหลายไซต์
นอกเหนือจากสิ่งเหล่านี้คุณจะมีห้องสมุดเทมเพลตที่มีทรัพยากรการแชทสดเอกสารที่ครอบคลุมและเพลย์ลิสต์การสอน YouTube เพื่อให้การออกแบบเว็บของคุณเดินทางด้วย HappyAddons สนุกมาก
ความคิดสุดท้าย!
หวังว่าคุณจะสนุกกับการสอนนี้ เราได้เขียนโพสต์บล็อกที่ใช้การสอนมากขึ้นเรื่อย ๆ บนเว็บไซต์ของเราเพื่อให้การเดินทางการออกแบบเว็บที่ไม่มีรหัสของคุณมีประโยชน์และมีประสิทธิภาพมากขึ้น ในขณะที่คุณอ่านโพสต์ทั้งหมดคุณจะมีความคิดว่าคุณสามารถทำอะไรได้มากกว่านี้กับปลั๊กอิน Happyaddons
หากคุณมีทั้ง Elementor และ Happyaddons ในเว็บไซต์ของคุณคุณสามารถทำเวทมนตร์ที่แท้จริงได้ คุณสามารถตรวจสอบรีวิวเกี่ยวกับ Happyaddons บน wordpress.org และเว็บไซต์ตรวจสอบอื่น ๆ เพื่อสำรวจว่าผู้ใช้ของเราพอใจมากแค่ไหน หลังจากสิ่งเหล่านี้หากคุณมีคำถามใด ๆ ในใจคุณสามารถแสดงความคิดเห็นด้านล่างหรือเคาะกล่องแชทสนับสนุนของเรา