วิธีแสดงแถบความคืบหน้าการอ่านใน 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>

Go to the feature page of HappyAddons

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

Enable the reading progress bar feature

ขั้นตอนที่ 02: เปิดหน้าด้วย Elementor

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

Open a Page with Elementor

ขั้นตอนที่ 03: ไปที่การตั้งค่าไซต์ของ Elementor

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

Go to Elementor's Site Settings

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

Go to the Site Settings option

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

Locate Reading Progress Bar

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

Enable Reading Progress Bar

ขั้นตอนที่ 04: กำหนดค่าตัวเลือกแถบความคืบหน้าการอ่าน

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

Configure the Reading Progress Bar Option

# เลือกที่จะแสดงแถบความคืบหน้า

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

Select display settings for the progress bar

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

Select where you want to display the reading progress bar

# เลือกประเภทแถบความคืบหน้า

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

Select a Progress Bar Type

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

Choose a progress bar type

# เลือกตำแหน่งสำหรับแถบความคืบหน้า

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

Select a Position for the Progress Bar

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

Progress Bar appears

# สไตล์แถบความคืบหน้า

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

หวังว่าคุณจะสามารถปรับแต่งได้ด้วยตัวเอง

Stylize the Progress Bar

ขั้นตอนที่ 05: ดูตัวอย่างแถบความคืบหน้า

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

ดังนั้นคุณสามารถเพิ่มแถบความคืบหน้าการอ่านลงใน WordPress ได้อย่างง่ายดายโดยใช้ปลั๊กอิน Elementor และ HappyAddons

แถบความคืบหน้าในแนวตั้งเป็นอย่างไร

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

แถบความคืบหน้าของวงกลมเป็นอย่างไร

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

คุณสามารถทำอะไรกับ Happyaddons ได้อีก?

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

happy addons

. ใช้ตัวสร้างธีม

ตัวสร้างธีมของ 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 และเว็บไซต์ตรวจสอบอื่น ๆ เพื่อสำรวจว่าผู้ใช้ของเราพอใจมากแค่ไหน หลังจากสิ่งเหล่านี้หากคุณมีคำถามใด ๆ ในใจคุณสามารถแสดงความคิดเห็นด้านล่างหรือเคาะกล่องแชทสนับสนุนของเรา