كيفية إنشاء تصميم كتلة مستجيب لصفحات منتج Woo مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Respive Block Design مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

1. قم بإضافة / فتح منتج WooCommerce

تفاصيل المنتج

افتح منتجًا موجودًا أو أنشئ منتجًا جديدًا. لإعادة إنشاء تصميم نمط الكتلة هذا ، ستحتاج إلى ملء المعلومات التالية:

• عنوان
• وصف
• سعر
• فئة
• صفات
• صورة مميزة

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

• صفات:
  • السعة: 250 مل / 2 فنجان شاي
  • المواد: النحاس النقي
  • الحالة: البلى العادي

يجب أن تحتوي الصورة المميزة على نفس لون الخلفية مثل اللون في التصميم.

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

عندما يتم ملء جميع تفاصيل المنتج ، امض قدمًا وقم بتمكين Divi Builder. قم بتغيير تخطيط الصفحة إلى "Fullwidth".

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

استمر بالتبديل إلى Visual Builder.

حذف مقطع المنتج الافتراضي

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

2. إعادة إنشاء تصميم الكتلة سريع الاستجابة

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

خلفية

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

• الخلفية: التدرج
• اللون 1: رمادي فاتح # f2f6f5
• اللون 2: أسود تقريبا # 313131
• اتجاه:
  • سطح المكتب: 90٪
  • جهاز لوحي + هاتف: 180٪
• بدء + إنهاء:
  • سطح المكتب: 50٪
  • الكمبيوتر اللوحي: 40٪
  • الهاتف: 30٪

تحجيم

اضبط إعدادات تحجيم القسم.

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة الحشوة الافتراضية العلوية والسفلية أيضًا.

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

الرؤية

أخيرًا ، اضبط تجاوز القسم.

• عمودي + أفقي تجاوز: مخفي

أضف الصف رقم 1

هيكل العمود

بعد إعداد القسم ، أضف الصف الأول بعمود واحد.

تحجيم

في علامة تبويب التصميم ، اضبط الحجم حسب أحجام الشاشات المختلفة.

• عرض:
  • سطح المكتب: 50٪
  • جهاز لوحي + هاتف: 100٪
• العرض الأقصى: 100٪
• محاذاة الصف: اليسار

الرؤية

أخيرًا ، اضبط الفائض الأفقي والرأسي على أن يكون مرئيًا.

• أفقي + فيض مرئي: مرئي

أضف Woo Breadcrumb

المحتوى

أضف الوحدة الأولى ، وحدة مسار التنقل woo. حدد "هذا المنتج".

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

نص

في علامة تبويب التصميم ، قم بتنسيق النص على النحو التالي.

• خط النص: Fenix
• لون النص: بني # 594239
• حجم الخط:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw

تباعد

أضف بعض قيم التباعد لأحجام الشاشات المختلفة.

• الهامش العلوي: 3vw
• الهامش الأيسر:
  • سطح المكتب: 10vw
  • الجهاز اللوحي + الهاتف: 20vw

أضف صورة Woo

إضافة محتوى

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

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

تحجيم

تابع عن طريق ضبط حجم الوحدة.

• العرض: 100٪

الرؤية

أخيرًا ، قم بإخفاء الفائض.

• أفقي + عمودي تجاوز: مخفي

أضف الصف رقم 2

هيكل العمود

أضف صفًا ثانيًا بعمودين.

تحجيم

أولاً ، اضبط الحجم.

• عرض الحضيض: 1
• عرض:
  • سطح المكتب: 53٪
  • جهاز لوحي + هاتف: 53٪
• العرض الأقصى: 100٪
• المحاذاة: صحيح

تباعد

ثم قيم التباعد.

• الهامش العلوي:
  • سطح المكتب: -47vw
  • الجهاز اللوحي + الهاتف: 0vw
• الهامش الأيسر:
  • الجهاز اللوحي: -5vw
  • الهاتف: -8vw
• الحشوة السفلية:
  • سطح المكتب + الجهاز اللوحي: 4.1vw
• الحشوة اليسرى:
  • سطح المكتب: 0vw
  • الجهاز اللوحي: 16vw
  • هاتف: 12vw
• الحشوة اليمنى:
  • سطح المكتب: 0vw
  • الجهاز اللوحي: 0vw

لغة تنسيق ويب حسب الطلب

في علامة التبويب خيارات متقدمة ، أضف بعض CSS المخصص.

• العنصر الرئيسي CSS:
  • عرض: فليكس ؛

display: flex;

الرؤية

أخيرًا ، قم بتعيين الفائض ليكون مرئيًا.

• أفقي + عمودي فيضان: مرئي

إعدادات العمود 1

تباعد

قبل إضافة أي وحدات نمطية ، اضبط قيم التباعد في العمود 1.

• الحشوة اليسرى: 4vw
• الحشوة اليمنى: 0vw

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

تباعد

اضبط قيم تباعد العمود 2 أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 7vw
  • الجهاز اللوحي: 17vw
  • هاتف: 28vw
• الحشوة اليمنى:
  • سطح المكتب + الجهاز اللوحي: 15vw

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

إضافة محتوى

حان الوقت الآن لإضافة الوحدات. ابدأ بوحدة نصية. أدخل محتوى وصفي للمنتج.

نص

ثم ، نمط النص.

• الخط: Fenix
• اللون: # f2eed0
• مقاس:
  • سطح المكتب: 1.3vw
  • الجهاز اللوحي: 2.6vw
  • الهاتف: 3.8vw
• تباعد الأحرف: 1 بكسل
• المحاذاة: المركز

تحجيم

اضبط حجم الوحدة وفقًا لأحجام الشاشات المختلفة.

• عرض:
  • سطح المكتب: 50٪
  • الجهاز اللوحي: 60٪
  • الهاتف: 80٪

تباعد

أيضًا ، اضبط قيم التباعد على النحو التالي.

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

الحدود

أضف حدًا للوحدة وفقًا لذلك.

• أنماط الحدود: أعلى + يسار + يمين
• عرض الحدود:
  • أعلى + يسار + يمين: 2 بكسل
• لون الحدود:
  • أعلى + يسار + يمين: كريم # f2eed0

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

إضافة محتوى

الآن ، أضف وحدة عنوان woo واختر "هذا المنتج" في علامة تبويب المحتوى.

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

خلفية

لتصميم الوحدة ، أضف خلفية برتقالية داكنة.

• لون الخلفية
• اللون: برتقالي نحاسي # d66b00

نص العنوان

بعد ذلك ، قم بتعديل إعدادات نص العنوان.

• مستوى عنوان العنوان: H1
• الخط: Fenix
• اللون: كريم # f2eed0
• مقاس:
  • سطح المكتب: 2.9vw
  • الجهاز اللوحي: 7.8vw
  • الهاتف: 13.9vw
• تباعد الأحرف H1: 1 بكسل

تحجيم

بالإضافة إلى ذلك ، اضبط حجم الوحدة

• العرض: 100٪

تباعد

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

• حشوة علوية + سفلية:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw
• ترك مساحة يسار + يمين:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw

الحدود

أخيرًا ، أضف حدًا كما يلي.

• أنماط الحدود: أعلى + يسار + يمين
• عرض الحدود:
  • أعلى + يسار + يمين: 2 بكسل
• لون الحدود:
  • أعلى + يسار + يمين: كريم # f2eed0

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

إضافة محتوى

أسفل العنوان ، أضف وحدة وصف woo. في علامة التبويب "المحتوى" ، اختر "هذا المنتج".

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

نص

ثم ، نمط النص.

• الخط: Open Sans
• اللون: كريم # f2eed0
• مقاس:
  • سطح المكتب: 08vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw

تحجيم

أيضا ، اضبط الحجم.

• العرض: 100٪

تباعد

وبالمثل ، اضبط التباعد.

• حشوة علوية + سفلية:
  • سطح المكتب: 2vw
  • الجهاز اللوحي + الهاتف: 3vw
• ترك مساحة يسار + يمين:
  • سطح المكتب: 2vw
  • الجهاز اللوحي + الهاتف: 3vw

الحدود

على غرار الوحدات النمطية الأخرى ، أضف حدًا.

• أنماط الحدود: جميع الحدود الأربعة
• العرض: 2 بكسل
• اللون: كريم # f2eed0

أضف معلومات Woo الإضافية إلى العمود 2

إضافة محتوى

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

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

نص

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

• الخط: Open Sans
• النمط: مائل
• اللون: كريم # f2eed0
• مقاس:
  • سطح المكتب: 0.6vw
  • الجهاز اللوحي: 1.6vw
  • الهاتف: 2.2vw

نص السمة

بعد ذلك ، حدد نمط نص السمة وفقًا لذلك:

• الخط: Fenix
• اللون: كريم # f2eed0
• مقاس:
  • سطح المكتب: 1.1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• التباعد: 1 بكسل

تحجيم

أيضا ، اضبط الحجم.

• العرض: 100٪

الحدود

وأخيرًا ، أضف حدًا.

• أنماط الحدود: أعلى + يمين + أسفل
• عرض الحدود:
  • أعلى + يمين + أسفل: 2 بكسل
• لون الحدود:
  • أعلى + يمين + أسفل: كريم # f2eed0

أضف الصف رقم 3

هيكل العمود

أضف الصف الثالث بعمودين.

تحجيم

قبل إضافة الوحدات النمطية ، اضبط حجم الصف وفقًا لأحجام الشاشات المختلفة.

• عرض:
  • سطح المكتب: 50٪
  • الجهاز اللوحي: 87٪
  • الهاتف: 93٪
• المحاذاة: صحيح

حشوة

أيضا ، اضبط المساحة المتروكة.

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

إعدادات العمود 1

تباعد

تابع عن طريق ضبط المساحة المتروكة في العمود الأول.

• الحشوة اليسرى:
  • سطح المكتب: 5vw
  • تابلت + هاتف: 12vw

أضف Woo Price إلى العمود 1

إضافة محتوى

الآن ، أضف سعر المنتج باستخدام وحدة سعر woo. في علامة التبويب "المحتوى" ، اختر "هذا المنتج".

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

نص السعر

ثم قم بتصميم النص وفقًا لذلك.

• الخط: Fenix
• اللون: كريم # f2eed0
• مقاس:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 3.5vw
  • الهاتف: 5vw

تحجيم

أيضا ، اضبط حجم الوحدة.

• عرض:
  • سطح المكتب: 39٪
  • الجهاز اللوحي: 45٪
  • الهاتف: 54٪

تباعد

اضبط التباعد أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3v2
• الحشوة السفلية:
  • سطح المكتب: 1vw
  • الجهاز اللوحي + الهاتف: 2vw
• الحشوة اليسرى:
  • سطح المكتب: 1vw
  • الجهاز اللوحي + الهاتف: 2vw
• الحشوة اليمنى:
  • الجهاز اللوحي + الهاتف: 2vw

الحدود

أخيرًا ، أضف الحدود.

• أنماط الحدود: جميع الجوانب الأربعة
• العرض: 2 بكسل
• اللون: كريم # f2eed0

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

إضافة محتوى

الوحدة النهائية هي وحدة woo add to cart. في علامة التبويب "المحتوى" ، اختر "هذا المنتج".

أنماط الزر

صمم الزر على النحو التالي.

• الأنماط المخصصة: نعم
• حجم نص الزر:
  • سطح المكتب: 1.3vw
  • الجهاز اللوحي: 3.5vw
  • الهاتف: 5vw
• لون النص: كريم # f2eed0
• لون الخلفية: برتقالي نحاسي # d66b00

المساحة المتروكة للأزرار

ثم أضف بعض قيم المساحة المتروكة إلى الزر.

• الحشوة العلوية والسفلية: 0.5vw
• الحشوة اليسرى + اليمنى: 1.5vw

تحجيم

أخيرًا وليس آخرًا ، اضبط حجم الوحدة ، وبذلك تكون قد انتهيت!

• العرض: 100٪

معاينة

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

سطح المكتب

متحرك

انها التفاف

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