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

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

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

نظرة خاطفة

دعنا نلقي نظرة على النتائج التي يمكنك توقعها من هذا المنشور:

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

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

خلفية متدرجة

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

اساسي

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

علامة تبويب المحتوى

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

• اللون الأول: # 081e8c
• اللون الثاني: # 764f9b
• نوع التدرج: خطي
• اتجاه التدرج: 269deg
• موقف البداية: 40٪
• موضع النهاية: 60٪

علامة تبويب التصميم

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

الجانبين

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

علامة تبويب المحتوى

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

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

علامة تبويب التصميم

في علامة التبويب "التصميم" ، الشيء الوحيد الذي ستحتاج إليه هو "10 بكسل" من المساحة المتروكة للجانب الأيمن والأيسر.

ركن واحد

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

علامة تبويب المحتوى

لمثال الصورة الثالث ، استخدم خلفية التدرج التالية:

• اللون الأول: rgba (58،8،1،0.58)
• اللون الثاني: rgba (41،196،169،0)
• اتجاه التدرج: 152 درجة
• موقف البداية: 34٪
• موضع النهاية: 28٪

علامة تبويب التصميم

ثم أضف "20 بكسل" لكل حشوة أيضًا.

حدود الصورة وخلفية التدرج

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

تدرج دقيق

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

علامة تبويب المحتوى

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

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

علامة تبويب التصميم

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

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

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

على شكل

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

علامة تبويب المحتوى

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

• اللون الأول: rgba (53،0،188،0.1)
• اللون الثاني: # 680061
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 80٪
• موضع النهاية: 80٪

علامة تبويب التصميم

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

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

قم بالتمرير لأسفل وإضافة المساحة المتروكة التالية إلى الصورة:

• أعلى: 7 بكسل
• اليمين: 5 بكسل
• الأسفل: 7 بكسل
• اليسار: 5 بكسل

حد مزدوج

يمكن أن يؤدي استخدام حد مزدوج مع خلفية متدرجة إلى تقديم بعض النتائج المذهلة أيضًا. إلق نظرة:

علامة تبويب المحتوى

لون الخلفية المتدرج الذي استخدمناه في هذا المثال هو التالي:

• اللون الأول: rgba (224،43،32،0.61)
• اللون الثاني: rgba (12،113،195،0.87)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 71٪
• موضع النهاية: 93٪

علامة تبويب التصميم

للمضي قدمًا ، استخدم الإعدادات التالية للفئة الفرعية للحدود:

• استخدام الحدود: نعم
• لون الحدود: # f4f4f4 (تطابق لون خلفية القسم الخاص بك)
• عرض الحدود: 8 بكسل
• نمط الحدود: مزدوج

وأضف "10 بكسل" إلى الحشوة العلوية والسفلية واليمنى واليسرى للصورة.

زوايا المثلث

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

علامة تبويب المحتوى

لتحقيق حد الصورة الذي أظهرناه أعلاه ، استخدم إعدادات الخلفية المتدرجة التالية:

• اللون الأول: rgba (163،103،6،0)
• اللون الثاني: # e09900
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• مركز البداية: 97٪
• موضع النهاية: 97٪

علامة تبويب التصميم

في علامة تبويب التصميم ، سنحتاج أيضًا إلى إعدادات الحدود التالية:

• استخدام الحدود: نعم
• لون الحدود: # e09900
• عرض الحدود: 2 بكسل
• نمط الحدود: متقطع

أخيرًا ، سنحتاج إلى حشوة "8 بكسل" للحشوة العلوية والسفلية واليسرى واليمنى.

نمط وخلفية متدرجة

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

مرح

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

علامة تبويب المحتوى

في المثال الأخير ، سنستخدم إعدادات الخلفية المتدرجة التالية:

• اللون الأول: rgba (4،49،96،0.51)
• اللون الثاني: rgba (119،74،15،0.51)
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 0٪
• موضع النهاية: 100٪

علامة تبويب التصميم

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

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار
• مزيج صورة الخلفية: مضاعفة

آخر شيء عليك القيام به هو إضافة مساحة بحجم "12 بكسل" إلى الحشوة العلوية والسفلية واليمنى واليسرى لصورتك.

افكار اخيرة

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

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

صورة مميزة بواسطة السيد Aesthetics / shutterstock.com