قم بتنزيل صفحة منتج جميلة بملء الشاشة لـ Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط المنتج بملء الشاشة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

لنبدأ في إعادة التكوين!

افتح صفحة المنتج الموجودة

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

• عنوان المنتج
• صورة مميزة
• وصف قصير
• وصف
• سعر

تمكين Divi & تعديل إعدادات الصفحة

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

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

بمجرد الانتهاء من ذلك ، يمكنك التبديل إلى Visual Builder.

حذف القسم الموجود

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

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

تباعد

حان الوقت لبدء الإنشاء! أضف قسمًا جديدًا ، وافتح إعدادات القسم وقم بتعديل قيم الحشو العلوية والسفلية.

• الحشوة العلوية: 5vw
• الحشوة السفلية: 5vw

فيضانات

إخفاء فائض القسم أيضًا.

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

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

هيكل العمود

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

تحجيم

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

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

العمود 1

فهرس Z.

نقوم أيضًا بزيادة فهرس z للعمود الأول في إعدادات الرؤية.

• الفهرس Z: 10

العمود 2

خلفية متدرجة

افتح إعدادات العمود 2 بعد ذلك وأضف خلفية متدرجة عبر أحجام الشاشة المختلفة:

• اللون 1: # ffcb49
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موضع البدء: 66٪ (سطح المكتب) ، 50٪ (الجهاز اللوحي والهاتف)
• المركز النهائي: 66٪ (سطح المكتب) ، 50٪ (الجهاز اللوحي والهاتف)

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

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

حان الوقت لبدء إضافة الوحدات! في العمود 1 ، الوحدة الوحيدة التي نحتاجها هي وحدة عنوان Woo.

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

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

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

• خط العنوان: مونتسيرات
• وزن خط العنوان: خفيف للغاية
• محاذاة نص العنوان: يسار (سطح المكتب) ، في المنتصف (كمبيوتر لوحي وهاتف)
• حجم نص العنوان: 9vw

تحجيم

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

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

تباعد

جنبا إلى جنب مع إعدادات التباعد.

• الهامش العلوي: 14vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 5vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -11vw (سطح المكتب) ، 2vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 2vw (الجهاز اللوحي والهاتف)

استدارة التحويل

أخيرًا وليس آخرًا ، قم بتدوير الوحدة النمطية بأكملها في إعدادات التحويل.

• اليسار: 270 درجة (سطح المكتب) ، 0 درجة (كمبيوتر لوحي وهاتف)

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

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

إلى الوحدة الثانية! هناك ، الوحدة الوحيدة التي نحتاجها هي Woo Image Module.

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

إعدادات الصورة

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

• الزوايا الدائرية للصورة: 1vw (جميع الزوايا)

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

تحجيم

أكمل إعدادات Woo Image Module عن طريق تغيير العرض ومحاذاة الوحدة في إعدادات التحجيم.

• العرض: 35vw
• محاذاة الوحدة: المركز

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

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

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

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

إعدادات النص

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

• خط النص: مونتسيرات
• نمط خط النص: أحرف كبيرة
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• تباعد الحروف النصية: -0.07vw
• ارتفاع خط النص: 1.8em

تباعد

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

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

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

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

ننتقل إلى الوحدة التالية ، وهي وحدة Woo Price Module.

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

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

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

• خط السعر: مونتسيرات
• لون نص السعر: # 333333
• حجم نص السعر: 3vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 10vw (هاتف)
• ارتفاع خط السعر: 1.8em

تباعد

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

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

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

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

الوحدة التالية والأخيرة التي نحتاجها لإكمال هذا التصميم هي وحدة Woo Add To Cart.

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

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

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

• لون خلفية الحقول: # 0a0900
• لون نص الحقول: #ffffff
• خط الحقول: مونتسيرات

• حجم نص الحقول: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• زوايا الحقول المستديرة: 50vw (جميع الزوايا)

إعدادات الزر

العب مع إعدادات الزر أيضًا.

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

• زر الخط: مونتسيرات

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

تباعد

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

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

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

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

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

أضف قالبًا جديدًا إلى مُنشئ القوالب

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

حدد صفحات المنتج التي تريد أن يظهر عليها هذا التخطيط.

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

ثم ، انقر فوق "إضافة نص عام" وحدد "إضافة من المكتبة".

اختر التخطيط الخاص بك في علامة التبويب "التخطيطات المحفوظة الخاصة بك".

وحفظ كل التغييرات الخاصة بك!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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