تعد عدادات الأرقام المتحركة شائعة على الويب كطريقة لعرض الأرقام. DONNEES لتسليط الضوء على قيمة الخدمات ودراسات الحالة وما إلى ذلك. Divi يحتوي على وحدة عداد أرقام مخصصة يمكن استخدامها لإنشاء عدادات أرقام متحركة بسهولة.
ومع ذلك ، في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء عدادات رقمية متحركة عند التمرير باستخدام Divi. استخدام خيارات الموضع وتأثيرات التمرير Divi، سنقوم بتصميم تخطيط بسيط لعرض التاريخ بأرقام قابلة للتمرير.
الجزء الأول: إنشاء قسم العنوان
في هذا الجزء الأول ، سننشئ عنوانًا بسيطًا للتخطيط.
أولاً ، أضف صفًا من عمود واحد إلى القسم.
ثم أضف وحدة نصية جديدة إلى السطر.
تحديث محتويات وحدة النص مع العناصر التالية:
احفظ التاريخ
ثم قم بتحديث نمط نص العنوان كما يلي:
- خط العنوان 2: Prata
- العنصر 2 حجم النص: 130 بكسل (سطح المكتب) ، 70 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف)
الجزء 2: إنشاء عدادات مع الرسوم المتحركة التمرير
في هذا الجزء التالي ، سننشئ العدادات الثلاثة التي ستحرك أرقام التمرير حتى تتوقف لعرض التاريخ (الشهر واليوم والسنة). سيتم إنشاء كل عداد باستخدام إجمالي 5 وحدات نصية ووحدة فاصلة. ستعمل الوحدة النصية الأولى كتسمية للعداد (أي الشهر ، اليوم ، السنة). ستحتوي كل وحدات النص الأربعة التالية على رقم مختلف (قيد التقدم) سيتم تحريكه عند التمرير باستخدام إزاحة الحركة العمودية في Divi. ستساعد وحدة الفصل السفلية في إخفاء فائض الأرقام.
إليك كيف.
أضف السطر الثاني
أسفل الصف الحالي ، أضف صفًا آخر إلى عمود.
إعدادات الخط
قبل إضافة وحدة نمطية ، قم بتحديث معلمات الصف كما يلي:
- عرض مزراب: 1
- الحشو: 0px عالية ، 0px منخفضة
معلمات العمود
ثم افتح إعدادات العمود وقم بتحديث التعبئة كما يلي:
- المساحة المتروكة (المكتب): 100 بكسل منخفضة
- المساحة المتروكة (الكمبيوتر اللوحي والهاتف): 0 بكسل منخفضة
أضف وحدة نصية
ثم أضف وحدة نصية إلى العمود.
المحتوى / التسمية
ل محتويات من وحدة النص، أضف كلمة "شهر".
إعدادات تصميم النص
وبمجرد أن محتويات وأضاف، تحديث إعدادات التصميم على النحو التالي:
- لون الخلفية: #ffffff
- خط النص: Talk
- حجم النص: 40px
- ارتفاع سطر النص: 2em
- العرض: 100٪
- الحشو: 20 بكسل في الأعلى ، 20 بكسل في الأسفل ، 20 بكسل في اليسار ، 20 بكسل في اليمين
- عرض الحدود السفلية: 5 بكسل
- لون الحد السفلي: #eeeeee
الموقع الحالي
ثم ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات المركز على النحو التالي:
- المنصب: نسبي
- مؤشر Z 1
أضف وحدة نصية للمسألة الأولى
بمجرد وضع الوحدة النصية الأولى في مكانها ، يمكننا البدء في إضافة الأرقام التي ستتحرك في التمرير. لإضافة الرقم الأول ، أضف وحدة نصية جديدة ضمن الوحدة النصية الحالية "الشهر".
أضف رقم / محتوى
ثم قم بتحديث تسمية وحدة النص لقراءة "num1" لتسهيل الرجوع إليها. ثم قم بتحديث المحتوى برقم "01".
إعدادات التصميم للرقم
تحت علامة تبويب التصميم ، قم بتحديث ما يلي:
- خط النص: براتا
- لون نص النص: # 8ab2d3
- حجم نص النص: 70 بكسل
- تباعد الرسائل النصية: 4 بكسل
- ارتفاع سطر النص: 1.5em
- المساحة المتروكة: 20 بكسل متبقية
ملاحظة: تحتوي الأرقام على حجم نص 70 بكسل وارتفاع خط 1.5em ، مما يعني أن الارتفاع الكلي لوحدة النص سيكون قريبًا من 100 بكسل. من المهم أن تضع في اعتبارك كلما نبدأ في إضافة إزاحة الحركة الرأسية. على سبيل المثال ، تؤدي إضافة إزاحة رأسية لـ "1" إلى وحدة النص إلى تحريك وحدة النص 100 بكسل بالضبط وهو ارتفاع الوحدة النصية.
تأثيرات التمرير للرقم الأول
أضف تأثيرات التمرير التالية إلى وحدة النص.
تحت علامة التبويب الحركة العمودية ، قم بتحديث ما يلي:
- تمكين الحركة الرأسية: نعم
- إزاحة البدء: 1 (بنسبة 10٪)
- متوسط الإزاحة: 0 (بنسبة 20 ٪)
- تعويض النهاية: -1 (بنسبة 30٪)
في علامة التبويب Fade In and Fade Out ، قم بتحديث ما يلي:
- تنشيط التلاشي والخروج: نعم
- التعتيم الأولي: 0٪ (عند 10٪)
- متوسط العتامة: 100٪ (بنسبة 20٪)
- عتامة النهاية: 0٪ (إلى 30٪)
تأكد من ضبط الزناد لتأثير الحركة في الجزء العلوي من المقطع:
- مشغل تأثير الحركة: أعلى عنصر
إنشاء وحدة نصية للرقم الثاني
كرر الرقم الأول
بمجرد إنشاء الرقم الأول ، قم بتكرار ذلك لإنشاء وحدة نص الرقم الثانية. ثم قم بتحديث التسمية في عرض الطبقات للحصول على مرجع أفضل.
تحديث الرقم / المحتوى
افتح معلمات وحدة النصوص الرقمية الثانية وقم بتحديث المحتوى برقم "02".
تحديث الموقف
ثم قم بتحديث خيارات الموضع كما يلي:
- المنصب: مطلق
- إزاحة رأسية: 126 بكسل
تحديث تأثيرات التمرير
ثم قم بتحديث تأثيرات التمرير كما يلي:
في علامة التبويب Vertical Motion ، قم بتحديث ما يلي:
- إزاحة البدء: 1 (بنسبة 20٪)
- متوسط الإزاحة: 0 (بنسبة 30 ٪)
- تعويض النهاية: -1 (بنسبة 40٪)
في علامة التبويب Fade In and Fade Out ، قم بتحديث ما يلي:
- التعتيم الأولي: 0٪ (عند 20٪)
- متوسط العتامة: 100٪ (بنسبة 30٪)
- عتامة النهاية: 0٪ (إلى 40٪)
إنشاء وحدة نصية للإصدار الثالث
كرر الرقم الثاني
لإنشاء وحدة نصية للرقم الثالث ، قم بتكرار وحدة النص للرقم الثاني.
تحديث الرقم / المحتوى
تحديث المحتوى برقم "03".
تحديث تأثيرات التمرير
ثم قم بتحديث تأثيرات التمرير:
في علامة التبويب Vertical Motion ، قم بتحديث ما يلي:
- إزاحة البدء: 1 (بنسبة 30٪)
- متوسط الإزاحة: 0 (بنسبة 40 ٪)
- تعويض النهاية: -1 (بنسبة 50٪)
في علامة التبويب Fade In and Fade Out ، قم بتحديث ما يلي:
- التعتيم الأولي: 0٪ (عند 30٪)
- متوسط العتامة: 100٪ (بنسبة 40٪)
- عتامة النهاية: 0٪ (إلى 50٪)
إنشاء وحدة نصية للإصدار الرابع
القضية المكررة الثالثة
لإنشاء الرقم الرابع لعداد التمرير ، قم بتكرار وحدة النص للرقم الثالث.
تحديث الرقم / المحتوى
تحديث المحتوى برقم "04".
تحديث تأثيرات التمرير
ثم قم بتحديث تأثيرات التمرير:
في علامة التبويب Vertical Motion ، قم بتحديث ما يلي:
- إزاحة البدء: 1 (بنسبة 40٪)
- متوسط الإزاحة: 0 (بنسبة 50 ٪)
- تعويض النهاية: 0 (عند 60٪)
في علامة التبويب Fade In and Fade Out ، قم بتحديث ما يلي:
- التعتيم الأولي: 0٪ (عند 40٪)
- متوسط العتامة: 100٪ (بنسبة 50٪)
- عتامة النهاية: 100٪ (إلى 60٪)
أضف فاصل سفلي
ضمن وحدة النص الأخيرة ، أضف وحدة فاصلة جديدة. سيتم استخدام هذا لإخفاء التدفق السفلي لنص التمرير في العرض.
ثم حدد "لا" لعرض الفاصل.
إعدادات النمط والموضع
قم بتحديث تصميم الفاصل كما يلي:
- لون الخلفية: #ffffff
- العرض: 100٪
- الارتفاع: 100px
- عرض الحد العلوي: 5 بكسل
في علامة التبويب خيارات متقدمة ، قم بتحديث ما يلي:
- إلغاء التنشيط على: الهاتف والجهاز اللوحي
- المنصب: مطلق
- الموقع: أسفل اليسار
هام: تم إنشاء المساحة التي سيشغلها الفاصل مسبقًا عن طريق إضافة حشوة سفلية 100 بكسل إلى العمود. إذا لم تقم بإضافة هذه المساحة المتروكة ، فسوف يتداخل الفاصل مع الأرقام.
إنشاء عدادات وأعمدة إضافية
تكرار العمود 1 وتحديث المحتوى
لإنشاء عداد جديد ، كرر العمود 1. سيؤدي هذا إلى إنشاء عمود ثانٍ مع وضع جميع العناصر تلقائيًا.
ثم كل ما عليك القيام به هو تحديث محتوى جميع الوحدات النصية مع النصوص والأرقام الجديدة.
تكرار العمود 2 وتحديث المحتوى
بمجرد تحديث محتويات جميع وحدات النص في العمود 2 ، قم بتكرار العمود 2 لإنشاء عداد ثالث للسنة. ثم قم بتحديث محتوى كل وحدة نصية حسب الحاجة.
نتيجة نهائية
ها هي النتيجة النهائية.
موارد أخرى
- كيفية استخدام وحدة عداد الأرقام على Divi
- كيفية استخدام وحدة العداد الدائري في Divi
- كيفية إنشاء عدادات دائرية تنبض بالحياة على Divi
الأفكار النهائية
يجب أن يكون هذا التخطيط البسيط مع تمرير عدادات الأرقام المتحركة مفيدًا للعرض DONNEES رقمي بطريقة جديدة وفريدة من نوعها. لا تتردد في التخلي عن مفهوم التاريخ واستخدام العدادات لأي شيء يمكنك أن تحلم به!
