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

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

هيا بنا نبدأ.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب منتج Fun Kids مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إعداد التصميم لقالب منتج الأطفال

إزالة الخلفية من صورة المنتج

أول شيء سنفعله قبل البدء في تصميم منتج الأطفال هو تحضير الصور. قم بإزالة الخلفية من صور المنتج. يمكنك تحقيق ذلك باستخدام Adobe Photoshop أو Adobe Illustrator أو remove.bg. اترك بعض المساحة حول المنتج بحيث يكون مناسبًا في التصميم. أفضل حجم للصورة النهائية هو 600 × 400 بكسل.

إنشاء تصميم الخلفية

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

• إنشاء (أو مصدر) شكل.
• امنح الشكل اللون الذي تريده.
• قم بتكرار الشكل.
• قم بتلوينها بنفس درجة اللون الأصلي.
• قم بتدوير الشكل الثاني لإنشاء تكوين جميل.
• أضف بعض الشفافية لكلا الشكلين.
• أضف خلفية بنفس لون الخلفية في التصميم النهائي.
• حفظ بتنسيق JPG عند حوالي 1750 × 1650 بكسل.

2. إنشاء / إضافة منتج Woocommerce جديد

بيانات المنتج

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

• العنوان: كتل الحروف الخشبية
• وصف طويل: هذه المكعبات الخشبية الطبيعية رائعة للأطفال لتعلم الحروف والأرقام بطريقة مرحة ومبتكرة. يتم تقريب الحواف للأصابع الصغيرة والطلاء غير سام.
• سعر البيع القديم: 12،99
• سعر البيع الجديد: 7،99
• الصورة المميزة: صورة مقطوعة بمكعبات خشبية. الحجم المفضل: 600 × 400 بكسل
• السمات: انظر أدناه

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

• المادة: خشب الصنوبر الطبيعي
• الطلاء: طلاء أبيض غير سام
• ألوان الطلاء: أبيض ، أزرق ، أخضر ، فوسيا

3. قم بإنشاء قالب جديد في مُنشئ القوالب

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

حان الوقت الآن للتوجه إلى مصمم سمات Divi. سنقوم ببناء التصميم هناك. قالب جديد.

البدء في بناء هيئة مخصصة لجميع المنتجات

استخدم هذا النموذج على جميع المنتجات وابدأ في بناء الجسم.

تلميح Theme Builder Pro:

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

4. إعادة تصميم تصميم منتجات الأطفال

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

خلفية

داخل منشئ قالب الجسم ، ستلاحظ قسمًا. افتح هذا القسم وقم بتغيير لون الخلفية.

• لون الخلفية: باليست بينك # f9f2f2

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

هيكل العمود

الآن ، أضف صفًا جديدًا به عمودين.

تحجيم

ثم اضبط حجم الصف.

• عرض مزراب مخصص: 2
• العرض: 90٪
• العرض الأقصى: 90٪

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

خلفية

في إعداد العمود 1 ، أضف تصميم صورة الخلفية الذي أنشأته باستخدام الأشكال المتداخلة.

• الصورة الخلفية

تباعد

ثم اضبط التباعد وفقًا لذلك.

• الحشوة العلوية والسفلية: 5vw
• الحشو الأيسر والأيمن
  • الجهاز اللوحي: 2vw
  • الهاتف: 0vw

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

تباعد

انتقل إلى العمود 2 واضبط قيم التباعد على النحو التالي.

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

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

المحتوى

حان الوقت الآن لإضافة الوحدات. أولاً ، في العمود 1 ، أضف وحدة صورة woo وحدد هذا المنتج ضمن المحتوى.

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

عناصر

ثم حدد العناصر التي ستظهر في التصميم.

• صورة مميزة: نعم
• المعرض: لا
• شارة المبيعات: نعم

نص شارة البيع

في علامة تبويب التصميم ، اضبط قيم شارة البيع على النحو التالي.

• لون الشارة: شفاف
• الخط: نونيتو
• وزن الخط: عريض
• لون النص: وردي # f24881
• حجم الخط:
  • سطح المكتب: 5vw
  • الجهاز اللوحي: 12vw
  • الهاتف: 10vw

تحجيم

بعد ذلك ، اضبط التباعد لجعل الأشياء مناسبة بشكل أفضل.

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

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

المحتوى

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

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

خلفية

امنح الوحدة خلفية بيضاء.

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

نص العنوان

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

• مستوى العنوان: H1
• الخط: نونيتو
• وزن الخط: عريض للغاية
• محاذاة النص: الوسط
• لون النص: رمادي غامق مخضر # 314942
• حجم الخط:
  • سطح المكتب: 2.6vw
  • الجهاز اللوحي والهاتف: 6.4vw

تباعد

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

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

الحدود

أخيرًا ، اضبط الحدود لكل من سطح المكتب والأحجام سريعة الاستجابة.

• زوايا مدورة:
  • سطح المكتب: 1vw من جميع الزوايا الأربع
  • الجهاز اللوحي والهاتف: 3vw في جميع الزوايا الأربع

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

المحتوى

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

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

خلفية

ثم امنح الوحدة لون الخلفية.

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

نص

انتقل إلى علامة تبويب التصميم وقم بنمط النص.

• الخط: نونيتو
• اللون: رمادي غامق مخضر # 314942
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3vw

تباعد

ثم اضبط التباعد للوحدة النمطية.

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

الحدود

أخيرًا ، أضف الزوايا الدائرية.

• زوايا مدورة:
  • سطح المكتب: 1vw من جميع الزوايا الأربع
  • الجهاز اللوحي والهاتف: 3vw في جميع الزوايا الأربع

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

المحتوى

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

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

خلفية

ثم أضف خلفية بيضاء.

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

نص

في علامة تبويب التصميم ، ابدأ في تصميم أنواع النص المختلفة. أولاً ، النص الذي ينطبق على قيم السمات.

• الخط: نونيتو
• النمط: مائل
• اللون: رمادي غامق مخضر # 314942
• مقاس:
  • سطح المكتب: 0.8vw
  • الجهاز اللوحي: 1.5vw
  • الهاتف: 2vw

نص العنوان

ثانيًا ، حدد نمط نص العنوان.

• الخط: نونيتو
• الوزن: جريء للغاية
• اللون: وردي # f24881
• مقاس:
  • سطح المكتب: 1.7vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 3.5vw
• ارتفاع الخط: 1em

نص السمة

ثالثًا ، نمط نص السمة.

• الخط: نونيتو
• الوزن: جريء
• اللون: رمادي غامق مخضر # 314942
• مقاس:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw

تباعد

بعد ذلك ، اضبط التباعد كما يلي.

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

الحدود

أخيرًا ، أضف الزوايا الدائرية.

• زوايا مدورة:
  • سطح المكتب: 1vw من جميع الزوايا الأربع
  • الجهاز اللوحي والهاتف: 3vw في جميع الزوايا الأربع

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

المحتوى

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

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

خلفية

أضف أيضًا خلفية وردية إلى الوحدة لإبرازها.

• لون الخلفية: وردي # f24881

بيع نص السعر القديم

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

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

• الخط: نونيتو
• اللون: أبيض #ffffff
• مقاس:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3vvw

بيع نص سعر جديد

تواصل من خلال تصميم السعر الجديد.

• الخط: نونيتو
• الوزن: جريء
• اللون: أبيض #ffffff
• مقاس:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 4vw
• تباعد الأحرف: 1 بكسل

تباعد

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

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

الحدود

أخيرًا ، أضف الزوايا الدائرية.

• زوايا مدورة:
  • سطح المكتب: 1vw من جميع الزوايا الأربع
  • الجهاز اللوحي والهاتف: 3vw في جميع الزوايا الأربع

تصميم نهائي

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

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

المحتوى

أسفل وحدة السعر ، ضع woo add to cart module. حدد هذا المنتج في علامة التبويب المحتوى.

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

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

عناصر

من الآن فصاعدًا ، حدد العناصر التي ستظهر في الوحدة النمطية.

• حقل الكمية: Off
• المخزون: معطلة

خلفية

ثم أضف لون خلفية بيضاء.

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

زر

حان الوقت الآن لتصميم الزر. أضف القيم على النحو التالي.

• حجم الخط:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 5vw
• لون النص: وردي # f24881
• لون الخلفية: أبيض #ffffff
• تباعد الأحرف: 1 بكسل
• الخط: نونيتو
• الوزن: ثقيل
• الهامش العلوي والسفلي: -0.3vw

تباعد

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

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

الحدود

أخيرًا ، أضف حدًا مستديرًا.

• زوايا مدورة:
  • سطح المكتب: 1vw من جميع الزوايا الأربع
  • الجهاز اللوحي والهاتف: 3vw في جميع الزوايا الأربع

معاينة

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

سطح المكتب

متحرك

إنه غلاف على صفحة منتج الأطفال!

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