قم بتنزيل 9 تراكبات صور على شكل مجاني لـ Divi

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

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

معاينة

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

سطح المكتب

هاتف

قم بتنزيل تراكبات الصور على شكل شكل مجانًا

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

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

تنزيل مجاني

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

تحميل

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

مقاربة

• تكون تراكبات الصور ذات الأشكال التي يمكنك العثور عليها في مجلد التنزيل جاهزة للاستخدام إذا كنت تجمعها مع صف أبيض و / أو لون خلفية القسم
• إذا كنت ترغب في ضبط تراكبات الصورة ذات الشكل وفقًا للون خلفية آخر ، فستحتاج إلى تصدير تراكبات الصورة ذات الشكل بلون آخر باستخدام ملف الرسام المتضمن في التنزيل أعلاه
• سنوضح لك كيفية تغيير لون تراكب الصورة الشكل في الجزء الأول من البرنامج التعليمي (باستخدام Adobe Illustrator)
• بعد ذلك ، سننتقل إلى Divi ونقوم بتحميل إحدى تراكبات الصور المشكلة إلى وحدة صورة
• سنضيف أيضًا صورة خلفية وخلفية متدرجة إلى وحدة الصورة والتي ستظهر من خلال تراكب الصورة ذي الشكل

تعديل تراكبات الصور المشكلة إلى لون خلفية القسم باستخدام Adobe Illustrator

افتح ملف Illustrator في مجلد التنزيل

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

حدد تراكب شكل الصورة الذي تختاره

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

تغيير اللون لمطابقة لون خلفية القسم

استمر بتغيير لون الشكل إلى نفس لون الخلفية الذي تخطط لاستخدامه لصفك و / أو قسمك.

حدد Artboard

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

احفظ تراكب الصور على شكل PNG للويب

واحفظه كملف صورة PNG للويب بالانتقال إلى ملف> تصدير> حفظ للويب .

لنبدأ في الإنشاء!

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

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

حان الوقت للانتقال إلى Divi وإنشاء النتيجة! أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا عاديًا جديدًا.

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

هيكل العمود

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

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

تحميل تراكب صورة على شكل

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

خلفية متدرجة

امض قدمًا وأضف خلفية متدرجة من اختيارك بعد ذلك.

• اللون 1: # aa2bff
• اللون 2: # 09f7eb

الصورة الخلفية

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

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

تحجيم

خطوة أخرى مهمة لإنجاح هذا البرنامج التعليمي هي تمكين خيار "Force Fullwidth" في إعدادات تغيير الحجم في وحدة Image Module. سيؤدي هذا إلى التأكد من أن خلفية التدرج وصورة الخلفية ستظهر فقط من خلال المنطقة الشفافة لتراكب الصورة ذي الشكل.

• فرض عرض كامل: نعم

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

إضافة محتوى

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

إعدادات النص

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

• خط العنوان 2: أنتيك ديدون
• وزن خط العنوان 2: غامق
• حجم نص العنوان 2: 45 بكسل
• العنوان 2 تباعد الأحرف: -2 بكسل

تباعد

أضف بعض الهامش العلوي المخصص أيضًا.

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

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

إضافة محتوى

الوحدة الثانية التي سنحتاجها هي وحدة نص الوصف. أدخل بعض المحتوى المفضل.

إعدادات النص

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

• اتجاه النص: ضبط

تحجيم

قم بتغيير العرض في إعدادات التحجيم أيضًا.

• العرض: 63٪

أضف وحدة الزر إلى العمود 2

أضف نسخة

الوحدة التالية والأخيرة التي سنحتاجها هي وحدة الأزرار. أدخل بعض المحتوى المفضل.

إعدادات الزر

تابع بالذهاب إلى إعدادات الزر وتغيير مظهر الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: #ffffff
• لون التدرج 1: # aa2bff
• لون التدرج 2: # 09f7eb
• اتجاه التدرج: 111 درجة

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: -2 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

أضف بعض الحشو المخصص الإضافي إلى الزر أيضًا.

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

مربع الظل

أخيرًا وليس آخرًا ، أكمل التصميم بإضافة ظل قوس دقيق إلى الزر.

• مربع قوة طمس الظل: 50 بكسل
• قوة انتشار الظل المربع: -5 بكسل

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

هاتف

افكار اخيرة

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