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

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي تصميمات حدود صورة الخلفية التي سنقوم ببنائها معًا.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، ستحتاج إلى ما يلي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

تلميحات عامة حول إنشاء تصميمات حدود صورة الخلفية

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

# 1 اختر الصور مع الكثير من الملمس

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

# 2 استخدم التدرجات والشفافية مع حدود صورة الخلفية

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

# 3 استخدم أوضاع المزج

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

استخدم خيارات الزاوية الدائرية للأشكال الفريدة

لا تحتاج كل الحدود إلى حواف مستقيمة. مزيج عنه قليلا! تتيح لك خيارات الزاوية المستديرة في Divi تشكيل تلك الزوايا بطرق إبداعية.

استخدم صور الخلفية المنظر كحدود

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

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

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

لنبدأ بتصميمنا الأول.

تصميم حدود صورة الخلفية # 1

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

إليك كيفية تصميمه.

أولاً ، أضف صفًا من عمودين إلى قسم عادي.

أضف الوحدة النمطية Blurb

ثم أضف وحدة دعاية مغالى فيها إلى العمود الأيسر.

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

بعد ذلك ، امنح الدعاية الدعاية لون خلفية بيضاء.

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

• خط العنوان: أوزوالد
• خط الجسم: لاتو
• الهامش 5٪ أعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين
• الحشو: 7٪ أعلى ، 7٪ أسفل ، 10٪ يسار ، 10٪ يمين
• الزوايا الدائرية: 20 بكسل أعلى اليمين ، 20 بكسل أسفل اليسار
• Box Shadow: انظر لقطة الشاشة

أضف صورة الخلفية إلى العمود

هذا يعتني بوحدة دعاية مغالى فيها. الآن دعنا نضيف حدود صورة الخلفية الخاصة بنا. للقيام بذلك ، سنضيف صورة خلفية إلى العمود الذي يحتوي على وحدة blurb. افتح إعدادات الصف ثم افتح إعدادات العمود 1 وأضف الخلفية التالية:

• صورة الخلفية: [تحميل صورة من اختيارك]
• لون الخلفية: # 303a7a
• مزيج صورة الخلفية: اللمعان

ثم قم بتحديث الزوايا الدائرية وظل الصندوق كما يلي:

• الزوايا الدائرية: 20 بكسل أعلى اليمين ، 20 بكسل أسفل اليسار
• Box Shadow: انظر لقطة الشاشة

النتيجة النهائية

الآن تحقق من التصميم النهائي.

تصميم حدود صورة الخلفية # 2

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

إليك كيفية تصميمه.

أضف الوحدة النمطية Blurb

لإنشاء التصميم ، سنقوم بإضافة دعاية مغالى فيها إلى العمود 2 من نفس الصف الذي يحتوي على التصميم رقم 1. امض قدمًا وانسخ وحدة blurb من التصميم رقم 1 والصقها في العمود 2. ثم قم بتحديث إعدادات الوحدة النمطية blurb كما يلي:

• الزوايا الدائرية: استعادة الوضع الافتراضي
• الهامش: 10٪ أعلى ، 10٪ أسفل ، 10٪ يسار ، 10٪ يمين
• الحشو: 15٪ أعلى ، 15٪ أسفل ، 10٪ يسار ، 10٪ يمين
• عرض الحدود: 1 بكسل
• لون الحدود: #ffffff

أضف صورة الخلفية إلى العمود

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

• تدرج الخلفية اللون الأيسر: # f7e0a5
• تدرج الخلفية اللون الأيمن: rgba (237،240،0،0.79)
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 0٪

ثم أضف صورة خلفية مع تأثير مزيج ألوان جميل.

• صورة الخلفية: [تحميل الصورة]
• مزيج صورة الخلفية: اللون

كما ترى ، يحافظ وضع مزج الألوان على لمعان اللونين المتدرجين خلف الصورة لإنشاء تصميم جميل لحدود الصورة بألوان ناعمة.

النتيجة النهائية

تحقق من النتيجة النهائية للتصميم.

تصميم حدود صورة الخلفية # 3

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

إليك كيفية تصميمه.

بالنسبة للمبتدئين ، أضف صفًا جديدًا من عمودين أسفل الصف الأول وانسخ وحدة blurb من الدعاية الإعلامية في العمود 1 من الصف العلوي والصقها في العمود 1 من الصف الجديد.

ثم قم بتحديث وحدة الدعاية الدسمة على النحو التالي.

• لون الخلفية: # 333344
• لون النص: فاتح
• الهامش: 10٪ أعلى ، 10٪ أسفل ، 10٪ يسار ، 10٪ يمين
• الحشو: 10٪ أعلى ، 10٪ أسفل
• الزوايا الدائرية: 20 بكسل
• ظل المربع: لا شيء

عندما يكون الدعاية المغلوطة في مكانها ، افتح إعدادات الصف وقم بتحديث إعدادات العمود 1 على النحو التالي:

• صورة الخلفية: [تحميل الصورة]
• استخدام تأثير المنظر: نعم
• طريقة المنظر: المنظر الحقيقي
• الزوايا الدائرية: 20 بكسل
• Box Shadow: انظر لقطة الشاشة

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

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

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

• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 200 بكسل
• لون الظل: #ffffff

تصميم نهائي

الآن دعنا نتحقق من التصميم النهائي.

تصميم حدود صورة الخلفية # 4

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

أضف الوحدة النمطية Blurb

للبدء ، انسخ وحدة blurb في العمود 2 من الصف العلوي والصقها في العمود 2 من الصف الثاني.

عند الانتهاء ، قم بتحديث إعدادات وحدة blurb كما يلي:

• الحدود: [إخراج الحدود من خلال استعادة الإعدادات الافتراضية للحدود]
• ظل المربع: لا شيء
• الهامش: 5٪ أعلى ، 5٪ أسفل ، 0٪ يسار ، 0٪ يمين

أضف حدود صورة الخلفية

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

• صورة الخلفية: [تحميل الصورة]
• لون الخلفية المتدرج الأيسر: # 141777
• تدرج الخلفية اللون الأيمن: # ffb7eb
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 0٪

• صورة الخلفية: [تحميل الصورة]
• مزيج صورة الخلفية: اللمعان

تصميم نهائي

تحقق من التصميم النهائي.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!