كيفية تأطير منتج في صورة الخلفية الخاصة بك باستخدام خيارات عمود Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. قم بإعداد قسم مع صورة خلفية مستجيبة

إضافة قسم جديد

صورة خلفية مستجيبة

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

• صورة الخلفية: المناظر الطبيعية
• حجم صورة الخلفية: صالح
• موضع صورة الخلفية: المركز العلوي

• صورة الخلفية: مربعة

تباعد

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

• الحشوة العلوية: 3vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 18vw (هاتف)

الحدود

أكمل إعدادات القسم بإضافة حد.

• عرض الحدود: 2vw
• لون الحدود: #ffffff

2. أضف عناصر إطار مختلفة إلى العمود

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الحشو الأيسر: 5vw
• الحشوة اليمنى: 5vw

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

اترك مربع المحتوى فارغًا

حان الوقت لبدء إضافة الوحدات! للسماح للمنتج بالظهور ، سنستخدم وحدة نصية فارغة.

تباعد

سنقوم بزيادة ارتفاع الوحدة في إعدادات التباعد التالية.

• الحشوة العلوية: 22vw (سطح المكتب) ، 39vw (كمبيوتر لوحي) ، 35vw (هاتف)
• الحشو السفلي: 15vw (سطح المكتب) ، 39vw (كمبيوتر لوحي) ، 35vw (هاتف)

الحدود

وسنضيف حدًا أيضًا.

• عرض الحدود: 3vw
• عرض الحد السفلي: 1vw
• لون الحدود: rgba (255،255،255،0.7)

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

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

إلى الوحدة التالية ، وهي وحدة عنوان Woo. حدد منتج من اختيارك.

• المنتج: بحث في القائمة

لون الخلفية

استخدم لون الخلفية التالي:

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

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: Work Sans
• حجم نص العنوان: 2.5vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 6vw (هاتف)

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

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

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

الوحدة التالية التي نحتاجها هي وحدة وصف Woo. حدد منتج من اختيارك.

• المنتج: بحث في القائمة
• نوع الوصف: وصف قصير

لون الخلفية

قم بتغيير لون خلفية الوحدة وفقًا لذلك:

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.9vw (سطح المكتب) ، 2.2vw (كمبيوتر لوحي) ، 2.8vw (هاتف)
• ارتفاع خط العنوان: 2.2em

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

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

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

بعد ذلك ، لدينا وحدة نص سعر Woo. حدد منتج من اختيارك.

• المنتج: بحث في القائمة

لون الخلفية

قم بتعديل لون الخلفية.

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

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

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

• خط السعر: Work Sans
• لون نص السعر: # 000000
• حجم نص السعر: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 5vw (هاتف)

تباعد

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

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

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

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

إلى الوحدة التالية والأخيرة ، وهي Woo Add To Cart Module! حدد منتج من اختيارك.

• المنتج: بحث في القائمة

لون الخلفية

تغيير لون الخلفية.

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

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

قم بتعديل إعدادات حقول الوحدة أيضًا.

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

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

إعدادات الزر

تابع عن طريق تصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1.1vw (سطح المكتب) ، 2.5vw (الجهاز اللوحي) ، 3.5vw (الهاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 10vw
• خط الزر: فتح Sans

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

تباعد

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

• الهامش السفلي: 2vw
• الحشوة العلوية: 3vw
• الحشو السفلي: 3vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

3. عمود النمط وتغيير الحجم وتغيير موضعه

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

خلفية متدرجة

الآن ، الجزء الأخير من هذا البرنامج التعليمي يسمح لنا بتوحيد الوحدات المختلفة. افتح إعدادات العمود 2 واستخدم خلفية التدرج التالية له:

• اللون 1: rgba (43،135،218،0)
• اللون 2: #ffffff
• نوع التدرج: خطي
• نقطة البداية: 39٪

الحدود

أضف بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 1vw

مربع الظل

نحن نخلق بعض العمق عن طريق إضافة ظل مربع دقيق أيضًا.

• مربع قوة طمس الظل: 100 بكسل
• لون الظل: rgba (0،0،0،0.24)

تحويل الترجمة

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

• اليمين: 0 بكسل (سطح المكتب) ، 9vw (الجهاز اللوحي والهاتف)
• الجزء السفلي: -5vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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