قم بتنزيل 5 صور حدود مجانية لـ Divi

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

دعنا نذهب اليها!

معاينة

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

قم بتنزيل ملفات الصور مجانًا

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

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

تنزيل مجاني

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

تحميل

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

مقاربة

• بمجرد تنزيل وفك ضغط المجلد الذي يحتوي على جميع صور الحدود الخمسة ، ستجد 4 مجلدات فرعية: الحد العلوي والحد السفلي والحد الأيسر والحد الأيمن
• هذا يعني أن هناك ما مجموعه 20 ملف صورة متاحة لك لاستخدامها
• في وقت لاحق في هذا المنشور ، ستجد الإعدادات المصاحبة التي تطابق كل جانب من جوانب الحدود
• لإيقافه ، يمكنك دمج صور الحدود مع تراكبات متدرجة
• ستساعدك تراكبات الألوان هذه على جعل الصور تبدو نابضة بالحياة أو دقيقة كما تريد
• أنت حر في استخدام هذه الصور الحدودية دون أي قيود ، حتى للأغراض التجارية

إنشاء التصميم العام

إضافة قسم جديد

تباعد

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

• الحشوة العلوية: 300 بكسل
• الحشو السفلي: 300 بكسل

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم

أضف وحدة نص العنوان إلى العمود 1

أضف مربع محتوى H2

لنبدأ في إضافة بعض الوحدات! الوحدة الأولى المطلوبة هي وحدة نصية. أضف واحدًا إلى العمود الأول وأضف نسخة H2 التي اخترتها إلى مربع المحتوى.

إعدادات نص العنوان

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات نص H2 في علامة التبويب "تصميم".

• خط العنوان 2: Abril Fatface
• حجم نص العنوان 2: 80 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)

تباعد

تابع بإضافة بعض الهامش إلى الجزء العلوي من وحدة النص هذه.

• الهامش الأعلى: 150 بكسل

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

أضف ارتباطًا إلى Content Box

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

إعدادات نص الارتباط

بعد ذلك ، قم بتغيير إعدادات نص الارتباط في علامة التبويب "تصميم".

• وزن خط الارتباط: عريض للغاية
• نمط خط الارتباط: أحرف كبيرة
• لون نص الرابط: # 000000
• حجم نص الرابط: 21 بكسل

تباعد

أضف بعض الهامش العلوي لإنشاء مساحة بين وحدة النص هذه والوحدة السابقة أيضًا.

• الهامش الأعلى: 100 بكسل

الحدود

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

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 333333

أضف وحدة نص الوصف إلى العمود 2

إعدادات النص

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

• حجم النص: 22 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)
• ارتفاع خط النص: 2.6em
• اتجاه النص: ضبط

تحجيم

اجعل إعدادات التحجيم تطابق أحجام الشاشات المختلفة أيضًا:

• العرض: 82٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

وأخيرًا ، أضف بعض الهامش العلوي والسفلي.

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل

إضافة أشكال الحدود

إعدادات خلفية الحدود اليسرى

الآن بعد أن أكملنا التصميم العام ، يمكننا البدء في إضافة صور الحدود! سنبدأ بالجانب الأيسر من الحد. ابحث عن صورة الحدود التي تختارها في مجلد "Left Border" وقم بتحميلها كصورة خلفية القسم. بعد ذلك ، قم بتطبيق إعدادات صورة الخلفية التالية:

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

إعدادات خلفية الحد الأيمن

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

• حجم صورة الخلفية: الحجم الفعلي
• موضع صورة الخلفية: يمين الوسط
• تكرار صورة الخلفية: لا يوجد تكرار

أعلى إعدادات خلفية الحدود

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

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

إعدادات خلفية الحد السفلي

أو ، أخيرًا وليس آخرًا ، يمكنك العثور على صور الحد السفلي في مجلد "Bottom Border" ودمجها مع إعدادات خلفية القسم هذه:

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

مزج الألوان باستخدام تراكب شبه شفاف

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

• اللون 1: #ffffff
• اللون 2: rgba (255،255،255،0.36)
• اتجاه التدرج: 141 درجة
• وضع التدرج فوق صورة الخلفية: نعم

معاينة

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

افكار اخيرة

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