كيفية تكديس صور معرض Woo عموديًا داخل قالب صفحة منتج Divi الخاص بك

بشكل افتراضي ، بمجرد إضافة صور المعرض إلى منتجات WooCommerce الخاصة بك ، ستظهر أفقيًا أسفل الصورة المميزة لمنتجك في الواجهة الأمامية لتصميم صفحة المنتج. في بعض التصميمات المحددة ، قد يكون التكديس الرأسي لصور معرض woo أكثر ملاءمة ، في تصميمات صفحة المنتج بملء الشاشة ، على سبيل المثال. إذا كنت تبحث عن طريقة سريعة لتكديس صور معرض woo عموديًا داخل قالب صفحة المنتج الذي تقوم بإنشائه باستخدام Divi's Theme Builder ، فستحب هذا البرنامج التعليمي. سنوضح لك كيفية الوصول إلى هناك خطوة بخطوة. سنرافق هذا الأسلوب مع قالب صفحة منتج صغير يمكنك تنزيله مجانًا أيضًا! يعمل هذا البرنامج التعليمي بشكل أفضل على صفحات المنتج التي تستخدم الصور بنسبة 1: 1.

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل نموذج صفحة المنتج مجانًا

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

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

تنزيل مجاني

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

تحميل

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

بناء قالب صفحة المنتج داخل Divi Theme Builder

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

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

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

سنستخدم هذا النموذج في جميع المنتجات ، لكن لا تتردد في تعديل الشروط كيفما تشاء.

أدخل محرر قالب النص الأساسي

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

ابدأ في بناء جسم قالب صفحة الفئة

تعديل القسم # 1

لون الخلفية

داخل محرر القالب ، ستلاحظ قسمًا. افتح هذا القسم وأضف لون خلفية بيضاء.

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

تباعد

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

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

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

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

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

تباعد

سنستخدم بعض الحشو العلوي والسفلي المخصص على أحجام الشاشات الأصغر أيضًا.

• الحشوة العلوية: 100 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشو السفلي: 100 بكسل (الجهاز اللوحي والهاتف فقط)

العنصر الرئيسي CSS

لمحاذاة محتوى العمود على سطح المكتب ، سنستخدم سطرين من كود CSS في العنصر الرئيسي للصف. سنعيد خاصية العرض على الجهاز اللوحي والهاتف.

سطح المكتب:

display: flex;
align-items: center;

الجهاز اللوحي والهاتف:

display: block;

العمود 2 خلفية متدرجة

بمجرد الانتهاء من إعدادات الصف العامة ، افتح إعدادات العمود الثاني وقم بتطبيق خلفية متدرجة نصف قطرية.

• اللون 1: # f7f2ef
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 20٪
• موضع النهاية: 20٪

تباعد العمود 2

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

• الحشو العلوي: 30٪ (سطح المكتب) ، 10٪ (الجهاز اللوحي والهاتف)
• حشوة سفلية: 10٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

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

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

حان الوقت لإضافة وحدات! الوحدة الأولى التي نحتاجها في العمود 1 هي وحدة صور Woo. يعمل هذا البرنامج التعليمي بشكل أفضل إذا كنت تستخدم صورة مميزة وصور معرض بنسبة 1: 1. بهذه الطريقة ، سنتمكن من تحويل الصور إلى دوائر في الخطوات القادمة. بمجرد إضافة Woo Images Module ، تأكد من تعيين المحتوى الديناميكي على "هذا المنتج".

• المنتج: هذا المنتج

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

أضف كود CSS

أسفل Woo Images Module مباشرة ، سنقوم بإضافة وحدة Code Module. سيساعدنا كود CSS الذي ندرجه في وحدة الشفرة هذه على تكديس صور معرض woo عموديًا على الجانب الأيسر من العمود.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

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

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

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

• المنتج: هذا المنتج

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

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

• خط العنوان: PT Sans
• وزن خط العنوان: غامق
• لون نص العنوان: # 000000
• حجم نص العنوان: 84 بكسل (سطح المكتب) ، 60 بكسل (جهاز لوحي) ، 45 بكسل (هاتف)

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

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

إلى الوحدة التالية ، وهي وحدة وصف Woo.

• المنتج: هذا المنتج
• نوع الوصف: وصف قصير

إعدادات النص

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

• خط النص: كارلا
• حجم النص: 17 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 15 بكسل (الهاتف)
• ارتفاع خط النص: 1.9em

تباعد

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

• الهامش الأعلى: 5٪
• الهامش السفلي: 5٪

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

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

أضف وحدة أسعار Woo أسفل وحدة وصف Woo مباشرةً.

• المنتج: هذا المنتج

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

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

• خط السعر: PT Sans
• وزن خط السعر: غامق
• لون نص السعر: # ce8654
• حجم نص السعر: 27 بكسل

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

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

الوحدة التالية والأخيرة التي نحتاجها لإكمال هذا البرنامج التعليمي هي Woo Add to Cart Module.

• المنتج: هذا المنتج

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

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

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

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

إعدادات الزر

بعد ذلك ، حدد نمط الزر في إعدادات الزر.

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff
• لون خلفية الزر: # 0a0201
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• خط الزر: PT Sans
• وزن خط الزر: غامق

• زر أعلى الحشوة: 20 بكسل
• زر أسفل الحشوة: 20 بكسل
• الحشوة اليسرى للزر: 50 بكسل
• الحشوة اليمنى للزر: 50 بكسل

تباعد

وأكمل إعدادات الوحدة ، وهذا البرنامج التعليمي ، عن طريق إضافة بعض الهامش العلوي إلى وحدة Woo Add to Cart Module. بمجرد الانتهاء من تعديل قالب صفحة المنتج ، تأكد من حفظ جميع تغييرات Theme Builder قبل عرض النتيجة على صفحات المنتج الخاصة بك!

• الهامش الأعلى: 5٪

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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