دمج صور متعددة مفيد لإنشاء خلفيات احترافية لموقعك الإلكتروني. الفكرة هي أخذ صورتين أو ثلاث صور منفصلة ووضعها في طبقات. ثم استخدام وضع المزج لدمج الطبقات لإنشاء تصميم متناغم وموحد.
يحتوي كل عنصر من عناصر Divi Builder على وضع دمج مدمج وخيارات تصفية مما يجعل من السهل دمج العناصر في Divi builder. بالطبع ، يمكنك مزج الصور في Photoshop (أو محرر صور آخر) ، ولكن بالنسبة لأولئك الذين يبحثون عن حل Divi عملي ، يجب أن يساعدك هذا البرنامج التعليمي ، لأنه مع Divi يكون من السهل جدًا. بمجرد أن تكون لديك الصور في المكان المناسب ، يمكنك مزجها ببضع نقرات فقط. وبالطبع ، لديك ترسانة من خيارات Divi لعمل اللمسات النهائية وإعطاء بُعد إبداعي جديد للتصميم.
دعونا نبدأ.
مسح
فيما يلي نظرة عامة على التصميم الذي سنبنيه معًا.
ما تحتاجه للبدء
للبدء ، سوف تحتاج إلى القيام بما يلي:
- إذا لم تقم بذلك بالفعل، فقم بتثبيت وتنشيط سمة Divi المثبتة لديك (أو مكون Divi Builder إذا كنت لا تستخدم سمة Divi).
- أنشئ صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة في الواجهة الأمامية (مُنشئ بصري).
- قم بتحميل بعض الصور الوهمية إلى مكتبة الوسائط لاستخدامها في البرنامج التعليمي. أنا أستخدم صورًا من حزمة تخطيط طبيب العيون .
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
كيفية مزج صور متعددة لإنشاء تصميم خلفية مخصص في Divi
لنبدأ بالقسم والخط
لإنجاز الأمور ، أضف صفًا من العمود إلى القسم العادي.
إضافة الصور مع وحدة الصورة
الصورة رقم 1
بمجرد تعريف الصف والعمود ، أضف وحدة صورة إلى الخط.
قم بتحميل صورة يبلغ حجمها حوالي 500 بكسل × 700 بكسل. أنا أستخدم واحدًا من Eye Doctor Layout Pack.
بمجرد تحميل الصورة ، اجعل أقصى عرض للصورة باستخدام وحدة الطول vw بحيث تتناسب جيدًا مع الصور الأخرى التي سنقوم بدمجها ، ثم قم بمحاذاة الصورة لليسار على النحو التالي :
- أقصى عرض: 33vw
- محاذاة الوحدة: اليسار
نريد الصورة التالية التي نضيفها لتتماشى مع يمين تلك الصورة. لذلك علينا أن نحول هذه الصورة إلى اليسار. للقيام بذلك ، أضف CSS التالي إلى العنصر الرئيسي:
تعويم: غادر؛
الصورة رقم 2
ثم أضف وحدة صورة جديدة أسفل الصورة الحالية.
بعد ذلك ، قم بتنزيل صورة جديدة ذات أبعاد قريبة من 1000 بكسل بواسطة 667 بكسل.
ثم امنح الصورة عرضًا جديدًا ومحاذاة قصوى جديدة.
- أقصى عرض: 40vw
- محاذاة الوحدة: اليمين
نظرًا لأن الصورة الأولى تطفو إلى اليسار ، يجب أن تكون الصورة الثانية الآن بجوار اليمين.
سنعود لوضع بعض اللمسات الأخيرة على هذه الصور ، ولكن الآن دعنا ننتقل إلى الإعدادات في القسم.
إعدادات القسم
افتح إعدادات القسم وإضافة صورة خلفية وتدرج كالتالي:
- صورة الخلفية: [تنزيل الصورة تقريبًا 1920 × 1280 بكسل]
- التدرج الخلفي الأيسر اللون: rgba (1,16,63,0.64)
- التدرج الخلفي الأيمن اللون: rgba (12,113,195,0.82)
- ضع التدرج فوق صورة الخلفية: نعم
ثم ضبط الحشو قليلا.
- مواد التنجيد (المكتب): 0px في الأعلى ، 0px في الأسفل
- الحشو (الهاتف): 0px في الأعلى ، 10vw في الأسفل
إعدادات الخط
عند اكتمال القسم ، افتح إعدادات الخط وقم بتحديث العناصر التالية:
- العرض: 100٪ ؛
- الحد الأقصى للعرض: 100٪ ؛
- مواد التنجيد: 0px في الأعلى ، 0px في الأسفل
أضف وضع الدمج إلى السطر
الآن يجب أن يغطي الخط الجزء السفلي بالكامل من القسم. سيتيح لنا ذلك إضافة وضع دمج إلى السطر لدمج الصورتين مع خلفية القسم. للقيام بذلك ، قم بإضافة وضع المزج التالي.
- وضع الانصهار: ضرب
لماذا تتكاثر؟
يضاعف وضع المزج المضاعف الطبقة / الصف الحالي (بما في ذلك أي صور فيه) في الطبقة الموجودة أسفله (خلفية القسم). طريقة سهلة للتفكير في التأثير هي تخيل شريحتين في جهاز عرض شرائح مكدسة واحدة خلف الأخرى. إذا قمت بعرض الصورتين على شاشة ، فستحصل على مزيج أغمق قليلاً من الاثنين.
مركز الصور عموديا
هذا ليس ضروريًا ، ولكن إذا كنت تريد التأكد من بقاء كلتا الصورتين في الصف في المنتصف عموديًا ، فيمكنك إضافة مقتطف CSS إلى العمود. للقيام بذلك ، افتح إعدادات الصف ثم انقر فوق إعدادات العمود. ثم أضف كود CSS التالي إلى العنصر الرئيسي.
عرض: المرن. محاذاة البنود: مركز.
اللمسات الأخيرة على أفضل صورتين
في الوقت الحالي ، يتم إقران أفضل صورتين لدينا بشكل جيد ، ولكن يمكنهم استخدام بعض تغييرات التصميم لجعلها تبدو أكثر احترافية قليلاً. يمكننا استخدام ظل الصندوق الأبيض لتنعيم حواف الصور واستخدام أمر التحويل لوضعها بالضبط في المكان الذي نريدها أن تبقى فيه.
صورة # 1 المفاتيح النهائية
افتح إعدادات وحدة الصورة على اليسار وقم بتحديث ما يلي:
- Box Shadow: انظر لقطة الشاشة
- Box Shadow Blur Force: 6vw
- سمك غطاء الصندوق: 6vw
- لون الظل: #ffffff
- ترجمة المحول: 5vw (المحور X) ، 11vw (المحور Y)
صورة # 2 المفاتيح النهائية
بمجرد الانتهاء من معالجة الصورة رقم 1 على اليسار ، افتح إعدادات الصورة رقم 2 على اليمين وقم بإجراء التغييرات التالية:
- Box Shadow: انظر لقطة الشاشة
- Box Shadow Blur Force: 3vw
- قوة انتشار صندوق الظل: 3vw
- لون الظل: #ffffff
يمكننا حتى إضافة بعض المرشحات لجعل الصورة أكثر وضوحا.
- التشبع: 30٪
- التعتيم: 60٪
إضافة محتوى النص
الآن بعد أن أصبح قسمنا مكتملًا بثلاث صور مدمجة بشكل جيد، يمكننا إضافة المحتوى الخاص بنا إلى أعلى القسم. للقيام بذلك، أضف قسمًا جديدًا أسفل القسم الحالي.
ثم أضف صفًا من العمود إلى القسم العادي.
ثم إضافة وحدة نمطية النص إلى السطر.
محتوى الجسم
قم بتحديث محتوى وحدة النص باستخدام محتوى النص التالي:
احجز فحص عين المحتوى الخاص بك يذهب هنا. قم بتحرير أو إزالة هذا النص في الصفحة أو في إعدادات محتوى الوحدة النمطية. يمكنك أيضًا تصميم كل جانب من جوانب هذا المحتوى في إعدادات تصميم الوحدة النمطية وحتى تطبيق CSS مخصص على هذا النص في إعدادات الوحدة النمطية المتقدمة
تنسيق النص
بمجرد وضع محتويات الجسم في مكانها ، قم بتحديث معلمات التصميم كما يلي:
- لون نص النص: #ffffff
- الخط: بوبينس
- لون نص العنوان: #ffffff
- حجم عنوان النص: 5vw
- العرض: 60vw (سطح المكتب) ، 100٪ (هاتف)
- الهامش (سطح المكتب): -35٪ للأعلى ، 35٪ لأسفل
- الهامش (الهاتف): -70٪ للأعلى ، 70٪ لأسفل
التصميم النهائي
هنا هو التصميم النهائي.
الأفكار النهائية
يوفر وضع مزيج Divi وخيارات التصفية كل ما تحتاجه لمزج الصور لإنشاء خلفيات احترافية. تتمثل الحيلة في وضع الصور باستخدام وحدات طول vw بحيث يكون تصميم الخلفية مستجيبًا أيضًا على الهاتف المحمول. ولكن بمجرد أن تكون الصور في موضعها ، يمكننا تجربة جميع أنواع أوضاع المزج وخيارات التصميم الأخرى التي لا حصر لها لإنشاء تصميمات متناغمة للغاية.
آمل أن يكون هذا المقال قد قدم لك بعض الإلهام وأتمنى أن أسمع منك في التعليقات.
لصحتك!
ضعيف جدًا في التكيف مع الصور الأخرى التي يصعب تنفيذها ولكن شكرًا لك على أي حال
شكرا لك !! 🙂