كيفية إضافة معلومات المنتج المنزلق إلى صفحة منتج Divi الخاصة بك

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب صفحة منتج Slide-In مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. قم بإضافة / فتح منتج WooCommerce

تفاصيل المنتج

ابدأ بإنشاء منتج جديد أو فتح منتج موجود. لتحقيق نفس النتيجة بالضبط في التصميم ، ستحتاج إلى إضافة التفاصيل التالية إلى منتجك:

• اسم
• وصف
• صورة المنتج مع خلفية شفافة
• سعر
• فئة

تمكين Divi Builder وتعديل إعدادات صفحة المنتج

قم بتمكين Divi Builder وقم بتغيير تخطيط الصفحة في الزاوية اليمنى العليا.

• تخطيط الصفحة: عرض كامل

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

بمجرد تغيير تخطيط الصفحة ، يمكنك التبديل إلى Divi's Visual Builder بالنقر فوق "إنشاء في الواجهة الأمامية".

2. قم بإنشاء تخطيط صفحة منتج لمعلومات المنتج المنزلق للداخل

إزالة عدة صفوف من الصفحة

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

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

لون الخلفية

حان الوقت لبدء تعديل العناصر المختلفة لإنشاء مخطط معلومات منتج منزلق للداخل! افتح إعدادات القسم وقم بتغيير لون الخلفية.

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

تحجيم

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

• ارتفاع الحد الأدنى: 100vh

تباعد

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

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

الرؤية

إخفاء فائض القسم أيضًا. سيساعد هذا في ضمان عدم ظهور شريط أفقي عند حدوث الرسوم المتحركة.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

تعديل إعدادات الصف

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• أقصى عرض: 100٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)

تباعد

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

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

موقع

بعد ذلك ، انتقل إلى إعدادات الموضع وتأكد من بقاء الصف في أسفل القسم عن طريق تعديل الإعدادات وفقًا لذلك:

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

تعديل إعدادات العمود 2

لون الخلفية

بعد ذلك ، سنجري بعض التغييرات على العمود الثاني. استخدم لون الخلفية الأبيض.

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

تباعد

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

• الحشوة العلوية: 10vw
• الحشو السفلي: 10vw
• الحشو الأيسر: 8vw
• الحشوة اليمنى: 8vw

عامل التصفية الافتراضي

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

• سطوع: 100٪
• عكس: 0٪
• بني داكن: 0٪

مرشح التحويم

ومع ذلك ، عند التمرير ، سنغير القيم وفقًا لذلك:

• السطوع: 49٪
• عكس: 100٪
• بني داكن: 100٪

موقع

نتأكد أيضًا من وضع العمود في الركن الأيمن السفلي من حاوية الصف من خلال تطبيق إعدادات الموضع التالية:

• الموضع: مطلق (سطح المكتب) ، افتراضي (الجهاز اللوحي والهاتف)
• الموقع: أسفل اليمين

قم بتعديل وحدة عنوان Woo في العمود 2

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

حان الوقت لبدء تخصيص الوحدات النمطية المختلفة في العمود 2! افتح وحدة عنوان Woo وقم بتغيير إعدادات نص H1 على النحو التالي:

• خط العنوان: عرض Playfair
• لون نص العنوان: # 000000
• حجم نص العنوان: 3vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 7vw (هاتف)

قم بتعديل وحدة سعر Woo في العمود 2

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

افتح إعدادات Woo Price Module التالية وقم بتغيير إعدادات نص السعر.

• خط السعر: بوبينز
• لون نص السعر: # e5bc87
• حجم نص السعر: 1.4vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)

تباعد

أضف بعض الهامش العلوي والسفلي المخصص عبر أحجام الشاشات المختلفة أيضًا.

• الهامش العلوي: 2vw (سطح المكتب) ، 4vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 3vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)

قم بتعديل وحدة وصف Woo في العمود 2

إعدادات النص

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

• خط النص: بوبينز
• وزن خط النص: خفيف
• حجم النص: 0.8vw (سطح المكتب) ، 1.8vw (جهاز لوحي) ، 2.7vw (هاتف)
• ارتفاع خط النص: 2.1em

تباعد

أضف بعض الهامش السفلي سريع الاستجابة أيضًا.

• الهامش السفلي: 3vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)

قم بتعديل Woo Add to Cart Module في العمود 2

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

بعد ذلك لدينا وحدة Woo Add to Cart Module. تغيير إعدادات حقول الوحدة.

• لون خلفية الحقول: rgba (255،255،255،0)
• لون نص الحقول: # 000000
• خط الحقول: بوبينز
• حجم نص الحقول: 0.9vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)

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

إعدادات الزر

انتقل إلى إعدادات الزر وحدد نمط الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون التدرج 1: # e5bd89
• لون التدرج 2: # e5bc87
• نوع التدرج: خطي
• اتجاه التدرج: 153 درجة
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 1 بكسل
• خط الزر: بوبينز

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 9vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 9vw (هاتف)

تباعد

أكمل إعدادات الوحدة بإضافة بعض هامش الزر عبر أحجام الشاشات المختلفة.

• الهامش السفلي: 2vw (Destkop) ، 4vw (Tablet & Phone)

تعديل Woo Meta Module في العمود 2

إعدادات النص

تابع عن طريق فتح Woo Meta Module وتغيير إعدادات النص.

• Meta Font: بوبينز
• وزن الخط الميتا: خفيف
• حجم نص التعريف: 0.8vw (سطح المكتب) ، 1.8vw (جهاز لوحي) ، 3vw (هاتف)

إعدادات نص الارتباط

تغيير لون نص الارتباط أيضا.

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

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

لتغيير لون خلفية التكبير / التصغير لوحدة Woo Image Module ، سنحتاج إلى جزء صغير جدًا من كود CSS الذي سنضعه في وحدة كود جديدة في العمود 2.

أضف كود CSS لتغيير لون خلفية Woo Image Zoom

أضف الأسطر التالية من كود CSS إلى Code Module:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. إضافة إعدادات الرسوم المتحركة المتزامنة للحاويات

وحدة صورة Woo

الآن بعد أن قمنا بتصميم العناصر المختلفة على صفحة منتجاتنا ، حان الوقت لإحداث تأثير معلومات المنتج المنزلق! لتحقيق ذلك ، سنستخدم إعدادات الرسوم المتحركة المضمنة في Divi. افتح Woo Image Module في العمود 1 وقم بتطبيق الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأعلى
• بدء التعتيم في الرسوم المتحركة: 50٪
• منحنى سرعة الرسوم المتحركة: سهولة

العمود 1

افتح إعدادات العمود 1 بعد ذلك واستخدم إعدادات الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار (سطح المكتب) ، أعلى (كمبيوتر لوحي وهاتف)
• تأخير الرسوم المتحركة: 950 مللي ثانية (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• كثافة الرسوم المتحركة: 25٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

العمود 2

أخيرًا ، قم بتطبيق إعدادات الرسوم المتحركة التالية على العمود 2:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار (سطح المكتب) ، أعلى (كمبيوتر لوحي وهاتف)
• مدة الرسوم المتحركة: 1200 مللي ثانية
• تأخير الرسوم المتحركة: 800 مللي ثانية (سطح المكتب) ، 0 مللي ثانية (الجهاز اللوحي والهاتف)
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

4. تحويل تخطيط صفحة المنتج إلى نموذج

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

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

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

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

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

استخدم القالب الجديد في جميع المنتجات.

• الاستخدام في: جميع المنتجات

تحميل التخطيط إلى نص قالب صفحة المنتج

ثم انقر فوق "إضافة نص مخصص" وانقر فوق "إضافة من المكتبة".

انتقل إلى "التخطيطات المحفوظة الخاصة بك" وحدد تخطيط صفحة المنتج الذي قمت بتحميله إلى مكتبة Divi الخاصة بك.

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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