كيفية إنشاء قالب صفحة منتج Woo على مستوى الموقع باستخدام أداة Divi's Theme Builder

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

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

معاينة

قم بتنزيل نموذج صفحة المنتج النموذجي مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. تمكين Divi Builder على المنتج الحالي

تمكين Divi & تعديل إعدادات الصفحة

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

قم بالتبديل إلى Visual Builder

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

2. تخصيص التخطيط لمطابقة نمط الموقع / حزمة التخطيط

ألوان الخلفية

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

• وحدة إشعار عربة Woo: لون الخلفية

افتح Woo Cart Notice Module وقم بتغيير لون الخلفية.

• لون الخلفية: # 29314f

• وحدة علامات Woo: نص علامات التبويب / ألوان الخلفية

تابع عن طريق فتح وحدة Woo Tabs وتغيير نص علامة التبويب وألوان الخلفية بعد ذلك.

• لون خلفية علامة التبويب النشطة: #ffffff
• لون خلفية علامة التبويب غير النشطة: # 29314f
• لون نص علامة التبويب النشطة: # 000000
• لون نص علامة التبويب: #ffffff

إعدادات النص الأساسي

نريد أيضًا إجراء بعض التغييرات على النص الأساسي للوحدات النمطية التالية:

• وحدة Woo Breadcrumb: إعدادات النص
• وحدة Woo Add To Cart Module: Text Settings
• وحدة وصف Woo: إعدادات النص
• وحدة Woo Meta: إعدادات النص
• وحدة علامات Woo: إعدادات النص
• وحدة علامات التبويب: إعدادات نص علامات التبويب

افتح كل وحدة مدرجة أعلاه وقم بتغيير حجم النص وارتفاع سطر النص كما يلي:

• حجم النص: 16 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 14 بكسل (الهاتف)
• ارتفاع سطر النص: 2em (سطح المكتب والجهاز اللوحي) ، 1.7em (هاتف)

إعدادات نص العنوان

نحن أيضًا نغير أسلوب عناويننا. سنطبق التغييرات على كل وحدة من هذه الوحدات:

• وحدة عنوان Woo: إعدادات نص العنوان
• وحدة المنتجات ذات الصلة Woo: إعدادات نص العنوان
• وحدة المنتجات ذات الصلة Woo: إعدادات نص عنوان المنتج

الشيئان الوحيدان اللذان نقوم بتغييرهما هما خط العنوان ووزن خط العنوان.

• خط العنوان: Roboto
• وزن خط العنوان: غامق

ألوان الارتباط

للمضي قدمًا ، نريد التأكد من تمييز العناصر القابلة للنقر عليها. سنقوم بتغيير لون نص الرابط للوحدتين التاليتين:

• وحدة Woo Breadcrumb: Link Text Color
• وحدة Woo Meta: لون نص الرابط

هذا هو رمز اللون الذي نستخدمه:

• لون نص الرابط: # ff7145

إعدادات نص السعر

نريد تصميم نص السعر أيضًا ، بدءًا من وحدة Woo Price Module.

• وحدة سعر Woo: إعدادات نص السعر

قم بتغيير إعدادات نص السعر كما يلي:

• خط السعر: Roboto
• وزن خط السعر: غامق
• لون نص السعر: # ff7145

افتح وحدة المنتج ذات الصلة Woo بعد ذلك.

• وحدة المنتج ذات الصلة Woo: إعدادات نص السعر

وقم بإجراء بعض التغييرات على إعدادات نص السعر:

• خط السعر: Roboto
• وزن خط السعر: غامق
• لون نص السعر: # ff7145
• حجم نص السعر: 16 بكسل

إعدادات الزر

لدينا زرين على صفحة منتجاتنا أيضًا ، كل واحد منهم يحتاج إلى تصميم.

• وحدة إشعار عربة Woo: إعدادات الزر
• وحدة Woo Add To Cart Module: إعدادات الزر

قم بتغيير إعدادات زر الوحدات كما يلي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # ff7145
• عرض حد الزر: 2 بكسل
• لون حدود الزر: # ff7145

• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: 1 بكسل
• خط الزر: Roboto
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

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

تفاصيل اضافية

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

• العمود 2: لون الخلفية

استخدم رمز اللون التالي:

• لون الخلفية: #efefef

نحن نقوم بتعديل تباعد العمود 2 أيضًا.

• العمود 2: التباعد

استخدم قيم التباعد التالية:

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

أخيرًا وليس آخرًا ، سنرغب في تصميم إعدادات الحقول لوحدة Woo Add To Cart.

• وحدة Woo Add To Cart Module: إعدادات الحقول

قم بتطبيق التغييرات التالية:

• لون خلفية الحقول: #efefef
• لون نص الحقول: # 7f7f7f
• خط الحقول: Roboto
• وزن خط الحقول: غامق

3. إنشاء نموذج جديد للمنتجات واستيراد تخطيط صفحة المنتج في منطقة الجسم

حفظ تخطيط صفحة المنتج في مكتبة Divi

بمجرد الانتهاء من تصميم صفحة المنتج ، يمكنك حفظ التخطيط بالكامل في مكتبة Divi الخاصة بك.

انتقل إلى Divi Theme Builder

حان الوقت لتحويل التصميم إلى قالب صفحة منتج! للقيام بذلك ، انتقل إلى Theme Builder في إعدادات Divi الخاصة بك.

أضف قالب جديد

تابع بالنقر فوق "إضافة قالب جديد".

حدد "جميع المنتجات" في علامة التبويب "استخدام في" من إعدادات النموذج لجعل النموذج ينطبق على جميع منتجاتك مرة واحدة.

إضافة نص مخصص من المكتبة

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

انتقل إلى علامة التبويب "التخطيطات المحفوظة" لتحديد التنسيق المحفوظ.

4. حفظ خيارات منشئ السمات وعرض القالب على المنتجات الموجودة

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

معاينة

افكار اخيرة

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

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