قم بإنشاء صفحة فئة منتج WooCommerce باستخدام Divi's Theme Builder

تعد صفحات الفئات جزءًا مهمًا من أي موقع للتجارة الإلكترونية. يتصفح العملاء فئات المنتجات للعثور على ما يحتاجون إليه. لهذا السبب يجب أن تبدو صفحات الفئات الخاصة بك جيدة مثل صفحات المنتج الخاصة بك. باستخدام Divi's Theme Builder ، أصبح إنشاء قوالب صفحة الفئات أسهل من أي وقت مضى. في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء قالب صفحة فئة خطوة بخطوة ونمطه باستخدام خيارات Divi المضمنة. علاوة على ذلك ، سنوضح لك كيفية جعله قابلاً للتصفية بمساعدة من المكون الإضافي Themify WooCommerce Product Filters.

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

دعنا نذهب اليها!

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب صفحة فئة Woo مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. قم بتحديث منتجاتك وفئاتك

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

2. إعداد البرنامج المساعد

التنزيل والتثبيت

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

إضافة نموذج مرشح جديد

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

إعداد نموذج عامل التصفية

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

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

إنشاء حقل فئة

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

• عنوان الحقل: الفئات
• تضمين الأطفال: نعم
• العرض على شكل: خانة اختيار
• المنطق: أو
• الترتيب: الاسم تنازلياً
• التخطيط: أفقي ، عمودين

إنشاء حقل العلامة

الآن قم بسحب وإسقاط علامة التبويب "العلامة" في المنشئ. تأكد من وضعها أسفل علامة التبويب "الفئة". اضبط الإعدادات كما يلي:

• عنوان الحقل: النوع
• العرض على شكل: خانة اختيار
• الترتيب: الاسم تنازلياً
• التخطيط: أفقي ، عمودين
• أيقونات ملونة
  • الخلفية: شفافة
  • لون النص: بني غامق # 44000 د

انقر فوق حفظ لإنشاء رمز قصير

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

3. إعادة إنشاء قالب صفحة فئة المنتج في مُنشئ القوالب

افتح منشئ القوالب / أضف قالبًا جديدًا

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

اضبط إعدادات القالب

في إعدادات النموذج ، حدد "صفحات فئة المنتج المحددة". انقر فوق الفئات التي تريد تخصيص هذا القالب لها. سنختار السلع الجلدية المصنوعة يدويًا.

إضافة نص مخصص

ثم ، انقر فوق "إضافة نص مخصص".

حدد إنشاء جسم مخصص

سنقوم بإعادة إنشاء هذا النموذج من البداية ، لذا انطلق واختر "إنشاء جسم مخصص".

بناء من الصفر

بمجرد الدخول إلى المنشئ المرئي ، حدد خيار الإنشاء من الصفر مرة أخرى.

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

خلفية

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

• لون الخلفية: رمادي مزرق شفاف - rgba (68،66،109،0.02)

اضف سطر

هيكل العمود

أضف الآن صفًا جديدًا بهيكل العمود التالي:

تحجيم

اضبط إعدادات التحجيم للصف التالي.

• عرض الحضيض: 1
• عرض
  • سطح المكتب: 90٪
  • الجهاز اللوحي والهاتف: 85٪
• العرض الأقصى: 1920 بكسل

تباعد

بعد ذلك ، قم بتطبيق بعض قيم التباعد المختلفة عبر أحجام الشاشات المختلفة.

• الهامش الأيمن والأيسر
  • سطح المكتب: تلقائي
  • الجهاز اللوحي: 55 بكسل
  • الهاتف: 30 بكسل
• الحشوة العلوية: 100 بكسل

أضف وحدة عنوان المشاركة إلى العمود الأول

عناصر

حان الوقت لإضافة وحدات نمطية ، بدءًا من وحدة عنوان المنشور في العمود 1. قم بتمكين العنوان فقط.

• عنوان العرض: نعم

خلفية

أضف لون الخلفية بعد ذلك.

• اللون: # e8e8e8

نص العنوان

انتقل إلى علامة تبويب التصميم وحدد نص العنوان.

• مستوى العنوان: H1
• الخط: Josefin Sans
• الوزن: جريء
• النمط: TT
• اللون: # 44000d
• مقاس
  • سطح المكتب: 32 بكسل
  • الجهاز اللوحي: 28 بكسل
  • الهاتف: 30 بكسل
• ارتفاع الخط: 1.2 م

تباعد

اضبط التباعد أيضًا.

• الحشو العلوي
  • سطح المكتب والجهاز اللوحي: 100 بكسل
• الحشو السفلي: 80 بكسل
• الحشو الأيسر
  • سطح المكتب والجهاز اللوحي: 30 بكسل
• الحشوة اليمنى
  • سطح المكتب والجهاز اللوحي: 30 بكسل
  • الهاتف: 10 بكسل

الحدود

امنح الوحدة بعض الزوايا الدائرية.

• الزوايا الدائرية: 15 بكسل للأربع

مربع الظل

وإضافة ظل مربع دقيق.

• ظل المربع: الخيار الثاني
• الوضع الأفقي: 12 بكسل
• الوضع الرأسي: 12 بكسل
• قوة التعتيم: 20 بكسل
• انتشار القوة: -5 بكسل
• لون الظل: #dddddd

أضف وحدة نصية إلى العمود الأول

المحتوى

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

• النص الأساسي: الرمز المختصر للمكوِّن الإضافي

خلفية

أضف لون الخلفية بعد ذلك.

• اللون: # e8e8e8

نص

نمط النص.

• الخط: Josefin Sans
• اللون: # 44000d
• مقاس
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي: 18 بكسل
  • الهاتف: 16 بكسل
• التباعد: 1 بكسل

تباعد

اضبط إعدادات التباعد أيضًا.

• الهامش الأعلى: 50 بكسل
• الحشوة العلوية والسفلية: 40 بكسل
• الحشوة اليسرى واليمنى: 30 بكسل

الحدود

ثم أضف بعض الزوايا الدائرية.

• الزوايا الدائرية: 15 بكسل للأربع

مربع الظل

وأكمل إعدادات الوحدة بإضافة ظل مربع دقيق.

• ظل المربع: الخيار الثاني
• الوضع الأفقي: 12 بكسل
• الوضع الرأسي: 12 بكسل
• قوة التعتيم: 20 بكسل
• انتشار القوة: -5 بكسل
• لون الظل: #dddddd

أضف وحدة المتجر إلى العمود الثاني

المحتوى

إلى العمود التالي! أضف وحدة متجر واضبط الإعدادات الرئيسية على النحو التالي:

• نوع عرض المنتج: افتراضي
• استخدام الصفحة الحالية: نعم
• تخطيط العمود: 3 أعمدة

صورة

انتقل إلى علامة تبويب التصميم وقم بتصميم الصورة وفقًا لذلك:

• الزوايا الدائرية للصورة: 15 بكسل جميعًا
• ظل مربع الصورة: الخيار الثاني
  • الوضع الأفقي: 6 بكسل
  • الوضع الرأسي: 6 بكسل
  • قوة التعتيم: 18 بكسل
  • لون الظل: #dddddd

نص العنوان

صمم نص العنوان بعد ذلك.

• الخط: Josefin Sans
• الوزن: شبه عريض
• المحاذاة: صحيح
• اللون: # 44000d
• مقاس
  • سطح المكتب: 26 بكسل
  • الجهاز اللوحي: 24 بكسل
  • الهاتف: 17 بكسل
• التباعد: 2 بكسل

نص السعر

لا تنس تصميم نص السعر أيضًا.

• الخط: Josefin Sans
• المحاذاة: صحيح
• اللون: # 44000d
• الحجم: 15 بكسل
• تباعد الأحرف: 2 بكسل
• ارتفاع الخط: 46 بكسل

تباعد

اضبط إعدادات التباعد أيضًا.

• الحشو العلوي
  • الجهاز اللوحي والهاتف: 50 بكسل
• الحشو الأيسر
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل

لغة تنسيق ويب حسب الطلب

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

• الصورة: المساحة المتروكة: 20 بكسل
• السعر: المساحة المتروكة: 40 بكسل

padding-bottom: 20px;

padding-bottom: 40px;

معاينة

لقد انتهينا من إعادة إنشاء قالب صفحة فئة منتج WooCommerce. دعنا نلقي نظرة مرة أخرى على التصميم النهائي بأحجام مختلفة للشاشة.

سطح المكتب

متحرك

افكار اخيرة

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