كيفية استخدام ظلال مربع الصف بشكل خلاق مع Divi

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

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

نتيجة

سطح المكتب

سيوضح لك التخطيط كيفية إعادة الإنشاء كما يلي على سطح المكتب:

متحرك

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

كيفية استخدام ظلال مربع الصف بشكل خلاق مع Divi

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

تنسيق الرأس

أول شيء عليك القيام به هو اختيار تنسيق العنوان الصحيح. انتقل إلى لوحة معلومات WordPress الخاصة بك > تخصيص> الرأس والتنقل> تنسيق الرأس> واختر "توسيط" كنمط الرأس .

شريط القوائم الأساسي

ارجع إلى Header & Navigation> Primary Menu Bar> وقم بإجراء التعديلات التالية:

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

القسم الأول

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

قسم التدرج الخلفية

سيحتاج هذا القسم إلى خلفية التدرج التالية:

• اللون الأول: # ea2e7d
• اللون الثاني: # edd900
• نوع التدرج: خطي
• اتجاه التدرج: 110 درجة
• موقف البداية: 0٪
• موضع النهاية: 100٪

تباعد

انتقل إلى علامة التبويب "التصميم". ضمن فئة التباعد الفرعية ، استخدم "100 بكسل" للحشو العلوي و "200 بكسل" للحشوة السفلية.

صف عمود واحد

صف خلفية متدرجة

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

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: # ea2e7d
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 56٪
• موضع النهاية: 100٪

العمود التدرج الخلفية

قم بالتمرير لأسفل واستخدم خلفية التدرج التالية لعمود ذلك الصف:

• اللون الأول: rgba (237،217،0،0.77)
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج للعمود: خطي
• اتجاه التدرج للعمود: 180 درجة
• موضع بداية العمود: 0
• موضع نهاية العمود: 100

تحجيم

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

• استخدام العرض المخصص: نعم
• العرض المخصص: 27٪

تباعد

بعد ذلك ، استخدم "20 بكسل" للحشو المخصص العلوي واليمين والسفلي واليسار للصف.

وحدة النص

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

• خط النص: Arvo
• حجم خط النص: 98 بكسل
• لون النص: #FFFFFF
• تباعد الرسائل النصية: 32 بكسل
• ارتفاع خط النص: 1.4em
• اتجاه النص: الوسط

القسم الثاني

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

قسم التدرج الخلفية

أولاً ، استخدم خلفية التدرج التالية لهذا القسم:

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: # 592851
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 80٪
• موضع النهاية: 80٪

تباعد

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

أول صف من عمودين

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

أضف أول صف من عمودين إلى هذا القسم الجديد واستخدم "#dddddd" كلون للخلفية.

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

سيحتاج العمود الأول إلى الخلفية المتدرجة التالية:

• اللون الأول: # 6ac922
• اللون الثاني: # b6c1b2
• العمود 1 نوع التدرج: خطي
• العمود 1 اتجاه التدرج: 136 درجة
• موضع البداية العمود 1: 23٪
• موضع نهاية العمود 1: 100٪

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

قم بالتمرير لأسفل واستخدم "#dddddd" كلون خلفية العمود 2.

تحجيم

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

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

تباعد

ستحتاج فئة التباعد الفرعية إلى المساحة المتروكة والهامش التالية:

• الحشوة العلوية واليمنى والسفلية واليسرى: 0 بكسل
• الهامش الأعلى: -150 بكسل
• الحشوة العلوية للعمود 1: 235 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية للعمود 1: 235 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة العلوية للعمود 2: 150 بكسل
• الحشوة السفلية للعمود 2: 150 بكسل

مربع الظل

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

• مربع الظل الأفقي: -3 بكسل
• مربع الظل الرأسي: -18 بكسل
• قوة مربع الظل الضبابية: 77 بكسل
• قوة انتشار الظل المربع: 23 بكسل
• لون الظل: rgba (0،0،0،0.3)

أول وحدة نصية

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

• خط النص: Arvo
• حجم خط النص: 34 بكسل
• لون النص: # 7a7a7a
• اتجاه النص: الوسط

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

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

• خط النص: Lato Light
• اتجاه النص: الوسط

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

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

الصف الثاني المكون من عمودين

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

أضف صفًا آخر من عمودين إلى القسم واختر "# b99bc1" كلون للخلفية.

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

قم بالتمرير لأسفل واختر "#dddddd" للون خلفية العمود 1.

تحجيم

انتقل إلى علامة التبويب Design وقم بإجراء الإعدادات التالية على فئة Sizing الفرعية:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

بعد ذلك ، استخدم المساحة المتروكة التالية:

• الحشوة العلوية واليمنى والسفلية واليسرى: 0 بكسل
• الحشوة العلوية للعمود 1: 150 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة السفلية للعمود 1: 50 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة العلوية للعمود 2: 150 بكسل
• الحشوة السفلية للعمود 2: 150 بكسل

مربع الظل

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

• مربع الظل الأفقي: -4 بكسل
• مربع الظل الرأسي: 24 بكسل
• قوة مربع الظل الضبابية: 77 بكسل
• قوة انتشار الظل المربع: 23 بكسل
• لون الظل: rgba (0،0،0،0.3)
• موضع ظل المربع: الظل الخارجي

وحدة الصورة الأولى في العمود الأول

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

• عرض المساحة أسفل الصورة: نعم
• الهامش العلوي: -500 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيمن: -50 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 200 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

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

• مربع الظل الأفقي: 2 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 30 بكسل
• لون الظل: rgba (255،255،255،0.68)
• موضع ظل المربع: الظل الخارجي

عمود الصورة الثاني في العمود الأول

أضف وحدة صورة أخرى إلى نفس العمود واستخدم الهامش التالي:

• الهامش العلوي: -50 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الهامش السفلي: 30 بكسل
• الهامش الأيسر: 100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

ثم قم بالتمرير لأسفل واستفد من ظل الصندوق التالي:

• مربع الظل الأفقي: 2 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 30 بكسل
• لون الظل: rgba (255،255،255،0.68)
• موضع ظل المربع: الظل الخارجي

استنساخ وحدات النص ووضعها في العمود الثاني

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

نتيجة

سطح المكتب

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

متحرك

والنتيجة التالية على الجوال:

افكار اخيرة

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

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

صورة مميزة من ديمتري جوزانين / shutterstock.com