تؤثر الطريقة التي تصمم بها صفحة منتجك تأثيرًا فوريًا على سلوكك آخر. يمكن أن يسمح تصميم صفحة المنتج المصممة جيدًا والشخصية بذلك آخر لتحديد ما إذا كانوا يريدون شراء منتجك بسهولة أكبر. إذا كنت تبحث عن طريقة لجعل صفحة منتجك أكثر جاذبية ، فمن المحتمل أن يعجبك هذا البرنامج التعليمي.
سنوضح لك كيفية تضمين شبكة فوائد المنتج الديناميكية في تصميمك باستخدام Divi والمكون الإضافي Advanced Custom Fields. سنبدأ بإنشاء مجموعة ميدانية للفوائد. سنقوم بعد ذلك بملء الحقول المخصصة في صفحة المنتج الخاصة بنا وإدراجها محتويات ديناميكية في قالب صفحة منتجاتنا.
النتيجة المحتملة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
1. قم بتثبيت البرنامج المساعد ACF Plugin and Product Benefit Field Group
تثبيت البرنامج المساعد الحقول المخصصة المتقدمة
لعرض فوائد المنتج المختلفة في الواجهة الخلفية لمنتجاتنا، سوف نستخدم البرنامج الإضافي حر الحقول المخصصة المتقدمة. الوصول إلى الخاص بك الواجهة الخلفية لـ 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 Cart إلى العمود
محتوى ديناميكي
الوحدة الوحيدة التي نحتاجها في هذا السطر والقسم هي وحدة Woo Cart Notice. تأكد من تحديد "هذا المنتج" في القسم الديناميكي.
- المنتج: هذا المنتج
خلفية ملونة
ثم افتح إعدادات الوحدة واستخدم خلفية شفافة.
- لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
إعدادات النص
قم بالتبديل إلى علامة التبويب "تصميم" وقم بتغيير خط النص.
- خط النص: كارلا
إعداد الزر
قم بإنهاء إعدادات المكون الإضافي من خلال تحديد إعدادات النمط:
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 20 بكسل
- لون نص الزر: # 000000
- خلفية الزر: # ffd623
- عرض حد الزر: 0 بكسل
- زر حد مستدير: 0px
- خط الزر: أوزوالد
- نمط خط الزر: Shift
- هامش داخلي مرتفع: 20 بكسل
- هامش داخلي منخفض: 20 بكسل
- الهامش الداخلي الأيسر: 50 بكسل
- الهامش الأيمن الداخلي: 50 بكسل
أضف القسم رقم 2
خلفية متدرجة
أضف قسمًا عاديًا آخر أسفل القسم السابق. ثم افتح الإعدادات واستخدم خلفية متدرجة على النحو التالي:
- اللون 1: # 000000
- اللون 2: #ffffff
- يبدأ فى مكان:
- سطح المكتب: 30٪
- الجهاز اللوحي: 57٪
- الهاتف: 54٪
- موقف النهاية:
- سطح المكتب: 30٪
- الجهاز اللوحي: 57٪
- الهاتف: 54٪
مباعدة
دعنا نذهب إلى علامة تبويب التصميم ونضيف هامشًا داخليًا مرتفعًا.
- الحشو العلوي: 150 بكسل
أضف سطرًا جديدًا
هيكل العمود
استمر بإضافة سطر جديد بنفس الهيكل كما هو موضح أدناه:
التحجيم
بدون إضافة أي تعديلات حتى الآن ، سنفتح الإعدادات ونغير التباعد كما يلي:
- استخدام المزاريب المخصصة: نعم
- مساحة الميزاب: 1
- العرض: 95٪
- العرض الأقصى: 2560 بكسل
- محاذاة الخط: المركز
التباعد
سنقوم أيضًا بإزالة الهامش الداخلي العلوي أيضًا.
- الحشو العلوي: 0 بكسل
العنصر الرئيسي
و لمركز محتويات على DeskTop، سنستخدم سطرين من كود CSS في العنصر الرئيسي لسطر الوحدة.
سطح المكتب:
عرض: المرن ؛ محاذاة العناصر: مركز.
الجهاز اللوحي والهاتف:
العرض محجوب؛
أضف وحدة Woo Image إلى العمود 1
محتوى ديناميكي
حان الوقت لإضافة وحدات ، سنبدأ بوحدة Woo Images في العمود 1. تأكد من تحديد "هذا المنتج".
- المنتج: هذا المنتج
تأثير حركة التمرير العمودي
نضيف حركة دقيقة إلى الصورة باستخدام تأثير التمرير الأفقي بالحركة في علامة التبويب المتقدمة.
- تنشيط الحركة العمودية: نعم
- تعويض البداية:
- المكتب: -4
- الجهاز اللوحي والهاتف: 0
- الإزاحة المتوسطة: 0
- تعويض النهاية: 0
- تأثير حركة الزناد: منتصف العنصر
أضف وحدة عنوان Woo إلى العمود 2
محتوى ديناميكي
في العمود 2، الوحدة الأولى التي نحتاجها هي وحدة عنوان Woo. تأكد من تحديد "هذا المنتج" في المربع محتويات متحرك.
- المنتج: هذا المنتج
إعدادات نص العنوان
ثم انتقل إلى علامة تبويب التصميم وقم بتنسيق نص العنوان على النحو التالي:
- خط العنوان: أوزوالد
- نمط خط العنوان: أحرف كبيرة
- لون نص العنوان: # ffd623
- حجم نص العنوان: 80 بكسل
مباعدة
أكمل وحدة عنوان Woo بإضافة الهوامش اليسرى واليمنى.
- الهامش الأيسر: 5٪
- الهامش الأيمن: 5٪
إضافة وحدة وصف وو إلى العمود 2
محتوى ديناميكي
دعنا ننتقل إلى الوحدة التالية ، وهي وحدة وصف Woo. نحن نستخدم المحتوى الديناميكي التالي لهذا:
- المنتج: هذا المنتج
- نوع الوصف: وصف قصير
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: كارلا
- لون النص: #dbdbdb
- حجم النص: 17 بكسل (سطح المكتب والجهاز اللوحي) ، 15 بكسل (الهاتف)
- ارتفاع سطر النص: 1,9 م
التحجيم
ثم قم بتغيير العرض على أحجام الشاشات المختلفة.
- العرض: 59٪ (سطح المكتب) ، 82٪ (الكمبيوتر اللوحي والهاتف)
مباعدة
أكمل وحدة وصف Woo بإضافة قيم هامش مخصصة في إعدادات التباعد.
- الهامش العلوي: 50px
- الهامش السفلي: 100px
- الهامش الأيسر: 5٪
- الهامش الأيمن: 5٪
أضف الوحدة النمطية Blurb إلى عمود 2
محتوى ديناميكي
لعرض مزايا المنتج التي أضفناها في الجزء الأول من هذا البرنامج التعليمي ، سنستخدم وحدات Blurb. أضف وحدة Blurb أولًا واستخدم المحتوى الديناميكي للمنفعة الأولى المنتجة للعنوان والجسم.
- العنوان: عنوان المنفعة 1
- نص: وصف المنفعة 1
تحميل الصور
قم بتحميل صورة أو استخدم أيقونة من اختيارك بعد ذلك. يمكنك العثور على تلك التي استخدمناها خلال هذا البرنامج التعليمي في مجلد التنزيل الذي تمكنت من تنزيله في بداية هذا البرنامج التعليمي.
إعدادات الصورة / الرمز
انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الصورة / الرمز على النحو التالي:
- وضع الصورة / الرمز: أعلى
- محاذاة الصورة / الرمز: إلى اليسار
إعدادات نص العنوان
نقوم بتعديل إعدادات نص العنوان بعد ذلك.
- خط العنوان: Oswald
- نمط خط العنوان: Uppercase
- حجم نص العنوان: 25 بكسل
إعدادات النص الأساسي
إلى جانب إعدادات النص الأساسي.
- خط الجسم: Karla
- حجم النص: 17 بكسل (سطح المكتب والجهاز اللوحي) ، 15 بكسل (الهاتف)
- ارتفاع خط الجسم: 1,9 م
التحجيم
ثم انتقل إلى إعدادات التحجيم وقم بتغيير العرض. من المهم استخدام عرض رئيسي أقل من 50٪ ، وهذا سيسمح لنا بإظهار وحدتي Blurb جنبًا إلى جنب في الخطوات التالية.
- عرض الصورة: 25٪
- العرض: 49٪
مباعدة
سنضيف أيضًا مسافات حول الوحدة النمطية Blurb باستخدام قيم حشو مخصصة على أحجام شاشات مختلفة.
- الحشو العلوي: 8٪
- المساحة السفلية: 8٪
- المساحة المتروكة اليسرى: 8٪ (سطح المكتب والجهاز اللوحي) ، 2٪ (الهاتف)
- المساحة المتروكة لليمين: 8٪ (الكمبيوتر المكتبي والجهاز اللوحي) 2٪ (الهاتف)
العنصر الرئيسي
الآن سوف نتأكد من أن وحدة الملخص تعرض النص بجانب بعضها البعض ، في خطوتين. أولاً ، سنتأكد من أن عرض الوحدة أقل من 50٪ (كما فعلنا في الخطوة السابقة). بعد ذلك ، سنستخدم الخاصية الموجودة في الصف. سنضيف خاصية CSS هذه إلى العنصر الرئيسي في القسم المتقدم.
عرض: المحول لبنة؛
استنساخ وحدة الملخص 3 مرات
بمجرد الانتهاء من أول تعديل Blurb ، يمكنك استنساخه ثلاث مرات. ستلاحظ تلقائيًا ظهور وحدات Blurb النمطية في شبكة.
قم بتحرير صور وحدة Blurb
قم بتحرير الصورة في كل جراب Blurb مكرر. يمكنك العثور عليها في مجلد التنزيل الذي ربما تكون قد قمت بتنزيله في بداية هذه المقالة.
تعديل المحتوى الديناميكي لوحدة Blurb
قم أيضًا بتعديل المحتوى الديناميكي لكل وحدة Blurb مكررة.
- العنوان: عنوان الخدمة (2,3،4 أو XNUMX)
- النص: وصف المزايا (2,3،4 أو XNUMX)
أضف حدودًا إلى وحدات Blurb بشكل فردي
إعدادات حدود Blurb الوحدة النمطية 1
الآن ، لإنهاء تصميم شبكتنا ، سنقوم بإضافة حدود إلى وحدات Blurb على المستوى الفردي. افتح أول تعديل Blurb واستخدم حدًا مستقيمًا.
- عرض الحد الأيمن: 1 بكسل
- لون الحد الأيمن: # ffd623
أضف أيضًا حدًا سفليًا إلى أول وحدة Blurb.
- عرض الحدود السفلية: 1 بكسل
- لون الحدود السفلية: # 000000
إعدادات حدود Blurb الوحدة النمطية 2
ثم افتح وحدة Blurb الثانية واستخدم حدًا سفليًا.
- عرض الحدود السفلية: 1 بكسل
- لون الحدود السفلية: # 000000
إعدادات حدود Blurb الوحدة النمطية 3
أكمل تصميم الشبكة بإضافة حد مستقيم إلى وحدة Blurb الثالثة.
- عرض الحد الأيمن: 1 بكسل
- لون الحد الأيمن: # ffd623
إضافة وو إضافة إلى سلة الوحدة النمطية في العمود 2
محتوى ديناميكي
آخر وحدة نحتاجها في تصميمنا هي وحدة Woo Add to Cart. تأكد من تحديد "هذا المنتج" في منطقة المحتوى الديناميكي.
- المنتج: هذا المنتج
إعدادات المجال
انتقل إلى علامة تبويب التصميم التالية وقم بتغيير إعدادات الحقل.
- لون خلفية الحقول: #ffffff
- لون نص الحقل: # 000000
- الحقول المستديرة: 0 بكسل (جميع الزوايا)
- عرض الحدود الدنيا للحقول: 1 بكسل
- لون الحدود السفلية للحقول: # 000000
إعدادات زر
ثم ، قم بتصميم الزر وفقًا لذلك:
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 20 بكسل
- لون نص الزر: # 000000
- لون خلفية الزر: # ffd623
- عرض حد الزر: 0px
- نصف قطر حد الزر: 0px
- خط الزر: أوزوالد
- نمط خط الزر: أحرف كبيرة
- الحشو العلوي: 20px
- الحشو السفلي: 20px
- حشوة اليسار: 50px
- الحشوة اليمنى: 50 بكسل
مباعدة
وأكمل معلمات الوحدة بإضافة قيم الهامش المخصصة.
- الهامش العلوي: 100px
- الهامش الأيسر: 5٪
3. حفظ التعديلات على مولد الموضوع ومعاينة النتيجة
بمجرد الانتهاء من تصميم قالب صفحة المنتج ، يمكنك حفظ جميع تغييرات Theme Builder وعرض النتائج على منتجاتك!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية الإبداع مع قالب صفحة منتج Divi التالي. على وجه التحديد ، أوضحنا لك كيفية تضمين شبكة مزايا ديناميكية للمنتج لإضافة مزايا إضافية إلى صفحة منتجك. أنشأنا هذا البرنامج التعليمي باستخدام Divi بالاشتراك مع المكون الإضافي Advanced Custom Fields. يمكنك أيضًا تنزيل ملف JSON مجانًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.
