شريط تقدم واحد يحكي قصة واحدة. تُظهر مجموعة مكدسة منها مجموعة مهارات كاملة، أو تشكيلة خدمات، أو حالة المشروع دون جعل القارئ يعمل من أجله. ال القطعة أشرطة التقدم في الإضافات الرئيسية للعنصر مصممة لهذه الحالة. يقوم بتجميع عدة أشرطة متحركة في عنصر واجهة مستخدم واحد، بحيث تضيف العدد الذي تحتاجه وتصممها معًا أو واحدًا تلو الآخر.
فكر في الأمر باعتباره الرفيق متعدد الأشرطة للحقل المستقل القطعة شريط التقدم. بدلاً من إسقاط عنصر واجهة مستخدم منفصل لكل مقياس، يمكنك إدارة المجموعة بأكملها من لوحة واحدة. يحصل كل شريط على عنوانه ونسبته ولونه الخاص، بينما تتحكم علامة تبويب النمط المشتركة في مظهر المجموعة.
تفضل المشاهدة أولا؟ يمر هذا البرنامج التعليمي القصير عبر الأداة من طرف إلى طرف، بدءًا من سحبها إلى تصميم الأشرطة
ما تفعله أداة Progress Bars #
تعرض الأداة قائمة بالأشرطة الأفقية التي تتحرك من الصفر إلى قيمتها المحددة عند التمرير إلى العرض. يعرض كل شريط عنوانًا على اليسار، وتسمية نسبة مئوية، وملءًا ملونًا ينمو ليتناسب مع الرقم الذي تدخله.
الفرق عن عنصر واجهة المستخدم الشريط الفردي هو الهيكل. هنا تعيش الأشرطة داخل مكرر يسمى أشرطة الإحصائيات، لذلك تقوم بإضافة الأشرطة وتكرارها وإعادة ترتيبها وحذفها دون لمس اللوحة القماشية. عنصر واجهة مستخدم واحد، ومجموعة واحدة من عناصر التحكم في النمط، وأي عدد من الأشرطة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- صفحة مفتوحة في محرر Elementor حيث ستذهب الأشرطة.
كيفية إضافة عنصر واجهة المستخدم Progress Bars #
في محرر Elementor، افتح عناصر لوحة والبحث عن أشرطة التقدم، أو قم بالتمرير لأسفل إلى قسم الإضافات الرئيسية. شاهد الأسماء هنا: هناك عنصران من عناصر واجهة المستخدم يقرأان نفس الشيء تقريبًا. شريط التقدم هو شريط واحد، و أشرطة التقدم هي المجموعة. يسحب أشرطة التقدم على صفحتك.
لقد وصل مع ملء ثلاثة أشرطة عينة بالفعل، لذلك ترى نتيجة عمل على الفور وتقوم بالتحرير من هناك بدلاً من البدء فارغًا.
قم بتحرير كل شريط في علامة التبويب المحتوى #
افتح ال محتوى علامة التبويب وسوف تجد أشرطة الإحصائيات مكرر. كل صف عبارة عن شريط واحد. انقر فوق صف لتوسيعه وستحصل على ثلاثة إعدادات
- عنوان الإحصائيات: التسمية الموضحة أعلى الشريط، مثل “Web Design” أو “WordPress”. يأخذ هذا الحقل علامات Elementor الديناميكية، لذا يمكنك سحب العنوان من حقل منشور أو تعريف المؤلف أو مصدر ديناميكي آخر باستخدام رمز العلامة.
- قيمة النسبة المئوية: رقم من 1 إلى 100 يحدد المسافة التي يملأها الشريط وما يقرأه الملصق. يدخل
87ويمتلئ الشريط بنسبة 87 بالمائة. - لون الشريط: لون اختياري لهذا الشريط الواحد. اتركه فارغًا لاستخدام Active Bar Color العام، أو اضبطه هنا لتجاوز لون المجموعة لشريط واحد.
اللون لكل شريط هو ما يجعل المجموعة مرنة. احتفظ بكل شريط بلون واحد للعلامة التجارية، أو أعط كل مقياس ظلًا خاصًا به حتى يسهل التمييز بينهما في لمحة.
إضافة أشرطة غير محدودة #
لإضافة شريط آخر، انقر إضافة عنصر في أسفل المكرر. يظهر شريط جديد بقيم افتراضية يمكنك إعادة تسميتها وتعيينها. لا يوجد حد أقصى، لذا قم بإنشاء العدد الذي يحتاجه المحتوى. يقوم رمز النسخ الموجود في أي صف بتكرار شريط مع إعداداته سليمة، ويقوم رمز X بإزالة واحد.
تحتوي علامة التبويب المحتوى أيضًا على تعليمات المستندات رابط للرجوع السريع و رابط الغلاف الخيار من الحرة رابط الغلاف الامتداد الذي يجعل الأداة بأكملها قابلة للنقر عليها. يصبح هذا مفيدًا عندما تكون الأشرطة موجودة على بطاقة ترتبط بمكان ما.
قم بتصميم كل شريط من علامة التبويب "النمط" #
التبديل إلى أسلوب علامة التبويب للتحكم في شكل المجموعة بأكملها. تنطبق هذه الإعدادات على كل شريط مرة واحدة، وهذا هو بالضبط سبب استحقاق التجاوزات لكل شريط في علامة تبويب المحتوى لمعرفتها. تقتحم علامة التبويب "النمط" شريط الإحصائيات, عنوان الإحصائيات, نسبة الإحصائيات، و أنماط.
شريط الإحصائيات #
- لون بار بي جي: لون المسار الفارغ خلف كل تعبئة.
- لون الشريط النشط: لون التعبئة الافتراضي لأي شريط لا يحتوي على مجموعة ألوان الشريط الخاصة به في علامة التبويب "المحتوى".
- التباعد العمودي: الفجوة بين القضبان المكدسة.
- ارتفاع البار: مدى سماكة الأشرطة بالبكسل.
- إحصائيات شريط نصف قطر الحدود: يدور الزوايا. قم بربط القيم الأربع لنصف قطر زوجي، أو اضبط أعلى ويمين وأسفل ويسار بشكل منفصل.
عنوان الإحصائيات #
يقوم هذا القسم بتصميم الملصق فوق كل شريط.
- محاذاة: اليسار أو الوسط أو اليمين لنص العنوان.
- لون: لون العنوان.
- الطباعة: التحكم الكامل في عائلة الخطوط وحجمها ووزنها وتحويلها وبقية خيارات الكتابة الخاصة بـ Elementor.
نسبة الإحصائيات #
تحصل تسمية النسبة المئوية على عناصر التحكم الخاصة بالألوان والطباعة، حتى تتمكن من جعل الرقم غامقًا وكبيرًا أو إبقائه هادئًا. أسفله يجلس أنماط قسم. يأتي من ملحق الأنماط المجانية ويضيف نمط خلفية ثابت اللون خلف الأداة بأكملها، وليس داخل الأشرطة.
النتيجة على الصفحة #
قم بنشر الصفحة أو معاينتها وتحريك الأشرطة من الصفر حتى القيم المحددة لها عند دخول القسم إلى إطار العرض. يستمر التصميم من خلال: تظهر ألوان الشريط المخصصة ولون العنوان والنسبة المئوية للحجم والتباعد والارتفاع على الصفحة المباشرة.
حالات الاستخدام الشائعة #
- قضبان المهارة على صفحة حول أو استئناف (التصميم والتطوير والتسويق).
- نقاط قوة الخدمة على صفحة الوكالة، شريط واحد لكل عرض.
- حالة المشروع أو الحملة تظهر كنسب الإنجاز.
- عشرات الميزة في كتلة المقارنة، مقترنة بـ جدول المقارنة.
- أبرز الإحصائيات بجانب الأرقام المتحركة من القطعة المضادة.
نصائح للعمل مع أشرطة التقدم #
- اضبط تصميم المجموعة أولاً، ثم تجاوزه. اختر لون الشريط النشط وارتفاع الشريط مرة واحدة، ثم أضف لونًا لكل شريط فقط حيث تريد أن يبرز الشريط.
- حافظ على النسب صادقة. الرقم هو أيضًا الملصق، لذا فإن الشريط المضبوط على 76 يقرأ “76%”. مطابقة التعبئة مع الرقم الحقيقي.
- ضبط الارتفاع ونصف القطر معًا. يُقرأ الشريط الأطول بنصف قطر مطابق على شكل حبة مستديرة؛ يمكن أن يبدو الشريط الرفيع ذو نصف القطر الكبير مقطوعًا.
- استخدم العناوين الديناميكية في القوالب. عندما تكون الأشرطة موجودة في قالب منشور أو أرشيف، قم بتوصيل عنوان الإحصائيات بعلامة ديناميكية بحيث يقوم كل إدخال بتسمية نفسه.
- مكررة بدلا من إعادة البناء. تستنسخ أيقونة النسخ شريطًا بلونه وطبعه، مما يتفوق على إعداد عنصر جديد يدويًا.
الأسئلة المتداولة #
ما هي أداة Progress Bars في الإضافات الرئيسية؟
إنها أداة Elementor التي تجمع أشرطة التقدم المتحركة المتعددة في عنصر واحد. يمكنك إضافة أشرطة من خلال مكرر Stats Bars، وإعطاء كل منها عنوانًا ونسبة مئوية ولونًا اختياريًا، وتصميم المجموعة بأكملها من علامة التبويب Style. إنها النسخة متعددة الأشرطة من أداة Progress Bar الفردية.
كيف تختلف أشرطة التقدم عن أداة شريط التقدم الفردية؟
تعرض أداة Progress Bar الفردية شريطًا واحدًا لكل عنصر واجهة مستخدم. تحتوي أداة Progress Bars على مكرر، لذا يمكنك إضافة أشرطة غير محدودة داخل عنصر واجهة مستخدم واحد وإدارتها معًا. استخدم الشريط الفردي لقياس مستقل وأشرطة التقدم لمجموعة مكدسة.
كم عدد أشرطة التقدم التي يمكنني إضافتها؟
ليس هناك حد. انقر فوق إضافة عنصر في مكرر أشرطة الإحصائيات لإضافة أي عدد تحتاجه. يبدأ كل شريط جديد بقيم افتراضية يمكنك إعادة تسميتها وضبطها، ويمكنك تكرار الأشرطة أو حذفها في أي وقت.
هل يمكن أن يكون لكل شريط تقدم لون مختلف؟
نعم. قم بتعيين لون الشريط النشط في علامة التبويب "النمط" كإعداد افتراضي للمجموعة، ثم افتح أي شريط في علامة التبويب "المحتوى" واستخدم حقل "لون الشريط" الخاص به لتجاوز هذا الشريط الواحد. اترك الحقل فارغًا للاحتفاظ بشريط على لون المجموعة.
هل يتم تحريك أشرطة التقدم؟
نعم. يمتلئ كل شريط من الصفر إلى النسبة المئوية المحددة له عندما يتم تمرير عنصر واجهة المستخدم للعرض على الصفحة المباشرة، بحوالي 20 مللي ثانية لكل نقطة مئوية. لا يوجد إعداد لتغيير السرعة.
إلتحاق بالركب #
تقوم أداة Progress Bars بتحويل مجموعة من المقاييس إلى كتلة متحركة واحدة مرتبة. أضف أشرطة في مكرر Stats Bars، وقم بتعيين كل عنوان ونسبة مئوية، وقم بتلوينها بشكل فردي أو كمجموعة، وقم بتشكيل المجموعة بأكملها من علامة التبويب Style. للحصول على شريط واحد مستقل، قم بالوصول إلى القطعة شريط التقدم بدلاً من ذلك. تصفح كاملا عناصر واجهة المستخدم والإضافات الرئيسية لمعرفة ما يمكنك بناءه أيضًا، ورؤية صفحة القطعة أشرطة التقدم للعروض التوضيحية. الأداة مجانية، مع عدم وجود خيارات احترافية فقط.
