برنامج Divi التعليمي: كيفية استخدام وحدة عداد الأرقام

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

كيفية إضافة وحدة مكافحة عدد من Divi

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

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

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

مثال لحالة الاستخدام: استخدام وحدة العداد الرقمي لعرض نتائج المشروع

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

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

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

حدد تخطيط عمود واحد للجانب الأيمن من القسم وأدخل العنوان والنص المطلوبين لنتائج دراسة الحالة.

أدخل تخطيطًا لأعمدة 2 مباشرةً أسفل تخطيط عمود 1 على الجانب الأيمن من القسم.

أضف الآن أول وحدة عداد الأرقام إلى العمود الأيسر.

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

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

العنوان: الزوار الجدد
الرقم: 54210
تسجيل النسبة: OFF

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

لون النص: داكن
خط العنوان: افتراضي
العنوان حجم الخط: 20px
لون نص العنوان: # 405c60
ارتفاع سطر العنوان: 1em
عدد الشخصيات: الافتراضي ، غامق
عدد الحروف: 60px
رقم نص اللون: # e07a5e
رقم خط الطول: 72px

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

قم بتكرار وحدة عدادات الأرقام واسحبها إلى العمود الأيمن المجاور وقم بتحديث خيارات العنوان والرقم.

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

ثم قم بتحديث خيارات العنوان والرقم لهؤلاء. الآن لديك جميع عدادات الأعداد الأربعة الكاملة.

لا تنس إضافة صورة 667 × 320 في العمود الأيسر / جانب القسم المتخصص.

انتهى ! إن الجمع بين عدادات الأرقام وعدادات الشريط في صفحة دراسة الحالة هذه يجعل المحتوى جذابًا حقًا.

خيارات محتوى عداد رقمي

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

لقب

أدخل عنوان العداد. سيتم عرض هذا تحت الرقم بنص أصغر.

اسم

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

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

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

لون الخلفية

حدد لون خلفية مخصصًا للوحدة النمطية الخاصة بك أو اتركه فارغًا لاستخدام اللون الافتراضي.

صورة الخلفية

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

علامة المسؤول

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

خيارات التصميم (نمط) من العداد الرقمي

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

لون النص

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

عنوان الخط

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

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

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

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

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

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

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

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

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

خطوط الرقم

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

حجم الخط من الرقم

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

لون النص الرقمي

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

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

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

ارتفاع خط العدد

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

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

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

لون الحدود

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

عرض الحدود

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

نمط الحدود

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

الحشو مخصص

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

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

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" selected "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] قم بتنزيل موضوع DIVI [/ vcex_button] [/ width_cumnol] [] [vc_cull] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]