كيفية استخدام شريط الرسوم المتحركة وحدة على Divi

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

كيفية إضافة شريط عداد وحدة لصفحتك

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

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

يمكنك أيضًا النقر فوق الزر استخدم Visual Builder عندما تتصفح موقع الويب الخاص بك على الواجهة الأمامية ، إذا كنت متصلاً بلوحة معلومات WordPress.

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

حدد موقع وحدة عداد الشريط في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "Bar counter" ثم النقر فوق enter للبحث تلقائيًا وإضافة وحدة عداد الشريط!

بمجرد إضافة الوحدة ، سيتم استقبالك بقائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .

استخدم الحالة لعرض أهداف المشروع في دراسة حالة

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

كما ترى ، يتضمن الجزء العلوي من الصفحة الأهداف الثلاثة للمشروع باستخدام وحدة "Bar Counter" ويتضمن الجزء السفلي من الصفحة نتائج دراسة الحالة باستخدام وحدة "Counter" رقم ".

دعونا نبدأ.

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

قم بتحديث معلمات عدادات الشريط كما يلي:

خيارات المحتوى

نسب الاستخدام: ON
لون الخلفية: #dddddd
لون خلفية الشريط: # e07a5e

خيارات التصميم

لون النص: داكن
خط العنوان: الافتراضي
العنوان حجم الخط: 20px
لون نص العنوان: # 405c60
ارتفاع سطر العنوان: 2em
نسبة الخط: الافتراضي
نسبة حجم الخط: 16px
النسبة المئوية لون النص: #ffffff
ارتفاع الخط النسبي: 2.5em

عد الآن إلى علامة التبويب "المحتوى" وحدد + إضافة عنصر جديد لإضافة عداد شريط الأول إلى الوحدة النمطية.

قم بتحديث إعدادات الوحدة الفردية كما يلي:

علامة تبويب المحتوى

العنوان: عنواني
النسبة المئوية: 80

حفظ الإعدادات

إضافة عدادات شريط إضافية إلى الوحدة النمطية ومنح كل عنوان ونسبة مئوية.

هذا كل شيئ !

خيارات شريط عداد المحتوى

في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر في الوحدة النمطية الخاصة بك سيكون دائما في علامة التبويب هذه.

نسب الاستخدام

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

لون الخلفية

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

لون خلفية الشريط

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

تسمية الإدارة

سيؤدي هذا إلى تغيير تسمية الوحدة في المولد لسهولة التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، ستظهر هذه الملصقات في كتلة الوحدة لواجهة Divi Builder.

خيارات تصميم شريط عداد

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

لون النص

يمكنك هنا اختيار ما إذا كان النص الخاص بك سيكون فاتحًا أم غامقًا. إذا كنت تعمل بخلفية داكنة ، يجب أن يكون النص فاتحًا. إذا كانت الخلفية فاتحة ، يجب أن يكون النص باللون الأسود. يمكنك تخصيص لون النص بشكل أكبر باستخدام خيارات ألوان النص الإضافية التالية.

خط العنوان

يمكنك تغيير خط النص الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص الخاص بك باستخدام خيارات غامقة ومائلة وكبيرة وتسطير.

حجم خط العنوان

هنا يمكنك ضبط حجم نص العنوان الخاص بك. يمكنك سحب شريط تمرير الفاصل الزمني لزيادة أو تقليل حجم النص ، أو يمكنك إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير. تدعم حقول الإدخال وحدات قياس مختلفة ، مما يعني أنه يمكنك إدخال "px" أو "em" بناءً على حجمك لتغيير نوع الوحدة.

لون نص العنوان

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون نص العنوان الخاص بك ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.

تباعد أحرف العنوان

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

ارتفاع سطر العنوان

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

نسبة النص

نسبة حجم الخط

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

نسبة نص اللون

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون النص كنسبة مئوية ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.

تباعد الحروف في المئة

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

ارتفاع خط النسبة المئوية

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

دائرة نصف قطرها الحدود

سيؤدي تطبيق نصف قطر حد إلى تقريب زوايا الشريط في عداد الشريط. كلما زاد نصف قطر الحد ، زادت الزوايا تقريبًا.

استخدم الحدود

سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام المعلمات الشرطية التالية.

لون الحدود

يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.

عرض الحدود

بشكل افتراضي ، تكون الحدود بعرض 1 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو إدخال قيمة مخصصة في حقل الإدخال إلى يمين شريط التمرير. وحدات القياس المخصصة المدعومة ، مما يعني أنه يمكنك تغيير الوحدة الافتراضية من "px" إلى شيء آخر مثل em ، vh ، vw إلخ.

نمط الحدود

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

الحشو من شريط

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

خيارات شريط عداد المتقدمة

في علامة التبويب خيارات متقدمة ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css لموضوع الطفل.

معرف CSS

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

فئة CSS

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

عرف المغلق

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

رؤية

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

هذا كل شيء في هذا البرنامج التعليمي.