كيفية استخدام وحدة القياس الدائرية على Divi builder

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

كيفية إضافة وحدة متر دائرية إلى صفحتك

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

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

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

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

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

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

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

إحدى أفضل الطرق لاستخدام وحدة عدادات الدائرة هي توضيح الإحصائيات لدراسات الحالة أو قطع المحفظة.

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

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

دعونا نبدأ.

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

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

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

العنوان: الرسوم المتحركة
رقم: 80
٪ تسجيل الدخول: نعم
لون خلفية الشريط: #e07a5e

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

لون الدائرة: #e07a5e
لون النص: داكن
خط العنوان: الافتراضي
العنوان حجم الخط: 26px
لون نص العنوان: #405c60
رقم الخط: الافتراضي
حجم خط الحجم: 46px
رقم نص اللون: #405c60

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

الآن ، قم بتكرار وحدة عداد الدائرة مرتين واسحب كل نسخة إلى العمودين الثاني والثالث من خطك.

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

هذا كل شيئ !

زيارة الصفحة.

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

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

لقب

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

اسم

قم بتعيين رقم للعداد الدائري. بتحديد رقم أقل من 100 ، سيملأ الرسم البياني الدائري نسبة مئوية تساوي الرقم الذي أدخلته. على سبيل المثال ، يؤدي إدخال الرقم 20 إلى ملء الدائرة بنسبة 20٪ بلون تمييزك.

النسبة المئوية

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

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

سيؤدي هذا إلى تغيير لون تعبئة الشريط. يتم التحكم في مقدار لون التعبئة بواسطة "الرقم" المحدد أعلاه. إذا حددت الرقم 50 واللون الأزرق ، فستملأ دائرتك 50٪ باللون الأزرق.

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

سيؤدي هذا إلى تغيير تسمية الوحدة في المولد لسهولة التعرف عليها. عند استخدام عرض 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" بناءً على حجمك لتغيير نوع الوحدة.

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

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

رؤية

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

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