إنشاء شبكة مزايا ديناميكية للمنتج لقالب صفحة المنتج الخاص بك باستخدام Divi & ACF

تؤثر الطريقة التي تصمم بها صفحة منتجك تأثيرًا فوريًا على سلوك زوارك. يمكن أن يسهل تصميم صفحة المنتج المصممة جيدًا والمخصصة للزوار تحديد ما إذا كانوا يريدون شراء منتجك. إذا كنت تبحث عن طريقة لجعل صفحة منتجك أكثر جاذبية ، فستحب هذا المنشور. سنوضح لك كيفية تضمين شبكة مزايا ديناميكية للمنتج في تصميمك باستخدام Divi والمكوّن الإضافي Advanced Custom Fields. سنبدأ بإنشاء مجموعة ميدانية للمزايا. سنقوم بعد ذلك بملء الحقول المخصصة في صفحة المنتج الخاصة بنا وتضمين المحتوى الديناميكي في قالب صفحة المنتج الخاص بنا. ستتمكن من تنزيل قالب صفحة المنتج مجانًا أيضًا!

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

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. قم بتثبيت البرنامج المساعد ACF وإضافة مجموعة حقول مزايا المنتج

تثبيت البرنامج المساعد المتقدم الحقول المخصصة

لعرض مزايا المنتج المختلفة في الواجهة الخلفية لمنتجاتنا ، سنستخدم المكوّن الإضافي المجاني Advanced Custom Fields. انتقل إلى الواجهة الخلفية لـ WordPress> المكونات الإضافية> إضافة جديد> البحث عن المكون الإضافي ACF> تثبيت> تنشيط .

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

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

إعدادات مجموعة الحقول

امنح مجموعة الحقول الجديدة عنوانًا واسمح لها بالظهور على صفحات المنتج فقط.

• "نوع المنشور" يساوي "منتج"

أضف الحقل الأول

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

• تسمية الحقل: عنوان الميزة 1
• نوع الحقل: نص

كرر الخطوة للحقول المتبقية

افعل نفس الشيء مع مزايا المنتج المتبقية وأوصافها. تحتاج كل هذه الحقول إلى تعيين نوع الحقل "نص" لها.

• عنوان المنفعة 1
• وصف المنفعة 1
• عنوان المنفعة 2
• وصف المنفعة 2
• عنوان المنفعة 3
• وصف المنفعة 3
• عنوان المنفعة 4
• وصف المنفعة 4

2. أضف مزايا المنتج إلى المنتجات

فتح أو إضافة منتج جديد

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

املأ حقول مزايا المنتج

واملأ مزايا المنتج.

3. إنشاء قالب صفحة المنتج داخل Divi Theme Builder

انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

حان الوقت للبدء مع Divi! لإنشاء قالب جديد ، انتقل إلى Divi Theme Builder وانقر فوق "إضافة قالب جديد".

استخدم النموذج في كافة المنتجات

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

أدخل محرر قالب النص الأساسي

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

تعديل القسم # 1

لون الخلفية

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

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

تباعد

انتقل إلى علامة تبويب تصميم القسم وأضف بعض الحشو العلوي والسفلي المخصص.

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف وقم بإجراء بعض التغييرات على إعدادات التحجيم.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 90٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة إشعار عربة التسوق إلى العمود

محتوى ديناميكي

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

• المنتج: هذا المنتج

لون الخلفية

ثم افتح إعدادات الوحدة واستخدم لون خلفية شفاف تمامًا.

• لون الخلفية: rgba (0،0،0،0)

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير خط النص في إعدادات النص التالية.

• خط النص: كارلا

إعدادات الزر

أكمل إعدادات الوحدة عن طريق تصميم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر: # ffd623
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: أوزوالد
• نمط خط الزر: أحرف كبيرة

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

أضف القسم رقم 2

خلفية متدرجة

أضف قسمًا عاديًا آخر أسفل القسم السابق مباشرةً ، وافتح إعدادات القسم واستخدم خلفية متدرجة سريعة الاستجابة.

• اللون 1: # 000000
• اللون 2: #ffffff
• يبدأ فى مكان:
  • سطح المكتب: 30٪
  • الجهاز اللوحي: 57٪
  • الهاتف: 54٪
• موقف النهاية:
  • سطح المكتب: 30٪
  • الجهاز اللوحي: 57٪
  • الهاتف: 54٪

تباعد

انتقل إلى علامة تبويب تصميم القسم وأضف بعض الحشو العلوي.

• الحشوة العلوية: 150 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 95٪
• العرض الأقصى: 2560 بكسل
• محاذاة الصف: الوسط

تباعد

نحن نزيل المساحة المتروكة العلوية الافتراضية للصف أيضًا.

• الحشوة العلوية: 0 بكسل

العنصر الرئيسي

ولتوسيط محتوى العمود على سطح المكتب ، سنستخدم سطرين من كود CSS في العنصر الرئيسي للصف.

سطح المكتب:

display: flex;
align-items: center;

الجهاز اللوحي والهاتف:

display: block;

أضف وحدة صور Woo إلى العمود 1

محتوى ديناميكي

حان الوقت لإضافة وحدات ، بدءًا من Woo Images Module في العمود 1. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.

• المنتج: هذا المنتج

تأثير التمرير الرأسي للحركة

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

• تمكين الحركة العمودية: نعم
• بداية الإزاحة:
  • سطح المكتب: -4
  • الجهاز اللوحي والهاتف: 0
• الإزاحة المتوسطة: 0
• إزاحة النهاية: 0
• مشغل تأثير الحركة: منتصف العنصر

أضف وحدة عنوان Woo إلى العمود 2

محتوى ديناميكي

في العمود 2 ، الوحدة الأولى التي نحتاجها هي وحدة عنوان Woo. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.

• المنتج: هذا المنتج

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

بعد ذلك ، انتقل إلى علامة تبويب التصميم وحدد نص العنوان على النحو التالي:

• خط العنوان: أوزوالد
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: # ffd623
• حجم نص العنوان: 80 بكسل

تباعد

أكمل Woo Title Module بإضافة بعض الهامش الأيمن والأيسر.

• الهامش الأيسر: 5٪
• الهامش الأيمن: 5٪

أضف وحدة وصف Woo إلى العمود 2

محتوى ديناميكي

إلى الوحدة التالية ، وهي وحدة وصف Woo. نحن نستخدم المحتوى الديناميكي التالي له:

• المنتج: هذا المنتج
• نوع الوصف: وصف قصير

إعدادات النص

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

• خط النص: كارلا
• لون النص: #dbdbdb
• حجم النص: 17 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 15 بكسل (الهاتف)
• ارتفاع خط النص: 1.9em

تحجيم

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

• العرض: 59٪ (سطح المكتب) ، 82٪ (الجهاز اللوحي والهاتف)

تباعد

أكمل وحدة وصف Woo عن طريق إضافة بعض قيم الهوامش المخصصة في إعدادات التباعد.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 100 بكسل
• الهامش الأيسر: 5٪
• الهامش الأيمن: 5٪

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

محتوى ديناميكي

لعرض مزايا المنتج التي أضفناها في الجزء الأول من هذا البرنامج التعليمي ، سنستخدم وحدات Blurb Modules. أضف أول وحدة Blurb Module واستخدم المحتوى الديناميكي لمزايا المنتج الأول للعنوان والجسم.

• العنوان: عنوان المنفعة 1
• الجسم: وصف المنفعة 1

تحميل الصور

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

إعدادات الصورة / الرمز

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الصورة / الرمز على النحو التالي:

• وضع الصورة / الرمز: علوي
• محاذاة الصورة / الرمز: يسار

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

نحن نقوم بتعديل إعدادات نص العنوان بعد ذلك.

• خط العنوان: أوزوالد
• نمط خط العنوان: أحرف كبيرة
• حجم نص العنوان: 25 بكسل

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

جنبا إلى جنب مع إعدادات النص الأساسي.

• خط الجسم: كارلا
• حجم النص الأساسي: 17 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 15 بكسل (الهاتف)
• ارتفاع خط الجسم: 1.9em

تحجيم

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

• عرض الصورة: 25٪
• العرض: 49٪

تباعد

سنضيف أيضًا بعض المسافات البيضاء حول Blurb Module باستخدام قيم الحشو المخصصة عبر أحجام الشاشات المختلفة.

• حشوة علوية: 8٪
• حشوة سفلية: 8٪
• الحشو الأيسر: 8٪ (سطح المكتب والجهاز اللوحي) ، 2٪ (الهاتف)
• الحشو الأيمن: 8٪ (كمبيوتر مكتبي وتابلت) 2٪ (هاتف)

العنصر الرئيسي

الآن ، للتأكد من ظهور وحدتي Blurb Modules بجوار بعضهما البعض ، هناك خطوتان مهمتان. الأول هو التأكد من أن عرض الوحدة أقل من 50٪ (كما فعلنا في إحدى الخطوات السابقة). الثاني يستخدم خاصية العرض المضمنة. سنضيف خاصية CSS هذه إلى العنصر الرئيسي في Blurb Module في علامة التبويب المتقدمة.

display: inline-block;

استنساخ وحدة Blurb ثلاث مرات

بمجرد الانتهاء من أول وحدة Blurb Module ، يمكنك استنساخها ثلاث مرات. ستلاحظ تلقائيًا ظهور وحدات Blurb النمطية في شبكة.

تعديل صور الوحدة النمطية Blurb

قم بتغيير الصورة في كل وحدة Blurb Module مكررة. يمكنك العثور عليها في مجلد التنزيل الذي تمكنت من تنزيله في بداية هذا المنشور.

تعديل المحتوى الديناميكي لوحدة Blurb

قم بتغيير المحتوى الديناميكي لكل وحدة Blurb Module مكررة أيضًا.

• العنوان: عنوان المنفعة (2،3 أو ​​4)
• الجسم: وصف المنفعة (2،3 أو ​​4)

أضف حدودًا إلى وحدات Blurb النمطية بشكل فردي

دعاية الوحدة النمطية 1 إعدادات الحدود

الآن ، لإكمال تصميم شبكتنا ، سنضيف بعض الحدود إلى وحدات Blurb على المستوى الفردي. افتح أول وحدة Blurb Module واستخدم الحد الأيمن.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # ffd623

أضف حدًا سفليًا إلى أول وحدة Blurb Module أيضًا.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 000000

دعاية الوحدة النمطية 2 إعدادات الحدود

ثم افتح وحدة Blurb Module الثانية واستخدم حدًا سفليًا.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 000000

دعاية الوحدة النمطية 3 إعدادات الحدود

أكمل تصميم الشبكة بإضافة حد أيمن إلى الوحدة النمطية الثالثة Blurb.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # ffd623

أضف Woo Add to Cart Module إلى العمود 2

محتوى ديناميكي

آخر وحدة نحتاجها في تصميمنا هي Woo Add to Cart Module. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.

• المنتج: هذا المنتج

إعدادات الحقول

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

• لون خلفية الحقول: #ffffff
• لون نص الحقل: # 000000

• الزوايا الدائرية للحقول: 0 بكسل (جميع الزوايا)
• عرض الحدود السفلى للحقول: 1 بكسل
• لون الحد السفلي للحقول: # 000000

إعدادات الزر

بعد ذلك ، صمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 000000
• لون خلفية الزر: # ffd623
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: أوزوالد
• نمط خط الزر: أحرف كبيرة

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

تباعد

وأكمل إعدادات الوحدة بإضافة قيم هامش مخصصة.

• الهامش الأعلى: 100 بكسل
• الهامش الأيسر: 5٪

3. حفظ تغييرات منشئ السمات ومعاينة النتيجة

بمجرد الانتهاء من تصميم قالب صفحة المنتج ، يمكنك حفظ جميع تغييرات Theme Builder الخاصة بك وعرض النتيجة على منتجاتك!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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