تُقرأ أشرطة المهارات وأهداف التمويل وحالة المشروع بشكل أفضل كمرئية مقارنة برقم مدفون في الجملة. ال شريط التقدم القطعة في الإضافات الرئيسية للعنصر يمنحك شريطًا متحركًا بعنوان ونسبة مئوية، بالإضافة إلى القائمة المنسدلة للإعدادات المسبقة للنمط التي تنتقل بين خط عادي وخط به فقاعة ودائرة كاملة ومقياس نصف دائرة.
يمكنك تعيين عنوان وقيمة، واختيار إعداد مسبق، ثم تلوين الشريط الأمامي والشريط الخلفي والقيمة لتتناسب مع علامتك التجارية. يغطي هذا الدليل كل إعداد في الأداة.
ما تفعله أداة شريط التقدم #
تعرض الأداة مؤشر تقدم واحدًا: عنوان وقيمة نسبة مئوية وشريط يملأ تلك القيمة عند تمريرها للعرض. ال إعدادات النمط المسبقة يغير Dropdown الشكل، بحيث يمكن أن تظهر نفس القيمة كخط أفقي، أو خط به فقاعة عائمة، أو دائرة دونات، أو مقياس نصف دائرة.
لديها ثلاث علامات تبويب. محتوى يحمل العنوان والقيمة. أسلوب يتحكم في الإعداد المسبق وألوان الشريط الأمامي والخلفي والفقاعة والعنوان ونص القيمة. متقدم يحمل خيارات تباعد العناصر والرؤية المعتادة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- التسميات والنسب المئوية التي تريد عرضها، مثل WordPress 60% أو Java 85%.
كيفية إضافة عنصر واجهة المستخدم شريط التقدم #
في محرر Elementor، افتح عناصر لوحة والبحث عن شريط التقدم، أو قم بالتمرير إلى قسم الإضافات الرئيسية (تحمل الأدوات شارة MA أرجوانية). اسحبه إلى صفحتك وسيتم تحميله بشريط واحد جاهز للتحرير.
تنبيه: هناك نوعان من الأدوات المتشابهة. شريط التقدم هو شريط واحد (هذا الدليل)، و أشرطة التقدم يقوم بتكديس عدة أشرطة داخل عنصر واجهة مستخدم واحد. بالنسبة لعدد قليل من الأشرطة المستقلة ذات الأنماط المختلفة، فإن شريط التقدم الفردي هو الاختيار المرن.
تعيين العنوان والقيمة #
افتح ال محتوى علامة التبويب. هناك حقلان فقط، مما يحافظ على سرعة الإعداد.
- عنوان: الملصق الموجود أعلى الشريط، مثل WordPress أو Design.
- قيمة: النسبة المئوية التي يملأها الشريط من 0 إلى 100.
نظرًا لأن كل شريط تقدم عبارة عن شريط واحد، فإنك تقوم بإنشاء مجموعة عن طريق تكرار عنصر واجهة المستخدم. انقر بزر الماوس الأيمن فوقه واختر Duplicate (أو اضغط على Ctrl/Cmd + D)، ثم قم بتغيير العنوان والقيمة في كل نسخة. هذه هي الطريقة التي انتهى بها الأمر بأشرطة WordPress وJava أعلاه جنبًا إلى جنب.
اختر نمطًا محددًا مسبقًا #
التبديل إلى أسلوب علامة التبويب وفتح الأنماط العامة. ال إعدادات النمط المسبقة المنسدلة هي المكان الذي تختار فيه الشكل. ال فقاعة الخط يضيف الإعداد المسبق فقاعة عائمة توضح النسبة المئوية والركوب في نهاية التعبئة.
- الإعدادات المسبقة للنمط: الخط، فقاعة الخط، الدائرة، والمروحة (مقياس نصف دائرة).
- لون الفقاعة: لون فقاعة النسبة المئوية الموجودة على الفقاعة المحددة مسبقًا.
- موقف الفقاعة: ادفع الفقاعة على طول الشريط.
الإعدادات المسبقة لقياس الدائرة ونصف الدائرة #
ال دائرة يرسم الإعداد المسبق كعكة دونات كاملة مع النسبة المئوية في المنتصف، والتي تناسب كتلة الإحصائيات المدمجة.
ال معجب يرسم الإعداد المسبق مقياسًا نصف دائرة، وهو مناسب تمامًا لتصنيف نمط لوحة القيادة أو مظهر عداد السرعة.
نمط أجزاء الشريط #
ال أسلوب تقوم علامة التبويب بتقسيم الأداة إلى أجزاء يمكنك تصميمها بمفردها الأنماط العامة, عنوان, شريط أمامي, شريط الظهر, قيمة، و أنماط (خيار احترافي).
- عنوان: اللون والطباعة للملصق.
- شريط أمامي: لون وعرض الجزء المملوء.
- شريط الظهر: لون المسار غير المملوء خلفه.
- قيمة: اللون والطباعة لنسبة النص.
يفتح شريط أمامي لتعيين لون التعبئة والعرض. هذا هو ما يحمل لون علامتك التجارية عبر الشريط أو المقياس بأكمله.
حالات الاستخدام الشائعة #
- قضبان المهارة على صفحة حول أو سيرة ذاتية (WordPress 90%، Design 75%).
- التمويل أو عدادات الأهداف إظهار مدى قرب الحملة.
- إحصائيات الدائرة في كتلة الخدمات أو النتائج.
- مقاييس نصف الدائرة للحصول على النتائج أو التقييمات أو عناصر واجهة المستخدم للوحة المعلومات.
- حالة المشروع أشرطة على صفحة العميل أو المحفظة.
نصائح للعمل مع أداة شريط التقدم #
- مكررة، ثم تحرير. قم بتصميم شريط واحد بالطريقة التي تريدها، ثم انسخه وقم بتغيير العنوان والقيمة.
- حافظ على المقياس صادقًا. القيمة هي نسبة مئوية، لذا فإن 60 تعني 60 بالمائة كاملة.
- تطابق شريط التباين الأمامي والخلفي. يُقرأ المسار الخفيف خلف حشوة ذات لون العلامة التجارية بوضوح.
- استخدم الفقاعة للحصول على أرقام دقيقة. يضع الإعداد المسبق لـ Line Bubble النسبة المئوية مباشرة عند التعبئة.
- اختر الشكل للسياق. خطوط لقوائم المهارات والدوائر والمشجعين للإحصائيات الفردية المميزة.
شاهد الفيديو التعليمي #
تفضل المتابعة على الشاشة؟ يمر برنامج الفيديو التعليمي أدناه عبر عنصر شريط التقدم من البداية إلى النهاية، موضحًا كيفية عمل كل نمط محدد مسبقًا ولون وقيمة في محرر Elementor.
الأسئلة المتداولة #
ما هي أداة شريط التقدم في الإضافات الرئيسية؟
إنها أداة Elementor تعرض مؤشر تقدم متحركًا بعنوان ونسبة مئوية. يقوم النمط المسبق بالتبديل بين خط وخط به فقاعة ودائرة كاملة ومقياس نصف دائرة، ويمكنك تلوين كل جزء من لوحة Elementor.
ما هي أنماط شريط التقدم التي تتضمنها الأداة؟
أربعة إعدادات مسبقة: الخط، والفقاعة الخطية، والدائرة، والمروحة. الخط عبارة عن شريط أفقي عادي، تضيف Line Bubble فقاعة نسبة مئوية عائمة، وترسم الدائرة كعكة كاملة مع القيمة في المنتصف، وترسم المروحة مقياس نصف دائرة. تبقى القيمة كما هي في كل منهم.
هل يمكنني عمل شريط تقدم دائري أو قياس في Elementor؟
نعم. قم بتعيين إعدادات النمط المسبقة على الدائرة للحصول على كعكة كاملة مع النسبة المئوية في المنتصف، أو على المروحة للحصول على مقياس نصف دائرة. كلاهما يتحركان وفقًا للقيمة التي قمت بتعيينها ويمكن تلوينهما من خلال أقسام الشريط الأمامي والشريط الخلفي في علامة التبويب "النمط".
كيف يمكنني إضافة العديد من أشرطة التقدم؟
كل عنصر واجهة مستخدم Progressbar عبارة عن شريط واحد، لذا قم بتكرار عنصر واجهة المستخدم وقم بتغيير العنوان والقيمة في كل نسخة. ضع النسخ في أعمدة لصف من أشرطة المهارات. بالنسبة للعديد من الأشرطة المُدارة داخل عنصر واجهة مستخدم واحد، استخدم عنصر واجهة مستخدم Progressbars المنفصل بدلاً من ذلك.
هل ينشط شريط التقدم؟
نعم. يمتلئ الشريط بقيمته عند تمريره للعرض، لذلك يتم تحريك قائمة المهارات أو المقياس عندما يصل إليه الزائر. يعمل التأثير بنفس الطريقة عبر الإعدادات المسبقة للخط والدائرة والمروحة.
إلتحاق بالركب #
تقوم أداة Progress Bar بتحويل نسبة مئوية عادية إلى خط متحرك أو فقاعة أو دائرة أو مقياس. قم بتعيين عنوان وقيمة، واختر إعدادًا مسبقًا، ثم قم بتلوين الشريط الأمامي والشريط الخلفي والقيمة لتتناسب مع تصميمك. للحصول على عناصر واجهة المستخدم الإحصائية ذات الصلة، راجع القطعة العداد و ال أداة صندوق المعلومات، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
