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

من قبل بلير Jersyer | Divi

تم تصميم Divi ليكون متوافقًا مع ملفات WooCommerce. لدمج WooCommerce، يجب عليك تثبيت أحدث إصدار من WooCommerce.

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

يرجى ملاحظة أنه بينما يتضمن المنشئ وحدات WooCommerce متعددة ، يمكنك أيضًا استخدام WooCommerce بمفرده دون أن يكون المنشئ على ما يرام. يمكنك إنشاء صفحات قياسية لـ Checkout و Shopping Cart وما إلى ذلك كما هو موضح في وثائقهم. يمكنك أيضًا الارتباط مباشرة بفئات woocommerce الخاصة بك ، أو استخدام الرموز القصيرة WooCommerce في وحدة نص Divi. يمنحك الحرية لفعل أي شيء تقريبًا.

كيفية إضافة وحدة تخزين إلى صفحتك

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

ديفي البناء

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

متجر الوحدة divi.png

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

مثال حالة الاستخدام: عرض أحدث المنتجات على الصفحة الرئيسية باستخدام وحدة التسوق

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

هنا هي الصفحة مع المنتجات الأربعة المقدمة.

عرض المنتجات على صفحة تسريع divi.jpg

دعونا نبدأ.

استخدم المنشئ المرئي لإضافة قسم عادي بصف كامل العرض (عمود واحد). غيّر معلمة الصف لجعلها ذات عرض كامل بعرض هامش مخصص قدره 1.

خيار المنطقة divi.png

ثم قم بإضافة وحدة متجر إلى السطر.

أدخل وحدة بوتيك divi.png

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

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

النوع: المنتجات الحديثة
عدد المنتجات: 4

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

رمز تحوم اللون: # ea1d63
عنوان الشرطة: فتح بدون
العنوان حجم الخط: 24px
جائزة الشرطة: فتح بدون
حجم حجم الخط: 20px

خيارات متقدمة (CSS مخصصة)

العنوان:

محاذاة النص: مركز؛
الخلفية: #fff؛
الهامش العلوي: -10px! كبيره.

الجائزة الكبرى:

محاذاة النص: مركز؛
الخلفية: #fff؛
تنجيد أسفل: 15px.

هذا كل شيئ! هنا هو النتيجة النهائية.

قسم المنتج divi.jpg

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

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

النوع

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

عدد المنتجات

حدد عدد المنتجات التي تريد عرضها. سوف تحتاج إلى الحصول على منتجات مصنوعة لأي شيء يظهر في هذه الوحدة.

تشمل الفئات

اختر الفئات التي تريد تضمينها.

عدد الأعمدة

اختر عدد الأعمدة التي تريد عرضها في وحدة متجرك. يجب استخدام 4 أعمدة لصف من عمود واحد. يجب استخدام 1 أعمدة لعمود يشغل 3/3 من مساحة الصف. يجب استخدام العمود 4 لعمود يشغل نصف مساحة الضوء. يجب استخدام عمود واحد لعمود 2/1 من مساحة الصف.

إعادة ترتيب بواسطة

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

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

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

خيارات تصميم ورشة العمل

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

وضع متجر divi.png

رمز التراكب

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

لون التراكب

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

أيقونة محدد

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

لون شارة المبيعات

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

خط العنوان

يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. تقدم 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" اعتمادًا على قيمة حجمك لتغيير نوع الوحدة.

خيارات متقدمة من المحل

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

خيار مسبق بوتيك divi.png

معرف 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]

دروس ديفي أخرى

1 تعليق

  1. فريدريك
    فريدريك on May 1، 2019 at 17:42 مساءً.

    عزيزي بير ،

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

    مع خالص التقدير ، فريدريك

    الرد

إرسال مراجعة

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

هذا الموقع يستخدم Akismet للحد من غير المرغوب فيها. تعرف على المزيد حول كيفية استخدام بيانات التعليقات الخاصة بك.