الأرقام تقنع بشكل أسرع من الجمل: تسليم إشعارات بدقة 5.5K، ومشاهدة فيديو بدقة 120 مترًا. ال مكافحة يصل القطعة في الإضافات الرئيسية للعنصر ضع هذه الإحصائيات في صف من البطاقات التي يتم العد من الصفر أثناء تمرير الزوار إليها، ولكل منها رمز ولاحقة مثل K+ أو M+ وتصميم خاص بها.
يقوم هذا الدليل بإنشاء قسم مكون من أربع إحصائيات من الصفر: العناصر والأرقام والأيقونات والتخطيط وتصميم البطاقة، وينتهي بالعدادات النهائية على الصفحة المباشرة.

ما تفعله أداة Counter Up #
تحتوي إحدى عناصر واجهة المستخدم على مجموعة من عناصر العداد. كل عنصر عبارة عن إحصائية: رقم يتحرك من الصفر عند تمريره للعرض، وبادئة أو لاحقة حوله، وعنوان أسفله، وأيقونة أو صورة اختيارية في الأعلى. تقوم الأداة بترتيب العناصر في أعمدة وتنميطها كمجموعة، بحيث يظل نطاق الإحصائيات ثابتًا دون العبث بكل بطاقة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- تم تمكين عنصر واجهة المستخدم Counter Up في لوحة خيارات Master Addons، ضمن Basic Widgets.
- أعدادك الحقيقية. قسم الإحصائيات الذي يحتوي على أرقام مخترعة يضر أكثر من عدم وجود إحصائيات على الإطلاق.
كيفية إضافة عنصر واجهة المستخدم Counter Up #
في محرر Elementor، ابحث في عناصر لوحة ل مكافحة يصل واسحبه إلى الصفحة. يتم تحميله بعينات من العناصر التي يتم عدها بالفعل على اللوحة القماشية، بحيث تكون الرسوم المتحركة مرئية من الثانية الأولى.
قم بإعداد كل عنصر عداد #
يفتح محتوى مكافحة وانقر فوق عنصر في القائمة. يحمل كل واحد مجموعة كاملة من عناصر التحكم لكل حالة:

- يكتب: لا شيء أو أيقونة أو صورة أعلى الإحصائيات. يفتح الأيقونة مكتبة Elementor؛ تفتح الصورة مكتبة الوسائط.
- عنوان: التسمية الموجودة أسفل الرقم، مثل “Notifications Delivery”.
- بادئة الرقم واللاحقة: النص حول الرقم. بادئة “$” أو لاحقة “K+” تتحول إلى 5.5 إلى $5.5 أو 5.5K+.
- رقم: القيمة التي يصعد إليها العداد. تعمل الكسور العشرية، لذا فإن 5.5 مع لاحقة K+ يقرأ 5.5K+.
- خلفية: لون البطاقة لكل عنصر، عندما يجب أن تبرز إحصائية واحدة.
تحافظ خدعة اللاحقة على اختصار الأرقام الكبيرة: فبدلاً من تحريكها إلى 120،000،000، يتم احتساب العرض التوضيحي إلى 120 باستخدام لاحقة M+. رسوم متحركة أسرع وبطاقة أنظف ولا أحد يحسب الأصفار للتحقق منها.

لكل عنصر خلفية ألوان تلك البطاقة فقط. مفيد لتسليط الضوء على إحصائيات العنوان، أو تخطيها والسماح لنمط الصندوق المشترك بالتعامل مع العناصر الأربعة

اختر الأعمدة وموضع المحتوى #
أسفل قائمة العناصر، الأعمدة يضبط عدد العدادات التي تشترك في الصف، مع تبديل سريع الاستجابة لكل جهاز. موقف المحتوى يضع العنوان بالنسبة للرقم: أعلى، يسار، يمين، أو أسفل. يحاول العرض التوضيحي عمودين برقم وعنوان جنبًا إلى جنب، ثم يستقر مرة أخرى على 4 أعمدة مكدسة.

ضبط الرموز #
ال إعدادات الأيقونة يتحكم القسم في كتلة الأيقونات الموجودة على كل بطاقة: موضع الأيقونة/الصورة (يسار أو أعلى أو يمين الإحصائيات)، حجم الأيقونة، و دائرة الأيقونة أو حجم الصورة للقرص الملون خلف الصورة الرمزية. يقوم العرض التوضيحي بتشغيل أيقونات 30 بكسل على دوائر 86 بكسل.

نمط البطاقات #
في ال أسلوب علامة التبويب، نمط صندوق العداد يغطي مظهر البطاقة المشتركة: لون الخلفية, الحشو, هامش, نوع الحدود, نصف قطر الحدود، و صندوق الظل. يهبط العرض التوضيحي على بطاقات وردية ناعمة مع حشوة وهامش 20 بكسل، والتي تفصل بين الإحصائيات الأربعة بدون حدود صلبة.

قم بتصميم الأرقام والعناوين والأيقونات #
ال نمط المحتوى ينقسم القسم إلى أربع مجموعات، واحدة لكل عنصر على البطاقة

- نمط الأيقونة: لون الصورة الرمزية ولون الدائرة خلفه. يحول العرض التوضيحي الدوائر إلى اللون الأرجواني الغامق مع أيقونات بيضاء.
- نمط الرقم: اللون والطباعة للإحصائيات نفسها، أكبر نص على البطاقة.
- بادئة الرقم: لونه وطباعة وحجمه وهامشه، لذلك يمكن أن يكون رمز العملة أصغر من الرقم.
- نمط العنوان: اللون والطباعة والهامش للتسمية.
النتيجة على الصفحة #
في الصفحة المباشرة، تدور الأرقام من الصفر أثناء تمرير القسم للعرض، ثم تستقر على القيم النهائية. هنا هو النطاق النهائي:

حالات الاستخدام الشائعة #
- نطاقات إحصائيات الشركة: خدمة العملاء، تسليم المشاريع، سنوات العمل.
- أقسام إثبات SaaS: المستخدمون، وقت التشغيل، التكامل.
- أرقام المحفظة: تشغيل الحملات، الإيرادات الناتجة، ساعات التحرير.
- تأثير غير ربحي: الوجبات المقدمة، المتطوعين، الأموال التي تم جمعها.
- صفحات الدورة والمجتمع: الطلاب، الدروس، المراجعات.
نصائح لعدادات أفضل #
- استخدم اللواحق للأعداد الكبيرة. العد إلى 120 باستخدام لاحقة M+ ينشط بشكل أسرع ويقرأ بشكل أنظف من العد إلى تسعة أرقام.
- احتفظ بالمجموعة على ثلاث أو أربع إحصائيات. تتنافس ستة عدادات؛ أربعة الحصول على القراءة.
- الرصاص بأقوى رقم. يقرأ الزوار من اليسار إلى اليمين ولا يجوز لهم إنهاء الصف.
- قم بمطابقة دوائر الأيقونات مع لوحة الألوان الخاصة بك. لون الدائرة هو اختيار النمط الأكثر وضوحًا على البطاقة؛ يعمل العرض التوضيحي باللون الأرجواني على الوردي لأن كلاهما يأتي من لوحة واحدة.
- تحقق من عدد أعمدة الهاتف المحمول. أربعة أعمدة على الهاتف تضغط على الأرقام؛ يقوم التحكم في الأعمدة المستجيبة بإصلاحه بنقرة واحدة.
فيديو تعليمي #
إذا كنت ترغب في رؤية أداة Counter Up أثناء العمل، فإن هذا الفيديو يمر عبر الإعداد الكامل، بدءًا من العنصر الأول وحتى نطاق الإحصائيات المتحركة على الصفحة المباشرة
الأسئلة المتداولة #
ما هي أداة Counter Up في الإضافات الرئيسية؟
إنها أداة Elementor لأقسام الإحصائيات المتحركة. يحتوي كل عنصر على رقم يتم العد من الصفر عند التمرير، بالإضافة إلى بادئة ولاحقة وعنوان وأيقونة أو صورة اختيارية. تتم مشاركة الأعمدة وحجم الأيقونات وتصميم البطاقة عبر المجموعة.
كيف أعرض 120M+ بدلاً من 120000000؟
اضبط الرقم على 120 ولاحقة الرقم على M+. يتحرك العداد إلى 120 ويعرض 120M+. يعمل نفس الشيء مع K+ الآلاف والقيم العشرية مثل 5.5 مع لاحقة K+.
هل يمكن أن يكون لكل عداد رمز ولون خاص به؟
نعم. يختار كل عنصر رمزه أو صورته الخاصة من خلال عنصر التحكم في النوع، ولكل عنصر لون الخلفية الخاص به. يأتي حجم الأيقونة المشتركة وحجم الدائرة وتصميم البطاقة من إعدادات الأيقونة وعلامة التبويب "النمط".
متى تبدأ الرسوم المتحركة العد؟
يتم تحريك الأرقام عند تمرير الأداة إلى إطار العرض، مع العد من صفر إلى القيمة التي قمت بتعيينها. يرى الزائرون الذين يصلون إلى القسم تشغيل العد التنازلي مرة واحدة.
هل يمكنني تغيير عدد العدادات الموجودة على التوالي؟
نعم. يقوم القائمة المنسدلة للأعمدة في محتوى Counter Up بتعيين عدد الصفوف ويحمل تبديلًا سريع الاستجابة، بحيث يمكن أن ينخفض نطاق سطح المكتب المكون من أربعة أعمدة إلى عمودين على الأجهزة اللوحية وعمود واحد على الهواتف.
إلتحاق بالركب #
تقوم أداة Counter Up بتحويل الأرقام العادية إلى نطاق إحصائيات يتحرك: أيقونات لكل عنصر، وبادئات، ولاحقات، وأعمدة مشتركة وتصميم البطاقة، ورسوم متحركة للعد التنازلي تجذب العين مرة واحدة بالضبط. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية لمعرفة ما يتم شحنه أيضًا مع البرنامج المساعد، وتحقق من صفحة التسعير لإضافات Pro مثل الأنماط.