مع وحدات WooCommerce على منصة Divi، يمكنك ابتكار تصاميم لا حصر لها. في هذا الدرس التعليمي، سنقدم لك فكرة تصميمية أخرى يمكنك تطبيقها باستخدام خيارات Divi المدمجة فقط. سنوضح لك تحديدًا كيفية وضع صورة المنتج داخل صورة الخلفية. تعتمد النتيجة النهائية كليًا على صورة الخلفية، ولكن باتباع هذا الدرس، ستتعرف على خطوات تخصيص هذه التقنية لموقعك الإلكتروني! يمكنك أيضًا تحميل ملف JSON الخاص بالدرس مجانًا!
مسح
قبل الخوض في البرنامج التعليمي، دعونا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
1. قم بتهيئة القسم بصورة خلفية متجاوبة
إضافة قسم جديد
صورة خلفية تكيفية
الخطوة الأولى لعرض منتجك ضمن صورة خلفية هي إضافة قسم جديد إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وقم بتحميل صور خلفية متجاوبة. ستجد الصورتين اللتين استخدمناهما في المجلد الذي قمت بتنزيله في بداية هذه المقالة.
- صورة الخلفية: المناظر الطبيعية
- حجم صورة الخلفية: مناسب
- موضع صورة الخلفية: أعلى المنتصف
- صورة الخلفية: مربع
مباعدة
انتقل إلى علامة التبويب "التصميم" وأضف حشوة علوية وسفلية مخصصة على أحجام الشاشات المختلفة.
- الحشو العلوي: 3vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
- الحشو السفلي: 3vw (مكتب) ، 7vw (tablet) ، 18vw (هاتف)
الحدود
أكمل إعدادات القسم بإضافة حد.
- عرض الحدود: 2vw
- لون الحدود: # fffff
2. أضف عناصر إطار مختلفة إلى العمود
أضف سطرًا جديدًا
هيكل العمود
كما ترون في الصورة الخلفية، يقع المنتج على الجانب الأيمن. سنختار بنية أعمدة مناسبة لصف جديد في قسمنا. في هذه الحالة، ستكون بنية الأعمدة كالتالي:
التحجيم
بدون إضافة الوحدات النمطية حتى الآن ، افتح معلمات الخط وقم بتعديل معلمات الأبعاد وفقًا لذلك:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- معادلة ارتفاع العمود: نعم
- العرض: 100٪
- أقصى عرض: 100 ٪
مباعدة
أكمل إعدادات الخط عن طريق إضافة حشوة مخصصة لليسار واليمين.
- الحشوة اليسرى: 5vw
- الحشوة اليمنى: 5vw
إضافة وحدة نمطية النص إلى العمود 2
اترك مساحة المحتوى فارغة
حان الوقت لبدء إضافة الوحدات! للسماح للمنتج بالتألق ، سنستخدم وحدة نصية فارغة.
مباعدة
سنقوم بعد ذلك بزيادة ارتفاع الوحدة في إعدادات التباعد.
- الحشو العلوي: 22vw (سطح المكتب) ، 39vw (الكمبيوتر اللوحي) ، 35vw (الهاتف)
- الحشو السفلي: 15vw (مكتب) ، 39vw (tablet) ، 35vw (هاتف)
الحدود
وسنضيف أيضًا حدًا.
- عرض الحدود: 3vw
- أسفل عرض الحدود: 1vw
- لون الحدود: rgba (255,255,255,0,7،XNUMX،XNUMX،XNUMX،XNUMX)
أضف وحدة عنوان Woo إلى العمود 2
محتوى ديناميكي
دعنا ننتقل إلى الوحدة التالية ، وهي وحدة عنوان Woo. حدد منتج من اختيارك.
- المنتج: ابحث في القائمة
لون الخلفية
استخدم لون الخلفية التالي:
- لون الخلفية: rgba (255,255,255,0,7)
إعدادات نص العنوان
انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات نص H3 وفقًا لذلك:
- مستوى العنوان: H3
- خط العنوان: Work Sans
- حجم نص العنوان: 2.5vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 6vw (هاتف)
مباعدة
إضافة أيضا قيم التعبئة المخصصة.
- الحشو العلوي: 1vw
- الحشو السفلي: 1vw
- الحشوة اليسرى: 3vw
- الحشوة اليمنى: 3vw
إضافة وحدة وصف وو إلى العمود 2
محتوى ديناميكي
الوحدة التالية التي نحتاجها هي وحدة وصف Woo. حدد منتج من اختيارك.
- المنتج: ابحث في القائمة
- نوع الوصف: وصف قصير
لون الخلفية
قم بتغيير لون خلفية الوحدة وفقًا لذلك:
- لون الخلفية: rgba (255,255,255,0,7)
إعدادات النص
انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات النص كما يلي:
- خط النص: فتح بلا
- حجم النص: 0.9vw (سطح المكتب) ، 2.2vw (قرص) ، 2.8vw (الهاتف)
- ارتفاع سطر العنوان: 2,2 م
مباعدة
أكمل معلمات الوحدة بإضافة قيم حشو مخصصة.
- الحشو العلوي: 1vw
- الحشو السفلي: 1vw
- الحشوة اليسرى: 3vw
- الحشوة اليمنى: 3vw
أضف وحدة نص Woo Price إلى العمود 2
محتوى ديناميكي
بعد ذلك لدينا وحدة نص سعر Woo. حدد منتج من اختيارك.
- المنتج: ابحث في القائمة
لون الخلفية
غيّر لون الخلفية.
- لون الخلفية: rgba (255,255,255,0,7)
إعدادات نص السعر
انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات نص السعر وفقًا لذلك:
- خط السعر: Work Sans
- لون نص السعر: # 000000
- حجم نص السعر: 2vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 5vw (هاتف)
مباعدة
أكمل معلمات الوحدة بإضافة قيم حشو مخصصة.
- الحشو العلوي: 2vw
- الحشو السفلي: 2vw
- الحشوة اليسرى: 3vw
- الحشوة اليمنى: 3vw
إضافة وو إضافة إلى سلة الوحدة النمطية في العمود 2
محتوى ديناميكي
دعنا ننتقل إلى الوحدة التالية والأخيرة ، وهي وحدة Woo Add To Cart! حدد منتج من اختيارك.
- المنتج: ابحث في القائمة
لون الخلفية
غيّر لون الخلفية.
- لون الخلفية: rgba (255,255,255,0,7)
إعدادات المجال
قم أيضًا بتحرير إعدادات حقل الوحدة النمطية.
- لون خلفية الحقل: #ffffff
- لون نص الحقول: # 000000
- خط الحقل: افتح Sans
- عرض الحدود الدنيا للحقول: 1 بكسل
- لون الحدود السفلية للحقول: # 000000
إعدادات زر
تابع عن طريق تصميم الزر على النحو التالي:
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1.1vw (سطح المكتب) ، 2.5vw (قرص) ، 3.5vw (هاتف)
- لون نص الزر: #ffffff
- لون خلفية الزر: #000000
- عرض حد الزر: 0px
- نصف قطر حد الزر: 10vw
- زر الخط: فتح بدون
- الحشو العلوي: 1vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 4vw (الهاتف)
- الحشو السفلي: 1vw (مكتب) ، 2vw (tablet) ، 4vw (هاتف)
- الحشوة اليسرى: 4vw (سطح المكتب) ، 6vw (الكمبيوتر اللوحي) ، 10vw (الهاتف)
- الحشوة اليمنى: 4vw (مكتب) ، 6vw (قرص) ، 10vw (هاتف)
مباعدة
وأكمل إعدادات الوحدة بإضافة قيم مخصصة للهامش والحشو.
- الهامش السفلي: 2vw
- الحشو العلوي: 3vw
- الحشو السفلي: 3vw
- الحشوة اليسرى: 3vw
- الحشوة اليمنى: 3vw
3. تصميم العمود وتغيير حجمه وتغيير موضعه
تحرير إعدادات العمود 2
خلفية التدرج
الآن، يتيح لنا الجزء الأخير من هذا الدرس دمج الوحدات المختلفة. افتح إعدادات العمود الثاني واستخدم خلفية التدرج اللوني التالية:
- لون 1: rgba (43,135,218,0)
- لون 2: #ffffff
- نوع التدرج: الخطي
- وضع البدء: 39٪
الحدود
أضف أيضًا الزوايا الدائرية.
- كل الزوايا: 1vw
صندوق الظل
نخلق العمق عن طريق إضافة ظل مربع دقيق.
- مربع الظل طمس القوة: 100px
- لون الظل: rgba (0,0,0,0,24)
ترجمة المحول
سنُنهي بعد ذلك إعدادات الأعمدة بتعديل قيم تحويل الصور لتناسب أحجام الشاشات المختلفة. تُمكّننا هذه الخطوة من إعادة ترتيب الأعمدة حسب الرغبة. ستُقدّر هذه الميزة بالتأكيد عند استخدام صورة خلفية خاصة بك!
- اليمين: 0 بكسل (سطح المكتب) ، 9vw (الجهاز اللوحي والهاتف)
- الجزء السفلي: -5vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
مسح
والآن بعد أن مررنا بجميع الخطوات، دعونا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة، شرحنا لكم كيفية وضع منتج داخل صورة الخلفية باستخدام خيارات Divi المدمجة ووحدات WooCommerce المضمنة في Divi Builder. تختلف الطريقة التي ستتبعونها باختلاف صورة الخلفية المستخدمة، ولكن قراءة هذا الشرح ستساعدكم على فهم العملية برمتها. كما يمكنكم تحميل ملف JSON الخاص بالتصميم مجانًا! إذا كانت لديكم أي أسئلة أو اقتراحات، فلا تترددوا في ترك تعليق في قسم التعليقات أدناه.