لا تزال صور الحدود والخلفيات عناصر تصميم شائعة عند إنشاء مواقع الويب. استخدام صور الخلفية المناسبة يُضفي طابعًا مميزًا وأسلوبًا مميزًا على موقعك دون إنفاق الوقت والمال على رسومات مخصصة. كما تُعدّ الحدود مفيدة في إضفاء هيكلية على محتواك.
اليوم سنقوم بجمع هذين الأصلين معًا من خلال تصميم صور الخلفية كحدود. يحتوي Divi على مجموعة مفيدة من الخيارات لتخصيص صور الخلفية، مما يجعل من السهل تصميم صور الخلفية لتصميمات حدود فريدة. يتيح لنا هذا الجمع بين الألوان والتدرجات وظلال الصندوق وأوضاع المزج بجميع أنواع الطرق الإبداعية.
دعونا نبدأ.
ما تحتاجه للبدء
للبدء ، تحتاج إلى ما يلي:
- تم تثبيت موضوع Divi وتفعيله
- تم إنشاء صفحة جديدة للبناء من البداية على الواجهة الأمامية (مُنشئ بصري)
- الصور التي سيتم استخدامها للمحتوى الخيالي
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
نصائح عامة لإنشاء أنماط حدود صورة الخلفية
قبل البدء في البناء ، إليك بعض النصائح العامة التي يجب وضعها في الاعتبار عند إنشاء أنماط حدود صورة الخلفية.
# 1 اختيار الصور مع الكثير من الملمس
في معظم الأوقات ، سترغب في أن تكون حدودك أضيق. هذا يعني أنك لن تكون قادرًا على رؤية الكثير من الصورة. لذلك من المفيد استخدام الصور التي تحتوي على الكثير من النسيج. على سبيل المثال ، يمكنك استخدام صورة لمنظر طبيعي أو باقة زهور أو برج مرتفع. إليك بعض الصور التي أستخدمها في هذا البرنامج التعليمي.
# 2 استخدم التدرجات والشفافية مع حدود صورة الخلفية
يمكن لصور الخلفية أحيانًا أن تُشكّل حدودًا رائعة لمحتواك بمفردها. ولكن في أغلب الأحيان، ستحتاج إلى إضافة طبقات إلى صور الخلفية لإضافة لون أو لجعل الخلفيات أغمق أو أفتح. تدرجات الخلفية طريقة رائعة لإضافة طبقة إلى صور الخلفية وإنشاء تصاميم حدود فريدة.
# 3 استخدم أوضاع الدمج
يمكن أن يؤدي استخدام أوضاع المزج على صور الخلفية إلى تطبيق ألوان وأنسجة فريدة على أنماط الحدود. كل ما عليك فعله هو إضافة لون للخلفية أو تدرج مع صورة الخلفية الخاصة بك ثم تحديد وضع المزج لصورة الخلفية. يعد اللون والسطوع والمضاعفة والشاشة بعض أوضاع المزج الرائعة لحدود صورة الخلفية.
استخدم خيارات الزاوية الدائرية لأشكال فريدة
ليس من الضروري أن تحتوي جميع الحدود على حواف مستقيمة. امزجها قليلا! تتيح لك خيارات الزوايا المستديرة في Divi تشكيل هذه الزوايا بطريقة إبداعية.
استخدم صور الخلفية المنظر كحدود
إن الشيء العظيم في اختلاف المنظر هو أنه يضفي الحيوية على التصميم مع الحركة. بالإضافة إلى ذلك ، إذا كنت تستخدم صور الخلفية مع اختلاف المنظر لتصميمات الحدود الخاصة بك ، فيمكنك إنشاء حركة خفية تبرز وتجعل المحتوى الخاص بك بارزًا.
تصميم خلفية صورة الخلفية في ديفي
والآن بعد أن فهمنا الفكرة العامة الكامنة وراء إنشاء أنماط حدود صورة الخلفية ، فلنتخيل بعضًا معًا. سنبني نماذج مختلفة 2. سيكون لكل منها وحدة عرض تقديمي أساسية لتكون بمثابة محتوى خيالي. وسنستخدم معلمات العمود لإضافة حد صورة الخلفية للوحدة.
لنبدأ بتصميمنا الأول.
#1 صورة خلفية الحدود
يتميز هذا التصميم الأول بحدود صورة خلفية ضيقة مع ظل منطقة لجعلها تبدو أشبه بإطار للمحتوى.
إليك كيفية تصميمه.
أولاً ، أضف صفًا من عمودين إلى قسم عادي.
إضافة ملخص الوحدة النمطية
ثم أضف وحدة blurb في العمود الأيسر.
بمجرد وضع الدعاية المغلوطة في مكانها ، افتح إعدادات الدعاية واستخراج الصورة الافتراضية بحيث يكون العنوان ومحتوى النص فقط مرئيين.
ثم أعط النص الخاص بك خلفية بيضاء.
ثم قم بتحديث معلمات تصميم العرض التقديمي كما يلي:
- عنوان النص: أوزوالد
- هيئة الشرطة: لاتو
- الهامش 5٪ في الأعلى ، 5٪ في الأسفل ، 5٪ في اليسار ، 5٪ في اليمين
- مواد التنجيد: 7٪ في الأعلى ، 7٪ في الأسفل ، 10٪ في اليسار ، 10٪ في اليمين
- الزوايا الدائرية: 20px في أعلى اليمين ، 20px في أسفل اليسار
- Box Shadow: انظر لقطة الشاشة
أضف صورة الخلفية إلى العمود
هذا يعتني بوحدة العرض لدينا. الآن دعنا نضيف حدود صورة الخلفية. للقيام بذلك ، سنضيف صورة خلفية إلى العمود الذي يحتوي على وحدة Blurb. افتح إعدادات الصف ، ثم إعدادات العمود 1 وأضف الخلفية التالية:
- صورة الخلفية: [تحميل الصورة التي تختارها]
- لون الخلفية: #303a7a
- مزيج صورة الخلفية: السطوع
ثم قم بتحديث الزوايا الدائرية وظل الصندوق كما يلي:
- الزوايا الدائرية: 20px في أعلى اليمين ، 20px في أسفل اليسار
- Box Shadow: انظر لقطة الشاشة
نتيجة نهائية
الآن ، تحقق من التصميم النهائي.
صورة خلفية الحدود # 2
يسلط هذا التصميم التالي الضوء على حقيقة أن استخدام صور عالية التركيب يمكن أن ينشئ حدودًا جميلة ، خاصةً عند دمجها مع أوضاع مزج الصور.
إليك كيفية تصميمه.
أضف وحدة Blurb
لإنشاء التصميم ، سنضيف نص الدعاية إلى العمود 2 من نفس الصف الذي يحتوي على التصميم رقم 1. تابع وانسخ وحدة تخطيط التصميم رقم 1 والصقها في العمود 2. ثم ، قم بتحديث إعدادات وحدة العرض كما يلي:
- الزوايا المدورة: استعادة الإعدادات الافتراضية
- الهامش: 10٪ في الأعلى ، 10٪ في الأسفل ، 10٪ في اليسار ، 10٪ في اليمين
- مواد التنجيد: 15٪ في الأعلى ، 15٪ في الأسفل ، 10٪ في اليسار ، 10٪ في اليمين
- عرض الحد: 1px
- لون الحدود: # fffff
أضف صورة الخلفية إلى العمود
مع وجود الوحدة النمطية الخاصة بنا ، افتح إعدادات الخط وأضف تدرج خلفية إلى عمود 2.
- التدرج الخلفي الأيسر: #f7e0a5
- التدرج الخلفي الأيمن اللون: rgba (237,240,0,0.79)
- اتجاه التدرج: 90deg
- وضع البدء: 50٪
- الوضع النهائي: 0٪
ثم أضف صورة خلفية بتأثير تدرج لطيف.
- صورة الخلفية: [تحميل الصورة]
- مزيج صورة الخلفية: اللون
كما ترى ، يحافظ وضع مزج الألوان على سطوع تدرجي لونيين خلف الصورة لإنشاء نمط حدود صورة جميل بألوان ناعمة.
نتيجة نهائية
اكتشاف النتيجة النهائية للتصميم.
أحدث الأفكار
يعد إنشاء حدود بالصور طريقة سهلة لإضافة الجمال والشخصية إلى تصميمك. تم تصميم التصميم المميز في هذا البرنامج التعليمي لتسليط الضوء على الاحتمالات المتاحة مع Divi في تصميم الحدود الفريدة. لذلك ، مع مجموعات الألوان المختلفة ، فإن التصميمات لا حدود لها. لذا ، احصل على بعض الصور واستكشف المزيد عن تصميم الحدود بالصور على Divi.
لصحتك.