كيفية الجمع بين خلفية الصورة وخيارات ظل الصندوق مع Divi

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

المثال الأول

سطح المكتب

متحرك

المثال الثاني

سطح المكتب

متحرك

المثال الثالث

سطح المكتب

متحرك

المثال الرابع

سطح المكتب

متحرك

كيفية الجمع بين خلفية الصورة وخيارات ظل الصندوق مع Divi

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

المثال الأول

الآن بعد أن أظهرنا لك ما يمكنك توقعه من هذا المنشور ، دعنا نلقي نظرة على كيفية إعادة إنشاء المثال التالي ببضع خطوات فقط داخل Divi وبدون رمز CSS إضافي:

إضافة صف عمودين

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

أضف صفًا من عمودين إلى قسم قياسي واختر "rgba (12،113،195،0.11)" كلون خلفية العمود 1.

تباعد

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

إضافة وحدة الصورة النمطية إلى العمود الأول (سطح المكتب والكمبيوتر اللوحي)

تحجيم

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

تباعد

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

مربع الظل

قم بالتمرير لأسفل علامة التبويب وقم بتطبيق ظل المربع التالي على الصورة:

• مربع الظل الأفقي: 80 بكسل
• مربع الظل الوضع الرأسي: 80 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 6 بكسل
• لون الظل: rgba (173،173،173،0.79)
• موضع ظل المربع: الظل الخارجي

الرؤية

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

وحدة استنساخ الصورة (الهاتف)

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

تغيير مربع الظل

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

• مربع الظل الأفقي: 33 بكسل
• مربع الظل الرأسي: 78 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 6 بكسل
• لون الظل: rgba (173،173،173،0.79)
• موضع ظل المربع: الظل الخارجي
  

الرؤية

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

المثال الثاني

بعد ذلك ، لدينا المثال الثاني الذي يبدو مثل هذا على سطح المكتب:

إضافة صف عمودين

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

أضف صفًا جديدًا من عمودين إلى القسم الذي تعمل عليه واستخدم خلفية التدرج التالية له:

• اللون الأول: rgba (237،240،0،0.55)
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 50.8٪
• مركز النهاية: 50.8٪

تحجيم

انتقل إلى علامة التبويب "تصميم" وقم بتمكين خيار "Make This Row Fullwidth".

تباعد

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

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

تباعد

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

مربع الظل

قم بالتمرير لأسفل نفس علامة التبويب واستخدم الإعدادات التالية للفئة الفرعية Box Shadow:

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

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

إعدادات وحدة الصورة في العمود الثاني هي نفسها. المضي قدما ، استنساخ وحدة الصورة ووضعها في العمود الثاني.

المثال الثالث

للمضي قدمًا ، سنوضح لك كيفية تحقيق النتيجة التالية:

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

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

أضف صفًا مكونًا من عمود واحد واختر "rgba (193،145،163،0.6)" كلون لخلفية العمود الأول.

إضافة وحدة صورة

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

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

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

الحدود

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

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

تحجيم

بعد ذلك ، أضف العرض التالي إلى وحدة الصورة:

• سطح المكتب: 85٪
• الجهاز اللوحي والهاتف: 100٪

تباعد

بعد ذلك ، افتح الفئة الفرعية Spacing واجعل الحشو والسطح التاليين يطبقان على وحدة الصورة:

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

مربع الظل

أخيرًا ، أضف ظل الصندوق بالإعدادات التالية:

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

المثال الرابع

وأخيراً المثال الأخير الذي سنوضحه لك كيفية إعادة الإنشاء يبدو كالتالي:

إضافة صف عمودين

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

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

خلفية متدرجة

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

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: rgba (92،0،158،0.46)
• نوع التدرج: خطي
• اتجاه التدرج: 138 درجة
• موقف البداية: 55٪
• موضع النهاية: 55٪

تباعد

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

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

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

لون الخلفية

تابع بإضافة وحدة صورة أخرى أسفل السابقة مباشرةً واستخدم "rgba (96،96،96،0.42)" كلون للخلفية.

تباعد

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

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

مربع الظل

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

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 24 بكسل
• لون الظل: # e2e2e2
• موضع ظل المربع: الظل الخارجي

افكار اخيرة

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

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

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