كيفية إنشاء كتالوج أزياء التمرير باستخدام Divi

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

نتيجة

ستظهر لك النتيجة كيفية إنشاء ، خطوة بخطوة ، تبدو هكذا على سطح المكتب:

ومثل هذا على الهاتف والجهاز اللوحي:

كيفية إنشاء كتالوج أزياء التمرير باستخدام Divi

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

أضف أشكالًا شفافة إلى الصور باستخدام Photoshop

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

افتح برنامج فوتوشوب

ابدأ بفتح Photoshop على جهاز الكمبيوتر الخاص بك.

صورة مفتوحة

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

انقر نقرًا مزدوجًا فوق الصورة وإنشاء طبقة

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

أضف طبقة أخرى

استمر بإضافة طبقة فارغة أخرى فوقها.

حدد أداة Layer 1 & Polygonal Lasso

حدد Layer 1 وابدأ في استخدام أداة Polygonal Lasso.

اصنع شكلاً

أثناء تنشيط أداة Polygonal Lasso ، امض قدمًا وقم بإنشاء الشكل الشفاف داخل صورتك.

اجعل الطبقة الأولى غير مرئية واضغط على حذف أثناء تحديد الطبقة 0

بمجرد تحديد المنطقة التي تريد أن تصبح شفافة ، امض قدمًا واجعل الطبقة 1 غير مرئية ، وحدد الطبقة 0 مرة أخرى واضغط على زر حذف في لوحة المفاتيح.

حدد أداة الخيمة المستطيلة وانقر في مكان ما على الصورة

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

احفظ الصورة بصيغة PNG

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

إعدادات شريط القوائم الأساسية

إعدادات شريط القوائم الأساسية التي نحتاجها للتخطيط الذي نقوم بإنشائه هي كالتالي:

• إخفاء صورة الشعار: تمكين
• ارتفاع القائمة: 30
• حجم النص: 15
• تباعد الأحرف: -1
• الخط: Lato
• نمط الخط: غامق وكبير
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: rgba (255،255،255،0)
• لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

مقدمة الطبعة

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

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

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

لون خلفية القسم

يجب أن تكون خلفية هذا اللون "# d6d6d6".

حشوة مخصصة

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

أضف صف عمود واحد

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: 1

حشوة مخصصة

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

أول وحدة نصية

بمجرد الانتهاء من ذلك ، يمكنك إضافة وحدة نصية إلى الصف. بعد إدخال النص الذي تريد ظهوره ، انتقل إلى علامة التبويب "تصميم" وتأكد من تطبيق التغييرات التالية على فئة النص الفرعية:

• خط النص: المعيار القديم TT
• نمط الخط: أحرف كبيرة
• حجم خط النص: 72 (كمبيوتر مكتبي) ، 41 (جهاز لوحي) ، 29 (هاتف)
• لون النص: # 000000
• تباعد الرسائل النصية: 11 بكسل
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

افتح فئة التباعد الفرعية وأضف "30 بكسل" إلى الحشوة العلوية والسفلية.

وحدة المقسم

أسفل وحدة النص مباشرةً ، أضف وحدة Divider وقم بتمكين خيار "Show Divider".

انتقل إلى علامة التبويب "تصميم" واختر "#FFFFFF" كلون للمقسم.

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

بعد ذلك ، افتح فئة Sizing الفرعية وقم بتطبيق الإعدادات التالية:

• وزن الحاجز: 10 بكسل
• الارتفاع: 23 بكسل
• العرض: 100٪
  

وحدة النص الثانية

أسفل وحدة Divider ، أضف وحدة نص أخرى. اختر أي رمز تريده داخل مخطط توزيع الأحرف (Windows) أو لوحة الأحرف (Mac) وضعه في علامة التبويب "المحتوى". في هذا المثال ، استخدمنا الرمز التالي: "↓". بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وقم بتطبيق الإعدادات التالية:

• حجم خط النص: 42 بكسل
• لون النص: # 000000
• اتجاه النص: الوسط

كتالوج أزياء سطح المكتب (قسم جديد)

الآن ، أضف قسمًا قياسيًا آخر. سيحتوي هذا القسم على صفين يعرضان جزءًا مختلفًا من الكتالوج على سطح المكتب.

إعدادات القسم

لون الخلفية

استخدم '#FFFFFF' كلون خلفية هذا القسم.

حشوة مخصصة

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وأضف "15 بكسل" إلى المساحة المتروكة العلوية.

السطر الاول

هيكل العمود

بمجرد إجراء التغييرات على الإعداد ، أضف صفًا بهيكل العمود التالي:

لون الخلفية

افتح إعدادات الصف وأضف 'rgba (255،255،255،0.14)' كلون للخلفية.

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

أضف إحدى الصور التي قمت بإنشائها في جزء Photoshop من هذا المنشور واستخدم "Hue" كمزيج صورة الخلفية.

تحجيم

أخيرًا ، قم بإجراء التغييرات التالية على فئة التحجيم الفرعية:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

أول وحدة نصية

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

• خط النص: المر
• حجم خط النص: 63 بكسل
• لون النص: # 000000
• اتجاه النص: الوسط

وحدة المقسم

أسفل وحدة النص الأولى مباشرةً ، أضف وحدة Divider وقم بتمكين خيار "Show Divider".

انتقل إلى علامة التبويب "تصميم" واستخدم "# 000000" كلون للمقسم.

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

قم بالتمرير لأسفل في نفس علامة التبويب وقم بتطبيق الإعدادات التالية على فئة التحجيم الفرعية:

• وزن الحاجز: 3 بكسل
• الارتفاع: 23 بكسل
• العرض: 57٪
• محاذاة الوحدة: يسار

أخيرًا ، أضف هامشًا علويًا "30 بكسل" وهامشًا سفليًا "50 بكسل".

وحدة النص الثانية

بمجرد وضع Divider في مكانه ، امض قدمًا وأضف الوحدة النصية الثانية التي تحتوي على عنوان. بادئ ذي بدء ، استخدم "# 000000" كلون للخلفية في علامة التبويب "المحتوى".

بعد ذلك ، انتقل إلى علامة التبويب تصميم وقم بإجراء الإعدادات التالية على فئة النص الفرعية:

• خط النص: المر
• حجم خط النص: 92 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: يسار

افتح فئة الحدود الفرعية واستخدم الحد التالي:

• استخدام الحدود: نعم
• لون الحدود: # 000000
• عرض الحدود: 3 بكسل
• نمط الحدود: صلب

علاوة على ذلك ، استخدم "عرض 77٪" ومحاذاة الوحدة النمطية اليسرى.

أخيرًا ، أضف "15 بكسل" إلى الحشوة العلوية واليمنى والسفلية واليسرى لوحدة النص.

وحدة النص الثالثة

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

• خط النص: لاتو
• حجم خط النص: 16 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: يسار

افتح فئة التحجيم الفرعية ، واستخدم "70٪" للعرض وحدد محاذاة الوحدة النمطية اليسرى.

أخيرًا ، أضف هامشًا أعلى بمقدار "20 بكسل".

وحدة النص الخامسة

وحدة النص الخامسة بمثابة زر أضيق الحدود. ضمن علامة التبويب "المحتوى" ، استخدم رمز "→" + النص وضع رابطًا خلفه.

بعد ذلك ، انتقل إلى علامة التبويب "تصميم". استخدم الإعدادات التالية لفئة النص الفرعية:

• خط النص: المر
• حجم خط النص: 23 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: يسار

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

أخيرًا ، أضف هامشًا أعلى بمقدار "80 بكسل".

وحدة النص السادس

الوحدة السادسة والأخيرة التي سنحتاجها هي تقريبًا نفس الوحدة السابقة. استخدم النص "→" + وضع رابطًا خلفه.

الإعدادات الخاصة بفئة النص الفرعية هي كما يلي:

• خط النص: المر
• حجم خط النص: 23 بكسل
• لون النص: # e02b20
• ارتفاع خط النص: 1em
• اتجاه النص: يسار

قم بتغيير العرض إلى "39٪" واستخدم محاذاة الوحدة الصحيحة أيضًا.

الصف الثاني

لون الخلفية

افتح إعدادات الصف وأضف 'rgba (255،255،255،0.14)' كلون للخلفية.

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

أضف إحدى الصور التي قمت بإنشائها في جزء Photoshop من هذا المنشور واستخدم "Hue" كمزيج صورة الخلفية.

هيكل العمود

الصف الثاني الذي تريد إضافته إلى القسم القياسي هو عكس الصف السابق تمامًا.

وحدات استنساخ

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

تعديلات وحدة النص الأولى

افتح أول وحدة نصية وأضف هامشًا علويًا بمقدار "20 بكسل".

تعديلات وحدة المقسم

بعد ذلك ، افتح وحدة Divider Module وقم بتغيير محاذاة الوحدة النمطية ضمن الفئة الفرعية Sizing إلى اليمين.

تعديلات وحدة النص الثانية

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

واختر "محاذاة الوحدة النمطية" الصحيحة في فئة "التحجيم" الفرعية أيضًا.

تعديلات وحدة النص الثالث

ستحتاج وحدة النص الثالثة إلى اتجاه نص صحيح أيضًا.

ومحاذاة الوحدة الصحيحة أيضًا.

تعديلات وحدة النص الخامسة

الشيء الوحيد الذي عليك القيام به للوحدة النصية الخامسة هو تغيير العرض إلى "82٪".

تعديلات وحدة النص السادس

نفس الأهمية بالنسبة لوحدة النص السادسة ولكن استخدم "87٪" بدلاً من ذلك.

إخفاء قسم التابلت والهاتف

بمجرد الانتهاء من الصفين ، يمكنك المضي قدمًا وتعطيل القسم بالكامل على الهاتف والجهاز اللوحي.

كتالوج الأجهزة اللوحية والهواتف (قسم جديد)

لجعل كل شيء يبدو رائعًا على الجهاز اللوحي والهاتف أيضًا ، سننشئ قسمًا قياسيًا جديدًا.

إعدادات القسم

لون الخلفية

أضف '#FFFFFF' كلون خلفية هذا القسم.

حشوة مخصصة

انتقل إلى علامة التبويب "تصميم" وأضف حشوة علوية مقدارها "15 بكسل".

السطر الاول

هيكل العمود

ثم أضف صفًا من عمودين إلى القسم.

تحجيم

انتقل إلى الفئة الفرعية Sizing لهذا الصف وقم بإجراء التغييرات التالية:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

وحدة الصورة

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

استنساخ وحدات الصف الأول في إصدار سطح المكتب

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

تغيير حجم خط وحدة النص الثانية

هناك شيء واحد فقط يجب تغييره ؛ حجم خط وحدة النص الثانية. قم بتغييره إلى 65 بكسل.

الصف الثاني

هيكل العمود

بعد ذلك ، امض قدمًا وأضف صفًا آخر من عمودين إلى القسم.

تحجيم

سيحتاج هذا الصف أيضًا إلى فئة فرعية تغيير الحجم:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

وحدة الصورة

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

استنساخ وحدات الصف الثاني في إصدار سطح المكتب

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

تغيير حجم خط وحدة النص الثانية

يجب تغيير حجم النص الخاص بوحدة النص الثانية أيضًا. امض قدمًا واعطها حجم خط "65 بكسل".

إخفاء القسم لسطح المكتب

بمجرد الانتهاء من كلا الصفين ، يمكنك المضي قدمًا وتعطيل القسم بأكمله على سطح المكتب.

نتيجة

Et voila ، بعد اتباع جميع الخطوات الواردة في هذا المنشور ، يجب أن تحقق النتيجة التالية على سطح المكتب:

وما يلي على الهاتف والجهاز اللوحي:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Rvector / shutterstock.com