كيفية تسليط الضوء على فئات المنتجات في قسم بطل موقع Divi المذهل

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

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

معاينة

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

لنبدأ في الإنشاء!

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

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

خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: # 757f1e
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

لون خلفية العمود 1

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

• العمود 1 لون الخلفية: rgba (0،0،0،0.19)

العمود 1 صورة الخلفية

أضف صورة خلفية إلى العمود الأول بالإضافة إلى وضع المزج.

• العمود 1 موضع صورة الخلفية: المركز السفلي
• تكرار صورة الخلفية للعمود 1: لا يوجد تكرار
• مزيج صورة الخلفية في العمود 1: مضاعفة

لون خلفية العمود 2

سيحتاج العمود الثاني فقط إلى لون الخلفية الأبيض.

• لون خلفية العمود 2: #ffffff

تحجيم

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

• استخدام العرض المخصص: نعم
• الوحدة: PX
• العرض المخصص: 2000 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

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

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

مربع الظل

وإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل

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

إضافة محتوى

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

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

بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات.

• وزن خط العنوان: عريض للغاية
• حجم نص العنوان: 60 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• تباعد حروف العنوان: -4 بكسل
• ارتفاع خط العنوان: 0.8em

تباعد

أضف بعض قيم الهوامش والحشو المخصصة أيضًا.

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

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

الرؤية

الوحدة الثانية والأخيرة المطلوبة في العمود الثاني هي وحدة Divider Module. تأكد من تمكين خيار إظهار الحاجز.

• إظهار الحاجز: نعم

اللون

قم بتغيير لون الحاجز بعد ذلك.

• اللون: # 757f1e

الأنماط

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

• نمط المقسم: مزدوج

تحجيم

وقم بزيادة وزن الحاجز في إعدادات تغيير الحجم للوحدة.

• وزن الحاجز: 6 بكسل

تباعد

أخيرًا ، أضف بعض الهامش العلوي والسفلي المخصص إلى Divider Module.

• الهامش العلوي: 2vw
• الهامش السفلي: 15vw

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني! اختر هيكل العمود التالي له:

لون خلفية العمود 1

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

• لون خلفية العمود 1: # 212121

تحجيم

بعد ذلك ، انتقل إلى علامة تبويب التصميم والعب مع حجم الصف.

• استخدام العرض المخصص: نعم
• الوحدة: PX
• العرض المخصص: 2000 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة كل المساحة المتروكة المخصصة للصف أيضًا عن طريق إضافة "0 بكسل" إلى الحشوة العلوية والسفلية.

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

مربع الظل

أخيرًا وليس آخرًا ، امنح الصف ظل مربع دقيقًا.

• مربع قوة طمس الظل: 80 بكسل

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

إضافة محتوى

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

إعدادات النص

تابع بالذهاب إلى علامة تبويب التصميم وتغيير إعدادات النص.

• وزن خط النص: خفيف
• لون النص: #ffffff
• حجم النص: 18 بكسل (سطح المكتب) ، 15 بكسل (جهاز لوحي) ، 12 بكسل (هاتف)
• ارتفاع خط النص: 1em
• اتجاه النص: يسار
• لون النص: فاتح

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

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

• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 25 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)
• العنوان 3 تباعد الأحرف: -1 بكسل

تباعد

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

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

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

إضافة محتوى

تابع عن طريق إضافة وحدة نصية أخرى إلى العمود الثاني. أضف بعض المحتوى المفضل واربط صفحة فئة المنتج في إعدادات الارتباط أيضًا.

لون الخلفية الافتراضي

بعد ذلك ، انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية.

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

لون الخلفية تحوم

قم بتغيير لون الخلفية هذا عند التمرير.

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

الإعدادات الافتراضية للنص

غيّر حول إعدادات النص في علامة تبويب التصميم التالية.

• وزن خط النص: غامق للغاية
• نمط خط النص: أحرف كبيرة
• لون النص: # 333333
• حجم النص: 16 بكسل
• تباعد حروف النص: -1 بكسل
• اتجاه النص: الوسط

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

وقم بتعديل هذه الإعدادات عند التمرير.

• لون النص: #ffffff
• حجم النص: 20 بكسل

التباعد الافتراضي

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

• الحشوة العلوية: 45 بكسل
• الحشو السفلي: 45 بكسل
• الحشوة اليسرى: 5 بكسل
• الحشوة اليمنى: 5 بكسل

تحوم التباعد

التي سنغيرها عند المرور فوقها.

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

ظل المربع الافتراضي

استمر بفتح إعدادات ظل الصندوق وإضافة ظل مربع شفاف تمامًا.

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

تحوم مربع الظل

قم بتغيير لون ظل الصندوق الشفاف تمامًا عند التمرير حتى يظهر.

• لون الظل: rgba (0،0،0،0.34)

استنساخ وحدة النص رقم 2 مرتين ووضعها في الأعمدة المتبقية

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

تغيير أول تكرار

تغيير المحتوى

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

تغيير لون الخلفية

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

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

تغيير ثاني تكرار

تغيير المحتوى

قم بتغيير محتوى النسخة المكررة الثانية في العمود 4 أيضًا.

تغيير لون الخلفية

جنبا إلى جنب مع لون الخلفية.

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

أضف وحدة صورة لأحجام شاشة أصغر إلى العمود 2 من الصف رقم 1

تحميل الصور

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

الرؤية

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

معاينة

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

افكار اخيرة

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