أداة شريط تقدم دائرة العنصر المجانية
ترسم أداة Progress Bar المجانية الخاصة بـ Elementor خطًا مستقيمًا. أداة Progress Bar في Master Addons مجانية أيضًا، ويمكنها رسم الشريط كخط، أو خط به فقاعة مئوية، أو مقياس مروحة دائرة كاملة أو نصف دائرة. أعطها عنوانًا وقيمة من 0 إلى 100، واختر نمطًا محددًا مسبقًا، ثم قم بتلوين الشريط المملوء والمسار الموجود خلفه. إنه يعمل بشكل جيد لتمويل الأهداف وتقدم الدورة التدريبية والتقييمات والإحصائيات الفردية. للحصول على قائمة بأشرطة المهارات داخل عنصر واجهة مستخدم واحد، استخدم أشرطة التقدم. بالنسبة للشريط الذي يمتلئ أثناء قيام الزائرين بالتمرير عبر منشور، استخدم شريط تقدم القراءة.
كيفية إضافة شريط تقدم الدائرة في العنصر
تعد الأداة جزءًا من البرنامج الإضافي Master Addons المجاني، لذا كل ما تحتاجه هو Elementor وMaster Addons.
- تثبيت وتنشيط الإضافات الرئيسية من WordPress.org.
- قم بتحرير صفحتك باستخدام Elementor وابحث في لوحة الأدوات شريط التقدم.
- اسحبه إلى عمود. لصف من الدوائر، ضع عنصر واجهة مستخدم واحدًا في كل عمود.
- في المحتوى، اكتب العنوان وقم بتعيين القيمة من 0 إلى 100.
- في الأسلوب، الأنماط العامة، قم بتعيين إعدادات النمط المسبقة على الدائرة، أو على المروحة لمقياس نصف دائرة.
- اضبط ألوان وعرض الشريط الأمامي والشريط الخلفي، ثم قم بتصميم نص العنوان والقيمة.
يتم تغطية كل إعداد في إعدادات عناصر واجهة المستخدم لشريط التقدم مرشد.
إعدادات الخط والفقاعة والدائرة والمروحة المسبقة
اختر الشكل بالأسلوب، الأنماط العامة، إعدادات النمط المسبقة. الخط عبارة عن شريط أفقي مسطح العنوان فوقه. تضيف Line Bubble ملصقًا دائريًا ينزلق على طول نقطة التعبئة ويظهر النسبة المئوية. ترسم الدائرة حلقة كاملة بالقيمة في المنتصف، وترسم المروحة مقياس نصف دائرة.
- قم بتبديل الإعدادات المسبقة في أي وقت وسيظل العنوان والقيمة والألوان كما هي.
- لون الفقاعة يضبط ملء الفقاعة على Line Bubble.
- موقف الفقاعة يحرك الفقاعة لأعلى أو لأسفل على الشريط.
العنوان والقيمة
تحتوي علامة التبويب المحتوى على حقلين. عنوان هي التسمية، مثل هدف جمع التبرعات أو تقدم الدورة. قيمة هو رقم من 0 إلى 100 (60 افتراضيًا) يحدد مدى امتلاء الشريط أو الحلقة أو المقياس، ويظهر كنسبة مئوية.
- يتم تحريك التعبئة من الصفر إلى القيمة الخاصة بك خلال ثانية واحدة تقريبًا عند تحميل الصفحة.
- لا يوجد حد أقصى مخصص، لذا فإن 45 درسًا من أصل 60 تصل إلى 75 درسًا.
- عنصر واجهة المستخدم واحد هو مؤشر واحد. قم بتكرارها لإنشاء صف من الدوائر أو مجموعة من الخطوط.
تصميم الشريط الأمامي والشريط الخلفي
شريط أمامي هو الجزء المملوء و شريط الظهر هو المسار خلفه. لكل منها لونها الخاص ورقم العرض لسمك السكتة الدماغية، 5 افتراضيًا. من السهل قراءة شريط أمامي سميك فوق مسار ضوئي أرق، خاصة في الإعدادات المسبقة للدائرة والمروحة.
- الألوان الافتراضية هي الأرجواني (#704aff) على مسار رمادي فاتح (#ddd).
- الألوان صلبة. لا يوجد خيار تعبئة متدرج.
- العرض هو رقم واحد لجميع الأجهزة، لذا تحقق من النتيجة على الهاتف المحمول.
العنوان ونص القيمة
ال عنوان و قيمة يحتوي كل قسم من أقسام الأنماط على منتقي ألوان ومجموعة طباعة كاملة، لذلك يمكن أن تكون النسبة أكبر أو أكثر جرأة من الملصق. في إعدادات الدائرة والمروحة مسبقًا، توجد القيمة داخل الشكل.
- يتم إخراج العنوان كعنوان H6 ويتم تعيينه افتراضيًا باللون الأسود.
- ينطبق لون القيمة والطباعة أيضًا على ملصق Line Bubble.
شريط تقدم العنصر مقابل شريط تقدم الإضافات الرئيسية
كلا الحاجيتين مجانيتان. شريط التقدم الخاص بـ Elementor هو شريط مستقيم يمكنه الاحتفاظ بسطر من النص بداخله. تضيف الإضافات الرئيسية أشكالًا مستديرة، لذا فإن الاختيار يعود في الغالب إلى الشكل الذي تحتاجه.
| ميزة | شريط تقدم العنصر | شريط تقدم الإضافات الرئيسية |
|---|---|---|
| سعر | مجاني في العنصر | مجاني في الإضافات الرئيسية |
| الأشكال | الخط فقط | الخط، فقاعة الخط، الدائرة والمروحة |
| قيمة | شريط تمرير النسبة المئوية مع العلامات الديناميكية | الرقم من 0 إلى 100 |
| نص | العنوان مع اختيار علامة HTML، ونسبة العرض، والنص الداخلي | العنوان (H6) وعلامة النسبة المئوية |
| حجم البار | الارتفاع ونصف قطر الحدود | الشريط الأمامي وعرض الشريط الخلفي |
| الألوان | لون الشريط ولون الخلفية | ألوان الشريط الأمامي والشريط الخلفي، لون الفقاعة |
| الرسوم المتحركة | يملأ عندما يتم تمرير الشريط إلى العرض | يملأ عند تحميل الصفحة |
استخدم عنصر واجهة المستخدم الخاص بـ Elementor لخط بسيط يتم تحريكه عندما يصل إليه الزائرون أو يسحبون قيمته من علامة ديناميكية. استخدم الإضافات الرئيسية عندما تريد حلقة أو مقياسًا. الحاجيات المجانية ذات الصلة: أشرطة التقدم لأشرطة المهارة في عنصر واجهة مستخدم واحد، شريط تقدم القراءة لمؤشر تقدم التمرير، و مكافحة يصل للأرقام المتحركة.
الأسئلة المتداولة لشريط التقدم
ما الفرق بين شريط التقدم وأشرطة التقدم وشريط تقدم القراءة؟
شريط التقدم (أداة واجهة المستخدم هذه) هو أحد المؤشرات التي تظهر كخط أو خط به فقاعة أو دائرة أو مقياس مروحة. ال عنصر أشرطة التقدم هي قائمة بأشرطة المهارات الأفقية التي تضيفها داخل عنصر واجهة مستخدم واحد. شريط تقدم القراءة هو امتداد يوضح مدى تمرير الزائر عبر الصفحة.
هل يتم تحريك شريط التقدم عند تمريره إلى العرض؟
لا. يتم تشغيل التعبئة من الصفر إلى القيمة الخاصة بك في حوالي ثانية واحدة بمجرد تحميل الصفحة، لذلك قد ينتهي الشريط الموجود أسفل الصفحة قبل أن يراها أي شخص. يبدأ كل من شريط التقدم الخاص بـ Elementor وأداة Master Addons Progress Bars في التعبئة عند ظهورهما.
هل أداة Master Addons Progress Bar مجانية؟
نعم. يأتي مزودًا بالمكون الإضافي Master Addons المجاني على WordPress.org، ويتم تضمين جميع الإعدادات المسبقة الأربعة بدون ترخيص Pro.
هل يمكنني إنشاء شريط تقدم دائري للحصول على درجة من 100؟
نعم. اضبط الإعدادات المسبقة للنمط على الدائرة والقيمة على النتيجة، على سبيل المثال 85. تمتلئ الحلقة بنسبة 85 بالمائة مع 85% في المنتصف. للحصول على درجة من رقم آخر، قم بتحويلها إلى نسبة مئوية أولاً، نظرًا لأن الأداة ليس لها حد أقصى مخصص.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق 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)
ناسخ البريد/الصفحة
