أداة أشرطة مهارات العنصر: أشرطة تقدم متعددة في قائمة واحدة
تقوم أداة Master Addons Progress Bars بتجميع عدة أشرطة مهارات أفقية في عنصر واجهة مستخدم واحد. إنه مجاني. أضف شريطًا لكل مهارة أو خدمة أو هدف، وأعطه عنوانًا ونسبة مئوية من 1 إلى 100، واختر لونًا لكل شريط إذا أردت. تملأ الأشرطة من الصفر عند تمريرها للعرض، مع ظهور النسبة المئوية داخل كل شريط. استخدمه للمهارات الموجودة على صفحة حول أو حالة المشروع أو نتائج الاستطلاع. هل تبحث عن دائرة أو مقياس واحد بدلاً من ذلك؟ استخدم شريط التقدم عنصر واجهة المستخدم مع الإعدادات المسبقة للدائرة والمروحة. بالنسبة للشريط الذي يمتلئ أثناء قيام الزائرين بالتمرير عبر المنشور، استخدم شريط تقدم القراءة.
كيفية إضافة أشرطة المهارات في العنصر
أنت بحاجة إلى Elementor والمكون الإضافي Master Addons المجاني. تحقق من هذا مستندات أشرطة التقدم.
- تأكد من تشغيل أشرطة التقدم أدناه الإضافات الرئيسية والأدوات.
- في محرر Elementor، ابحث عن أشرطة التقدم واسحبه إلى الصفحة.
- في أشرطة الإحصائيات، قم بتحرير أشرطة العينات الثلاثة وانقر فوق إضافة عنصر للمزيد.
- قم بتعيين عنوان ونسبة مئوية لكل شريط ولون شريط إذا كنت تريد ألوانًا مختلفة.
- في علامة التبويب "النمط"، قم بتعيين ألوان المسار والتعبئة وارتفاع الشريط والتباعد ونصف القطر.
- قم بتصميم العناوين والنسب المئوية، ثم قم بمعاينة الصفحة وتمريرها إلى الأداة.
أضف أكبر عدد ممكن من أشرطة المهارات التي تحتاجها
الحانات تعيش في أشرطة الإحصائيات مكرر في علامة التبويب المحتوى. انقر فوق إضافة عنصر لكل شريط، ثم اضبط عنوان الإحصائيات (على سبيل المثال “Web Design”)، قيمة النسبة المئوية من 1 إلى 100، واختياري لون البار لهذا الشريط. اسحب العناصر لإعادة ترتيبها. يقبل حقل العنوان علامات Elementor الديناميكية.
- أي عدد من الأشرطة في عنصر واجهة مستخدم واحد.
- كل شريط له عنوانه الخاص ونسبته ولونه.
- تستخدم الأشرطة التي لا تحتوي على ألوانها الخاصة لون الشريط النشط من علامة التبويب "النمط".
قم بتصميم الأشرطة والعناوين والنسب المئوية
ال شريط الإحصائيات يقوم قسم النمط بتعيين Bar BG Color (المسار الفارغ)، وActive Bar Color (التعبئة)، والتباعد الرأسي بين الأشرطة (5 إلى 128 بكسل)، وارتفاع الشريط (1 إلى 96 بكسل)، ونصف قطر حدود شريط Stats للقضبان المربعة أو على شكل حبوب منع الحمل. عنوان الإحصائيات لديه المحاذاة واللون والطباعة، و نسبة الإحصائيات يحتوي على اللون والطباعة للرقم الموجود داخل الشريط.
- ألوان منفصلة للمسار والتعبئة.
- نصف قطر الحدود بـ px أو % للأشرطة المستديرة.
- يتم تشغيل الرسوم المتحركة للملء مرة واحدة عندما يتم تمرير عنصر واجهة المستخدم إلى العرض؛ تستغرق القيم الأعلى وقتًا أطول لملءها.
شريط تقدم العنصر مقابل أشرطة تقدم الإضافات الرئيسية
يحتوي Elementor على أداة Progress Bar مجانية تعرض شريطًا واحدًا. وإليك كيفية المقارنة بين الاثنين.
| ميزة | شريط تقدم العنصر | أشرطة تقدم الإضافات الرئيسية |
|---|---|---|
| أشرطة لكل القطعة | واحد | بقدر ما تضيف |
| اللون لكل شريط | القطعة واحدة، لون واحد | نعم، لكل عنصر مكرر |
| النص داخل الشريط | نعم، نص داخلي مخصص | النسبة المئوية فقط |
| تحريك عند التمرير إلى العرض | نعم | نعم |
| العلامات الديناميكية | نعم | العنوان فقط |
| تكلفة | حر | حر |
بالنسبة لشريط واحد يحتوي على نص داخلي مخصص، تكون أداة Elementor الخاصة كافية. للحصول على قائمة المهارات، تحافظ أداة Progress Bars واحدة على مواءمتها. ذات صلة: شريط التقدم للدوائر والمقاييس، شريط تقدم القراءة لتقدم التمرير، و مكافحة يصل للأرقام المتحركة.
الأسئلة المتداولة لأشرطة التقدم
هل يتم تحريك الأشرطة عند تمريرها للعرض؟
نعم. يمتلئ كل شريط من الصفر إلى قيمته بمجرد دخول الأداة إلى إطار العرض. يستغرق التعبئة حوالي 20 مللي ثانية لكل نقطة مئوية، لذا يستغرق شريط 90% أقل من ثانيتين. لا يوجد إعداد لتغيير السرعة أو إيقاف تشغيل الرسوم المتحركة.
هل أداة Progress Bars مجانية؟
نعم. تعد أشرطة التقدم جزءًا من البرنامج الإضافي Master Addons المجاني مع كل محتوى وتحكم في النمط. لا يوجد إصدار احترافي من هذه الأداة.
هل تستجيب أشرطة التقدم على الهاتف المحمول؟
نعم. تأخذ الأشرطة العرض الكامل لعمودها، لذا فهي تتقلص مع الشاشة. لا يعد ارتفاع الشريط والتباعد الرأسي من عناصر التحكم سريعة الاستجابة، ولكن يمكن للطباعة بالعنوان والنسبة المئوية استخدام أحجام خطوط أصغر على الأجهزة اللوحية والجوال.
هل يمكنني استخدام التدرج للون الشريط النشط بدلاً من اللون الصلب؟
No. Bar BG Color وActive Bar Color واللون الخاص بكل شريط يأخذ لونًا ثابتًا فقط. إذا كنت بحاجة إلى تعبئة متدرجة، اتصل بنا ويمكننا أن نقترح مقتطف CSS.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
