كيفية تصميم عدادات شريط متحركة مع Divi

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

يبدو أن معظم عدادات الشريط تتحرك عند ظهورها وقد يصعب تخصيصها. ومع ذلك ، في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء عدادات شريط قابلة للتخصيص بالكامل (من البداية) يتم تحريكها عند التمرير باستخدام Divi. للقيام بذلك ، سوف نستفيد من خيارات موضع Divi وتأثيرات التمرير ونستخدمها بطرق دقيقة بشكل فريد.

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على عدادات الشريط التي سنقوم ببنائها في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

لوضع يديك على عدادات الشريط مع تخطيط تأثيرات التمرير من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واستيراد ملف JSON من مكتبة Divi.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: تحسين القسم والصف والعمود

اضف سطر

ابدأ T0 ، أضف صفًا من عمودين إلى القسم.

إعدادات القسم

ثم افتح إعدادات القسم وأضف لون الخلفية كما يلي:

• خلفية Col0r: # 000545

ثم امنح القسم بعض الهامش المؤقت لاختبار تأثيرات التمرير وبعض الحشو كما يلي:

• الهامش: 80vh أعلى ، 80vh أسفل
• الحشو 10vw أعلى ، 10vw أسفل

عرض الصف

بعد ذلك ، افتح إعدادات الصف وأضف العرض التالي:

• العرض: 90٪
• العرض الأقصى: 700 بكسل

تجاوز العمود

تأكد من إخفاء تجاوز العمودين داخل الصف. للقيام بذلك ، افتح الإعدادات لكل عمود وقم بتحديث ما يلي:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

الجزء 2: إنشاء عداد شريط مع تأثيرات التمرير

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

لنبدأ بخلفية الشريط.

إنشاء خلفية الشريط

إضافة وحدة المقسم

أضف وحدة فاصل جديدة إلى العمود 1.

إعدادات الحاجز

إظهار المقسم:

• لون الخلفية: rgba (255،255،255،0.1)

• العرض: 300 بكسل
• الارتفاع: 70 بكسل

إنشاء شريط عداد شريط

وحدة تقسيم مكررة

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

خلفية المقسم

ثم قم بتحديث الخلفية بلون خلفية متدرج جديد كما يلي:

• خلفية متدرجة اللون الأيسر: # fe7e1f
• خلفية متدرجة اللون الصحيح: # ffbc48
• اتجاه التدرج: 90 درجة

موقف الحاجز

لجعل الشريط الملون يجلس فوق خلفية الشريط ، نحتاج إلى إعطائه موضعًا مطلقًا بمؤشر Z 1:

• الموقف: مطلق
• الفهرس Z: 1

تأثيرات تمرير المقسم

الآن نحن جاهزون لإضافة الحركة إلى شريط عداد الشريط. للقيام بذلك ، سوف نستخدم تأثير التمرير الأفقي الذي يحرك وحدة التقسيم من اليسار إلى اليمين. نظرًا لأن تجاوز العمود مخفي ، فلن نرى الشريط لأنه يمتد إلى ما بعد الجانب الأيسر من العمود. لكننا سنرى ذلك وهو يتحرك إلى اليمين.

استخدام قيم الإزاحة لتحديد قيم النسبة المئوية لعداد الشريط

قبل أن نضيف الحركة الأفقية إلى الحاجز / الشريط ، نحتاج إلى فهم كيفية تحديد قيمة النسبة المئوية ليتم عرضها على عداد الشريط. بعبارة أخرى ، إذا أردنا تمثيل 25٪ على عداد الشريط ، فنحن بحاجة إلى معرفة إزاحة الحركة الأفقية التي ستحرك الشريط إلى اليمين بالضبط بنسبة 25٪ من عرض خلفية الشريط.

يمكننا القيام ببعض العمليات الحسابية البسيطة لمعرفة ذلك.

العرض الإجمالي للشريط 300 بكسل.

كل قيمة إزاحة أفقية تتعلق بـ 100 بكسل (1 يساوي 100 بكسل ، -2 يساوي -200 بكسل ، إلخ ...)

لتحريك الشريط إلى اليسار (خارج العرض) ، نحتاج إلى إضافة إزاحة بداية من -3 (-300 بكسل). يؤدي هذا إلى نقله إلى اليسار بمقدار 300 بكسل بعيدًا عن الأنظار.

ثم نحتاج إلى تحريك الشريط بأكثر من 25٪ من 300 بكسل (وهو 75 بكسل) لإكمال حركة التمرير المتحركة.

لتحريك الشريط أكثر من 75 بكسل إلى اليمين عندما يصل الشريط إلى المركز الرأسي للصفحة ، نحتاج إلى إزاحة متوسطة قدرها -2.25 (لأن -300 زائد 75 يساوي -225). ربما يذكرك هذا بخطوط الأرقام التي استخدمناها في المدرسة الابتدائية.

إظهار 25٪ بالحركة الأفقية

لإظهار 25٪ بالحركة الأفقية ، حدد علامة تبويب الحركة الأفقية وقم بتحديث ما يلي:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: -3
• الإزاحة المتوسطة: -2.25
• إزاحة النهاية: -2.25

إنشاء محتوى عداد شريط

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

تحت وحدة مقسم الشريط الملون ، أضف وحدة دعاية مغالى فيها.

محتوى دعاية

ثم قم بتحديث المحتوى على النحو التالي:

• العنوان: 25٪
• الجسم: التحسين
• الرمز: انظر لقطة الشاشة

تصميم دعاية

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل

• لون النص: فاتح
• خط الجسم: روبيك
• نمط خط الجسم: TT
• تباعد حروف الجسم: 0.2em
• ارتفاع خط الجسم: 1em

• عرض المحتوى: 100٪
• العرض: 300 بكسل
• الارتفاع: 70 بكسل
• المساحة المتروكة: 15 بكسل للأعلى ، 15 بكسل على اليسار

• الموقف: مطلق
• الفهرس Z: 2

الجزء 3: إنشاء عدادات شريط إضافية

في هذا الجزء التالي ، سنستمر في صنع المزيد من عدادات الشريط باستخدام نفس التقنية. سننشئ عداد شريط بنسبة 50٪ و 75٪ و 100٪ لتقريب تصميم التخطيط. يجب أن يمنحك هذا أمثلة عمل جيدة لتحقيق المزيد بنفسك.

إنشاء عداد شريط بنسبة 50٪

عمود مكرر مع عداد شريطي

بمجرد إنشاء عداد الشريط الأول في العمود 1 ، يمكننا تكرار العمود بأكمله أو نسخ ولصق الوحدات النمطية الثلاثة التي تشكل عداد الشريط في العمود 2. الآن يجب أن يكون لديك عمودين لكل منهما عدادات شريطية متطابقة.

تحديث إعدادات Bar Divider

خلفية

داخل العمود 2 ، افتح إعدادات مقسم الشريط الملون وقم بتحديث ألوان الخلفية المتدرجة:

• خلفية متدرجة اللون الأيسر: # 4c75f8
• خلفية متدرجة اللون الصحيح: # 57a1ff

تأثيرات التمرير

ثم قم بتحديث تأثير التمرير الأفقي بحيث يملأ 50٪ من الشريط عند التمرير:

• تعويض متوسط: -1.5
• إزاحة النهاية: -1.5

تحديث محتوى دعاية وإعلان

ثم افتح إعدادات دعاية مغالى فيها في العمود 2 وقم بتحديث المحتوى:

• العنوان: 50٪
• الرمز: انظر لقطة الشاشة

إنشاء عداد شريط بنسبة 75٪

كرر الصف

لبدء تصميم عدّادي الشريط التاليين ، قم بتكرار الصف بأكمله لإنشاء صف مماثل آخر تحته.

تحديث خلفية الشريط وتأثيرات التمرير

افتح إعدادات وحدة مقسم الشريط الملون وقم بتحديث ألوان الخلفية التالية:

• خلفية متدرجة اللون الأيسر: # 4c75f8
• خلفية متدرجة اللون الصحيح: # 57a1ff

ثم قم بتحديث تعويضات الحركة الأفقية على النحو التالي:

• الإزاحة المتوسطة: -075
• إزاحة النهاية: -0.75

محتوى دعاية

افتح إعدادات blurb وقم بتحديث المحتوى على النحو التالي:

• العنوان: 75٪
• الرمز: انظر لقطة الشاشة

إنشاء عداد شريط 100٪

تحديث لون الشريط وتأثيرات التمرير

لإنشاء عداد شريط بنسبة 100٪ ، انتقل إلى العمود 2 وقم بتحديث لون خلفية وحدة مقسم الشريط الملون كما يلي:

• لون الخلفية المتدرجة اليسرى: # f449b4
• خلفية متدرجة اللون الصحيح: # fc845b

ثم قم بتحديث تعويضات الحركة الأفقية على النحو التالي:

• الإزاحة المتوسطة: 0
• إزاحة النهاية: 0

تحديث محتوى دعاية وإعلان

أخيرًا ، قم بتحديث محتوى الدعاية:

• العنوان: 100٪
• الرمز: انظر لقطة الشاشة

النتيجة النهائية

هنا لقطة من النتيجة النهائية. لقد أضفت صورة خلفية مخصصة من حزمة منشئ السمات الخامسة الخاصة بنا كلمسة نهائية.

الآن ما هي حركة التمرير في العمل.

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!