كيفية عرض شريط التقدم في القراءة في WordPress مع Elementor
نشرت: 2025-05-27يعد شريط التقدم في القراءة مؤشرًا مرئيًا على موقع ويب يوضح القراء إلى أي مدى تم تمريرهم عبر الصفحة أو النشر على الشاشة. يعرض هذا عادة شريطًا رفيعًا يملأ مع تقدم القراء ، ويتم التمرير عبر الصفحة. إنها أداة بسيطة ولكنها فعالة للمدونات ومواقع الويب الثقيلة.
تشير دراسة حديثة حول مشاركة المستخدم إلى أن الإشارات المرئية يمكن أن تزيد من الوقت الذي تقضيه في الصفحة بنسبة تصل إلى 20 ٪ من خلال جعل المحتوى يشعر بأنه أكثر قابلية للإدارة . بنفس الطريقة ، يمكن أن يساعد شريط التقدم المستخدمين على تتبع رحلة القراءة الخاصة بهم ، والتي يمكن أن تعزز الرضا وتشجيعهم على استكشاف المزيد.
مع Elementor ، من السهل إضافة شريط التقدم في القراءة إلى WordPress. لذلك ، في هذه المقالة ، سنقوم بتغطية دليل خطوة بخطوة حول كيفية عرض شريط التقدم في القراءة في WordPress مع Elementor.
فوائد عرض شريط التقدم في القارئ في WordPress
توفر إضافة شريط التقدم في القراءة إلى موقع WordPress عدة فوائد. هذا لا يعزز تجربة المستخدم فحسب ، بل يعمل أيضًا على المشاركة. ألقِ نظرة على بعض الفوائد الرئيسية لإضافة شريط التقدم في القراءة في WordPress أدناه.
- يحسن مشاركة المستخدم
يمكن أن يحافظ شريط التقدم في القراءة على إبقاء القراء مدفوعين بإظهار مرئيًا إلى أي مدى تقدموا من خلال منشور. هذا يشجع المستخدمين على مواصلة القراءة ، خاصة بالنسبة للمحتوى طويل الشكل. ألقِ نظرة على بعض النقاط السريعة حول كيفية تحسين مشاركة المستخدم على موقع الويب الخاص بك.
- يعزز وضوح الملاحة
بالنسبة للمقالات أو البرامج التعليمية المطولة ، يوفر شريط التقدم مؤشراً واضحًا على مقدار المحتوى المتبقي. هذا يساعد المستخدمين على تخمين ما إذا كان لديهم وقت للإنهاء أم لا.
- يقلل من معدلات الارتداد
من خلال تقديم جديلة مرئية تنقسم المحتوى إلى رحلة قابلة للتتبع ، يمكن أن يجعل شريط التقدم مشاركات طويلة أقل هائلة. هذا يمكن أن يقلل معدلات الارتداد بشكل ملحوظ. إليك دليل حول كيفية تقليل معدل الارتداد على WordPress.
- يعزز النداء الجمالي
يضيف شريط التقدم المصمم جيدًا نداءًا حديثًا لموقعك. يمكنك تخصيص مظهر Brading Bar لمطابقة العلامة التجارية لموقعك لإنشاء مظهر مصقول.
- يدعم قابلية استخدام الهاتف المحمول
على الأجهزة المحمولة ، حيث يمكن أن يشعر التمرير بلا نهاية ، يوفر شريط التقدم شعورًا بالتحكم والسياق. يطمئن المستخدمين الذين يحرزون تقدمًا من خلال المنشور أو الصفحة.
كيفية عرض شريط التقدم في القراءة في WordPress مع Elementor
في هذا البرنامج التعليمي خطوة بخطوة ، سنرشدك خلال عملية إضافة وتخصيص شريط التقدم في القراءة على موقع WordPress الخاص بك باستخدام Elementor والإصدار المجاني من HappyAddons. لكن قد تسأل - لماذا Happyaddons وما هذا ؟
في الواقع ، Happyaddons هو ملحق معروف لمكون الإضافي Elementor. إنه يأتي مع العديد من الميزات والخدمات الحجرية للتغلب على قيود Elementor. قراءة شريط التقدم هو واحد من. والخبر السار هو أن ميزة شريط التقدم في القراءة مجانية تمامًا للاستخدام.
المتطلبات المسبقة لإضافة شريط التقدم القراءة
- عنصر
- Happyaddons
تأكد من تثبيت الإضافات وتفعيلها على موقعك. بمجرد أن تكون جاهزة على موقعك ، ابدأ باتباع الخطوات الموضحة في البرنامج التعليمي أدناه.
الخطوة 01: تمكين ميزة شريط التقدم القراءة
انتقل إلى لوحة معلومات WordPress وانتقل إلى Happyaddons> الميزات .
عندما تصل إلى صفحة الميزات ، حدد موقع خيار شريط التقدم في القراءة . تبديل لتمكين الميزة.
الخطوة 02: افتح صفحة مع Elementor
الآن ، لتكوين ميزة شريط التقدم القراءة ، افتح صفحة مع Elementor.
الخطوة 03: انتقل إلى إعدادات موقع Elementor
انقر فوق أيقونة الهامبرغر في الزاوية العلوية اليسرى من لوحة Elementor.
انتقل إلى خيار إعدادات الموقع بالنقر فوقه.
عن طريق تمرير لوحة Elementor ، حدد موقع شريط التقدم القراءة وانقر فوقه .
تبديل لتمكين خيار شريط التقدم في القراءة .
الخطوة 04: تكوين خيار شريط التقدم القراءة
بمجرد تمكين خيار شريط التقدم في القراءة ، ستحصل على العديد من الخيارات لتكوين الميزة.
# حدد مكان عرض شريط التقدم
يمكنك اختيار عرض شريط التقدم في موقعك ، وهذا يعني على جميع المنشورات والصفحات. أو يمكنك اختيار عرضه بشكل انتقائي.
إذا كنت ترغب في عرضه على المنشورات والصفحات ، فحددها في المربع المجاور للعرض.
# حدد نوع شريط التقدم
يتيح لك Happyaddons الاختيار من بين ثلاثة أنواع من أشرطة التقدم - الأفقية ، الرأسية ، والدائرة . لذلك ، اختر أيًا منهم ، انقر فوق خيار القائمة المنسدلة بجوار الكتابة .
سترى الخيارات. اختر نوعًا تريده. للبرنامج التعليمي ، سنذهب مع النوع الأفقي.
# حدد موقفًا لشريط التقدم
يمكنك عرض شريط التقدم إما في الأعلى أو في الأسفل. لذلك ، اختر المكان الذي تريد عرضه من خيار الموضع بجواره.
نظرًا لأننا قمنا بتمرير الصفحة ، يمكنك رؤية شريط التقدم يظهر أعلى الصفحة.
# stylize the Progress Bar
من نفس لوحة Elementor ، يمكنك تخصيص الطول ولون شريط التقدم ولون الخلفية ونسبة الأدوات النسبة المئوية لميزة شريط التقدم.
آمل أن تتمكن من القيام بهذا التخصيص بنفسك.
الخطوة 05: معاينة شريط التقدم
بمجرد الانتهاء من ذلك ، انتقل إلى المقدمة من موقعك. تحقق مما إذا كان شريط التقدم يعمل بشكل جيد أم لا عن طريق تمرير شاشتك.
وبالتالي ، يمكنك بسهولة إضافة شريط التقدم في القراءة إلى WordPress باستخدام مكونات Elementor و HappyAddons.
كيف يبدو شريط التقدم العمودي
أعلاه ، لقد أظهرنا لك عملية إنشاء شريط تقدم أفقي. بنفس الطريقة ، يمكنك تمكين شريط التقدم الرأسي وعرضه على موقعك. بمجرد تمكينه ، سيبدو شريط التقدم كما هو موضح في الفيديو المرفق أدناه.
كيف يبدو شريط التقدم في الدائرة
هنا مرة أخرى ، باتباع نفس العملية ، يمكنك عرض شريط التقدم في الدائرة على موقع WordPress الخاص بك ، وتكوين الأسلوب والإعدادات. يمكنك مشاهدة كيف يبدو على الواجهة الأمامية من الفيديو المرفق أدناه. يظهر شريط التقدم في الدائرة في الزاوية العلوية اليمنى.
ماذا يمكنك أن تفعل مع Happyaddons؟
بمجرد حصولك على HappyAddons ، لا يمكنك التغلب على أوجه القصور في Elementor فحسب ، بل يمكنك أيضًا الاستمتاع بالعديد من الميزات والعناصر الحاجيات المثيرة. ألقِ نظرة على ما يمكنك فعله أكثر من خلال المكون الإضافي HappyAddons.
أ. استخدم منشئ السمة
يتيح لك منشئ السمات HappyAddons تخصيص كل جانب من جوانب أجزاء قالب موقع WordPress ، بما في ذلك الرؤوس والتذييلات والصفحات الفردية والوظائف الفردية وصفحات الأرشيف. الأخبار الرائعة هي أن ميزة منشئ السمة مجانية تمامًا للاستخدام ، وهي ميزة متميزة في Elementor. تحقق من كيفية الوصول إلى HappyAddons Builder.
ب. تعزيز مواقع WooCommerce
تقدم HappyAddons Pro مجموعة قوية من واجهة المستخدم WooCommerce لتعزيز تصميم ووظائف متجر التجارة الإلكترونية. WooCommerce Widgets التي تقدمها HappyAddons هي شبكة المنتج ، كاروسيل المنتج ، شبكة فئة المنتج ، فئة المنتج carousel ، منتج واحد ، عربة صغيرة ، عربة ، الخروج ، شريط الشحن.
ج. حرفة المحتوى الإبداعي
يوفر Happyaddons أكثر من 130 عنصر واجهة مستخدم وعشرين ميزات مثيرة لجعل موقع ويب مثير للغاية. باستخدامها ، يمكنك تسليط الضوء على المعلومات القيمة على موقعك بطريقة مبتكرة للغاية تبدو جيدة وجذابة للمستخدمين.
د. إنشاء منشورات/صفحات infographic
يتيح HappyAddons إنشاء منشورات وصفحات جذابة على طراز Infographic باستخدام أجهزة توجيهي مثل مخطط الشريط ، وشريط المهارات ، والمخططات التفاعلية ، والشبكة. نتيجة لذلك ، يمكنك عرض مقارنات مثل نتائج المبيعات أو الاستطلاع بألوان وملصقات قابلة للتخصيص. تعلم كيفية إنشاء صفحة ويب infographic مع Elementor.
ه. نسخة متقاطعة نسخة معجون
تتيح لك ميزة نسخة النسخ عبر المجال في HappyAddons Pro نسخ عناصر واجهة المستخدم أو الأقسام أو الصفحات بأكملها من مجال واحد ولصقها إلى أخرى ، مع الاحتفاظ بجميع الأنماط والإعدادات. هذا هو المنقذ للوقت للمطورين أو الوكالات التي تدير مواقع متعددة.
بالإضافة إلى كل ذلك ، سيكون لديك مكتبة قالب حيلة ، ودردشة حية ، ووثائق شاملة ، وقائمة تشغيل تعليمية على YouTube لجعل رحلة تصميم الويب الخاصة بك مع HappyAddons ممتعة للغاية.
الأفكار النهائية!
أتمنى أن تكون قد استمتعت بهذا البرنامج التعليمي. لقد كتبنا باستمرار المزيد والمزيد من منشورات المدونات المعتمدة على البرنامج التعليمي على موقعنا على الويب لجعل رحلة تصميم الويب الخاصة بك أكثر فائدة وفعالية. كما قرأت المنشور بأكمله ، من الواضح أن لديك فكرة عما يمكنك فعله أكثر مع المكون الإضافي HappyAddons.
إذا كان لديك كل من Elementor و Happyaddons على موقعك ، فيمكنك القيام بسحر حقيقي. يمكنك التحقق من مراجعات حول HappyAddons على WordPress.org ومواقع المراجعة الأخرى لاستكشاف مدى رضا المستخدمين لدينا. بعد كل هذه ، إذا كان لديك أي أسئلة في الاعتبار ، فيمكنك ترك تعليق أدناه أو إعطاء مربع دردشة الدعم لدينا.