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

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/vwfPFqyVaNM

اشترك في قناتنا على اليوتيوب

كيفية تحميل النموذج

انتقل إلى Divi Theme Builder

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

تحميل قالب الموقع

بعد ذلك ، في الزاوية العلوية اليمنى ، سترى رمزًا به سهمان. انقر فوق الرمز.

انتقل إلى علامة التبويب "استيراد" ، وقم بتحميل ملف JSON الذي تمكنت من تنزيله في هذا المنشور ، وانقر فوق "استيراد قوالب Divi Theme Builder".

حفظ تغييرات Divi Theme Builder

بمجرد تحميل الملف ، ستلاحظ نموذجًا جديدًا به منطقة نصية جديدة تم تعيينها لكل المنشورات. احفظ تغييرات Divi Theme Builder بمجرد أن تريد تنشيط القالب.

دعنا ننتقل إلى البرنامج التعليمي حتى نتمكن من تعلم بناء هذا الشيء من البداية ، أليس كذلك؟

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

تحميل قالب صفحة المنتج لـ Theme Builder Pack 5

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

1. انتقل إلى Divi Theme Builder
2. انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.
3. حدد علامة التبويب استيراد في النافذة المنبثقة إمكانية النقل.
4. قم بتنزيل واستيراد ملف قالب منتج Divi Divi Theme Builder 5. بمجرد تنزيل الحزمة هنا ، قم بفك ضغط الملف وستجد ملف "divi-theme-builder-pack-5-product-page-template.json" الذي ستحتاج إلى استيراده.
5. انقر فوق الزر "استيراد"
6. بمجرد استيراد القالب ، انقر فوق رمز التحرير في منطقة النص الأساسي المخصصة للقالب لتحرير تخطيط القالب.

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

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

انطلق وأضف قسمًا عاديًا جديدًا أسفل القسم العلوي.

افتح إعدادات القسم الجديد وقم بتحديث المساحة المتروكة:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

انتقل إلى علامة التبويب خيارات متقدمة وقم بتحديث الفهرس z:

• الفهرس Z: 13

هذا حتى تظل الصورة (العنصر الفرعي في هذا القسم) فوق الأقسام / العناصر الأخرى على الصفحة عند التمرير.

أضف الصف

بعد ذلك ، أضف صفًا من عمود واحد في القسم.

افتح إعدادات الصف واضبط محاذاة الصف والمساحة المتروكة:

• محاذاة الصف: صحيح
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

أضف صورة المنتج

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

إعدادات صور Woo

افتح الإعدادات لوحدة صور woo الجديدة واضبط المحتوى على النحو التالي:

• إظهار صور المعرض: OFF
• إظهار شارة البيع: OFF

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

ضمن علامة تبويب التصميم ، قم بتحديث خيار Force Fullwidth إلى "YES".

ثم قم بتحديث ما يلي:

• العرض الأقصى: 300 بكسل (سطح المكتب) ، 200 بكسل (الهاتف)
• محاذاة الوحدة: صحيح

ضبط الحشوة:

• المساحة المتروكة: 10 بكسل للأعلى ، 10 بكسل على اليمين

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث ما يلي:

• الفهرس Z: 1
• موقف مثبت: التمسك بالأعلى

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

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

• التعتيم: 0٪ (سطح المكتب) ، 100٪ (لزج)

قم بإزالة تباعد المقطع والصف والعمود

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

افتح إعدادات العمود وأضف CSS المخصص التالي إلى العنصر الرئيسي:

height: 15px;

هذا كل شيء! كلنا انتهينا.

النتيجة النهائية

تحقق من النتيجة النهائية من خلال النظر في منشور مباشر على موقعك.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!