تستمر صور الحدود والخلفية في كونها عناصر تصميم شائعة عند إنشاء مواقع الويب. يمكن أن يؤدي استخدام صور الخلفية الصحيحة إلى إضافة شخصية وأسلوب إلى موقعك دون إنفاق الوقت والمال على الرسومات المخصصة. والحدود مفيدة لإضافة هيكل إلى ملفك محتويات.
اليوم سنجمع هذين الاثنين معًا من خلال تصميم صور الخلفية كحدود. Divi لديه مجموعة من الخيارات المفيدة لتخصيص صور الخلفية ، مما يجعل من السهل تصميم صور الخلفية لتصميمات الحدود الفريدة. يتيح لنا ذلك الجمع بين الألوان والتدرجات وظلال الصندوق وأنماط المزج بجميع أنواع الطرق الإبداعية.
دعونا نبدأ.
ما تحتاجه للبدء
للبدء ، تحتاج إلى ما يلي:
- Le موضوع ديفي مثبت ونشط
- تم إنشاء صفحة جديدة للبناء من البداية على الواجهة الأمامية (مُنشئ بصري)
- صور لاستخدامها محتويات خيالي
بعد ذلك سيكون لديك لوحة فارغة لبدء التصميم فيها 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.
لصحتك.
